トップページに記事リストを一覧表示しているブログを多く見かけるが、Bloggerのテンプレート一覧にはそれっぽいものがない。そこでネット検索してみると、海外のユーザーが作ったテンプレートがたくさん引っかかる。

しかし、見栄えは良いものの細かい設定が難しく、そのテンプレート自体を解説しているサイトも見つからないため、カスタマイズには向いていないようだ。そこで、色々と調べてみると「Vaster2」というテンプレートが見つかった。

このテンプレートは「トーマスイッチ」さん というサイトで無料配布されているBlogger用テンプレートで、初めからトップページに記事が一覧表示される設定になっており、シンプルなデザインで すぐにでも使えるような仕様になっている。

また、標準でSNSボタンが設置されており、レスポンシブデザインにも対応している。その他にも、記事内と記事下にアドセンスを貼り付けるスペースがあったり、関連記事の表示機能もあるようだ。

まさに自分の理想のデザインなので、当サイトはVaster2を使って運用していくことにする。

Vaster2について

ダウンロード

・トーマスイッチ（Vaster2|レスポンシブ対応済みのblogger日本語テンプレート）

Vaster2のテンプレートは上記のページからダウンロードすることができる。「通常版」と「テーマデザイナー対応版」の2種類があり、どちらかを選択して適応する。

なお、テーマデザイナー対応版は、テーマデザイナーで対応した場所の色設定ができるようになっている。

主な仕様

Vaster2の主な仕様は以下の通り。

・シンプルなデザイン（トップ画面に記事リストを一覧表示）
・レスポンシブデザイン対応（閲覧するデバイスに合ったサイズに自動変更）
・6種のSNSボタン（Twitter・Facebook・Google+・はてなブックマーク・Pocket・Feedly）
・関連記事の表示（画像なしの記事は代替画像が挿入）
・記事中・記事下にアドセンスを貼れる（追記の区切り上・記事の末尾に挿入）

適応方法と初期設定

適応方法

赤枠内を操作

・Vaster2のテンプレートをダウンロード
・Blogger設定ページから「テーマ」を選択
・右上の「バックアップ/復元」をクリック
・「ファイルを選択」からVaster2テンプレートをアップロード

初期設定

・モバイルテンプレートの選択を「いいえ」にする
・HTML内の「feedlyの設定」で、URLを自分のサイトアドレスに書き換える
・アドセンスを設置する

詳しくはダウンロード元のページに書いてある

Feedlyボタンの再設定

多分、初期設定のままだとFeedlyのボタンが上手く機能していないハズ。

上手く機能しない場合は、以下の方法でコードを書き換えておく必要がある。

【方法】

・「HTMLの変更」から「feedly」でコードを検索
・「a href='http://cloud.feedly.com/#subscription%2Ffeed%2FサイトのＵＲＬ'」を
「a href="https://feedly.com/i/subscription/feed/サイトのURL/feed"」に書き換える

カスタマイズについて

HTMLやCSSを変更する

Vaster2のカスタマイズは、基本的に「テーマ」の「HTMLの編集」からコードを書き換えて行うことになる。CSSにはある程度の説明が書き加えられているので、編集する場所は分かりやすくなっている。

しかし、テーマデザイナーでのレイアウトや細かい設定ができない仕様になっている（やや難しい）。

カスタマイズ情報

Vaster2は国産のテンプレートということで、利用者が結構多いらしい。そのため「Vaster2 ＋ キーワード」で検索すると、カスタマイズの情報が結構引っかかる。

よって、ネット検索から ある程度の問題は解決できると思われる。