Bloggerテンプレートを「Vaster」に変更しました
公開日： 2016年5月3日火曜日 Blogger CSS HTML Web
こんにちは、Waringo88です。
Bloggerを始めて一月が経ちました。まだ記事の数も15ほどで少ないのですが、自分なりに少しずつカスタマイズを試して楽しんでいます。
ここ数日Bloggerテンプレートを変更したくて探していたのですが、英語サイトのため詳細情報を読み取れなくて二の足を踏んでいました。
いつもBloggerのカスタマイズ方法を参考にさせていただいているトーマスイッチさんのサイトで、Bloggr日本語テンプレートを公開されていたので早速ダウンロードすることにしました。
Bloggerテンプレート「Vaster」の入手方法
「Vaster」はトーマスイッチさんが公開してくださっており、無料でダウンロードが可能です。
「Vaster」の特徴
「Vaster」では、既存のテンプレートと比べて、以下の５つにおいて、優れた性能を持っています。
- SEOの最適化
- 欲しかった機能を全て搭載
- カスタマイズ前提のシンプルなデザイン
- レスポンシブデザイン対応
- 簡単にアドセンスの配置を最適化
▼引用およびBloggr日本語テンプレート「Vaster」の入手は下記URLから "シンプルなblogger日本語テンプレート「Vaster」を作ったので公開していく ". トーマスイッチ, (参照 2016 -5-2)
初心者が「Vaster」の初期設定でつまづいたこと
「Vasterをダウンロードした後にやるべき初期設定4つ」の記事で具体的な方法を教えてくださっているので、blogger初心者でも「Vaster」テンプレートへ変更自体はスムーズにできます。
レスポンシブユニット（スマホにも最適化されたグーグルアドセンス）の設置方法
「Vaster」の特徴として「レスポンシブデザイン（スマホにも最適化されたデザイン）」が挙げられます。初期設定記事の中でも、グーグルアドセンスの設置方法について、コードをコピペするだけでブログに反映されるよう教示くださっています。
ただし、レスポンシブユニットを貼り付ける方法について、やり方がわからずつまづいてしまいました。
その後、記事ページの冒頭に「続きを読む（moreタグ）」を入力＋「bloggerでアドセンスのレスポンシブユニットを貼り付ける方法」の記事を参考に、カスタマイズしたコードをHTML編集画面の指定の場所「<!--この真下にアドセンスを挿入 記事中-->」にコピペすることで解決できました。
グーグルアドセンスの上に「スポンサーリンク」の文字を記載する方法
Firefoxの「右クリック」→「ページのソースを表示」でトーマスイッチさんのブログを参考にして、アドセンスコードの直前に下記のソースコードを追記しました。
まとめ
「Vaster」はレスポンシブデザイン対応のBlogger用日本語テンプレート。PCとタブレット・スマフォ共用デザインのため、初心者がカスタマイズする場合にデバイス毎にCSSを設定する必要がないので取り組みやすいです。
今までBloggerデフォルトのテンプレートを使っていて、記事タイトルがh3になっている点が非常に気になっていました。「Vaster」ではhタグが最適化されています
管理人はHTML、CSSに関する未熟さからHTMLで直接スタイルを指定していたため、テンプレートの変更に当たってページ毎にソースコードを修正する必要があり、作業に半日ほどかかってしまいました。
このブログにはまだ写真がありません。「Vaster」は記事一覧にアイキャッチ画像が表示されるスタイリッシュなデザインになっているので、画像を順次追加していきたいと思います。
