当ブログは「Bloggerのカスタマイズに関する情報」と「Vaster2のカスタマイズ情報」の二本柱で運営していたが、現在は「Vaster2」のダウンロードができなくなってしまっているので、今は実質 一つしかコンテンツがないようなものである。そのため、新たなコンテンツとして「Tokyo」という国産のテンプレートのカスタマイズ情報を発信しようと思った。

この「Tokyo」は見た目が「Vaster2」に近く、最初から関連記事やSNSボタンも付いている。また、紹介ページを見る限り カスタマイズに関する規制なんかもないようなので、その気になれば自分好みのテンプレートとして、上手くデザインすることができると思う。

なので、本記事では とりあえず「Tokyo」の導入方法なんかを簡単に説明しておく。


テンプレート「Tokyo」について


テンプレート「Tokyo」の雰囲気

「Tokyo」は無料配布されている数少ない日本語対応のテンプレートの一つで、最初からSEO対策やレスポンシブデザインが実装されており、テーマデザイナーにも対応済、かつCSSもわかりやすくまとめられている。なお「Tokyo」の主な特徴は以下の通り。

・レスポンシブデザイン
・関連記事表示機能搭載
・テンプレートデザイナー対応
・シンプルな2カラムデザイン
・SEO対策済
・パンくずリストの実装
・ついてくるサイドバー搭載
・SNSボタンの実装（3種）

ダウンロードについて


下記のリンク先からテンプレートをダウンロードすることができる。導入方法や初期設定なんかも配布ページで丁寧に説明されているので、初心者でも簡単に適用することができると思う。

・配布元ページ：ラムネグ

個人的にやっておきたいと思った初期設定


「Tokyo」の配布ページには初期設定についても説明されているが、導入してみて個人的に補足しておきたい部分もあるので、その辺を含めて下記にまとめておきたいと思う。

テーマ


モバイルテーマを「いいえ」にする

「Blogger管理画面」 → 「テーマ」 → 「モバイル」 → 「いいえ」という作業を行う。

この作業をすることで「Tokyo」自体のレスポンシブデザインを使うことができる。

レイアウト


Navbarを削除する

「レイアウト」 → 「Navbar」 → 「削除」という作業を行う。

これをすることでブログ全体のレイアウトがスッキリする。

ブログの投稿の設定で「投稿ページのオプション」のチェックをすべてはずす

「レイアウト」 → 「ブログの投稿」 → 「投稿ページのオプションのチェックをはずす」という作業を行う。

これをしておかないと記事ページのレイアウトが崩れてしまう。

フッターのコンテンツを削除する

フッターには「プロフィール」「Facebook」「メールフォーム」などが最初から設定されている。

不要ならばすべて外しておいても良いと思われる。

CSSについて


「Tokyo」のxmlを見るとCSSがカテゴリ別にまとめられている。なので、CSSの知識がある人ならばすぐにでもカスタマイズを始められると思う。しかし、いかんせん英語でコメントアウトされているので分かりづらい。

そこで、自分なりに訳して下記の表にまとめておいた。


項目意味
globalブログ全体
headerヘッダー
navigationメニューバー
mainメインページ（ヘッダーとフッターの間）
main-contentメインコンテンツ（ページ左部）
listトップページの記事リスト
sub-contentサブコンテンツ（ページ右部）
widgetウィジェット
footerフッター
footer-creditフッター下のクレジット部分
single-header記事ページのヘッダー（記事タイトル部分）
single-footer記事ページのフッター
nextprevページャー（前の記事・次の記事）
breadcrumbパンくずリスト
mrp-post関連記事
single記事ページ全体

備考


ラムネグさんでは「Tokyo」の他にも様々なテンプレートが公開されているので、ここで紹介しておこうと思う。

・Kyoto：Tokyoのチェック柄バージョン
・ToyPoodle：フォトギャラリー風のテンプレート
・QOoQ：シンプルでスタイリッシュなデザインのテンプレート、記事中アドセンス対応（2種あり）