ということでテンプレートのカスタマイズが非常に自由度が高く、テンプレートタグがMovable Typeにもの凄く似ているライブドアブログを使い始めてから10年が経ちました。
管理画面でブログを始めた日を見てみると、2004年 3月28日からとなっています（それ以前の日付のエントリーは日付を操作したのだと思う）。
そんなつきあいの長いライブドアブログですが、なんだかんだでライブドアブログで用意されたテンプレートを自分なりに修正して使用してきました。今まで自分の力で最初からテンプレートを作ったことがなかったのです。
最近はBootstrapで会社のページを作ることが多く、だんだん慣れてきたので、練習がてらライブドアブログもBootstrapで作ってみるか！と突然思って作ってみました。
画像出典：Bootstrap
ただ単にBootstrapでライブドアブログのテンプレートデザインを作るのも芸が無いので、bootmetroというWindows 8のModern UIっぽいCSSやウェブフォントを利用して作成してみました。
画像出典：bootmetro
できあがったページデザインはこんな感じです。（スクリーンショットは個別記事のデザイン）
パーツを紹介します。
●ヘッダー部分について（全ページ共通）
まずはヘッダー。
これはBootstrap標準のNavbarを使用しています。 http://getbootstrap.com/components/#navbar
Navbarのclassに「.navbar-fixed-top」を付けることでページの上部に固定して常にヘッダーを表示することができます。
今回Navbarにはサイト名・ブログトップへのリンク・ブログ著者について・メッセージ送信・ピックアップ・RSS・サイト検索を付けました。
ブログ著者については「誰が書いているのか・どんな人が書いているのか」がブログを読む時に重要に感じてきたので付けています。Googleが著者情報を重要視しているのでそういう意識もあります。
メッセージはブログの読者・訪問者がメールを送信したい時に使います。具体的にはフッターのフォームからメッセージを送信するというものです。「メッセージ」をクリックすると、フッターまでするするーとスクロールしていきます。
ピックアップのドロップダウンメニューはBootstrap標準のDropdownを利用。 http://getbootstrap.com/javascript/#dropdowns
ドロップダウンさせたいタグに「.dropdown」のclassを付けて、中身のタグ部分に「.dropdown-menu」のclassを付けるだけで簡単にできます。
RSSは今までheadタグの中に書くだけで、前面に出してこなかったのですが、私が最近またRSSリーダーをガンガン使うようになったのでRSSのリンクの必要性を感じて設置しました。
サイト内検索は現在1200件以上のブログ記事がこのブログに掲載されています。探しきれないのでサイト内検索を導入してみました。
●フッター部分について（全ページ共通）
フッター部分はヘッダーと同じカラーにして統一感を出しています。
内容はブログ著者について・ブログシステムについて・タグクラウド・ギャラリー・メッセージフォームです。
フッター部分にはブログ著者の説明へのリンクなどを掲載しています。
タグクラウド・ギャラリーはライブドアブログのブログパーツの機能を使用しています。
タグクラウドは最近は流行っていませんが、パッと見ただけで著者の関心事項が分かって頂けると思うので設置してあります。
ギャラリーは画像というビジュアルからブログ記事を読んでみようと思う方が少なからずいるようなので、設置してみました。このギャラリーの機能は設定に合わせてbrタグが入ってしまうので、CSSにて「br{display:none;}」を設定して、brタグを無効にしています。
メッセージフォームもライブドアブログのブログパーツのHTMLを使用しています。
●ブログ記事の上部について
ブログ記事の上部は、パンくずリスト・ページタイトル・公開日時・カテゴリー・ソーシャルメディアボタンやウェブサービスのボタン・概要が掲載されています。
パンくずリストのフォーマットはBootstrap標準のBreadcrumbsです。 http://getbootstrap.com/components/#breadcrumbs
liタグで続けて書くだけで「/」の区切り線が入ります。便利です。
公開日時については、記事がいつ書かれたのかは重要ですので、上部に配置しています。
カテゴリーの配置は「More Access! More Fun! | 永江一石のITマーケティング日記」を参考にして作成しました。
ソーシャルメディアボタンはブログには必須のボタンですが、あちこちのサービスから情報を取ってくるので、描画をできるだけ遅らせて、ブログ閲覧の快適さをなるべく損なわないようにしています。また、Readabilityのボタンも設置しました。私のブログ記事は長めになる傾向があるので、「READ NOW」をクリックすると読みやすい形式に変換され、便利だと思ったからです。
概要をここに配置したのは「SEO Japan」のブログ記事は最初に概要が掲載されており、内容を大雑把に把握する時に便利だと感じたからです。装飾はBootstrap標準のWellです。 http://getbootstrap.com/components/#wells
●ブログ記事下部について
ブログ記事の終わりには同じカテゴリーの記事の一覧とブログ著者へのリンクを掲載しています。
最近ブログ記事の最後に著者紹介が入っている場合があるので、それの真似です（笑）。
●ブログのトップページの上部について
ブログのトップページの上部にはサイト名とサイト概要を記載しています。
これはBootstrapのJumbotronを使用しています。 http://getbootstrap.com/components/#jumbotron
カラーはWindows 8らしい明るいブルーにしてあります。
●サイト内検索について
サイト内検索はbootmetroに付いているWindows 8のチャーム（charm）を模した表示方法で、横からするすると検索フォームが表示されます。
Windows 8を使っていないと表示動作の意味が分からないでしょう。
サイト内検索はGoogleカスタム検索エンジンを使用。 https://www.google.co.jp/cse/all
無料で使えるので便利です。
●その他の部分
Windows 8ライクのデザインにしたかったので極力角丸はなくしました。
画像拡大のlightboxにはprettyPhotoを使用していますが、こちらのテーマを書き換えて直線的なデザインに変更しました。 http://www.no-margin-for-errors.com/projects/prettyphoto-jquery-lightbox-clone/
最初は本文などがあるエリアの周りも白だったのですが、どこまでがコンテンツなのかが分かりづらかったり、変な開放感があったのでコンテンツ外の部分にグレーっぽいカラーを入れました。
サイドバーにあるカテゴリー一覧についてですが、以前はプルダウンメニューにて書いたカテゴリーを閲覧することができましたが、私が全体像を把握しづらいため、展開したHTMLでの表示に切り替えました。これにより、どの分野に多く記事を書いているのかがわかりやすくなりました。
Bootstrapを使用してライブドアブログのテンプレートデザインを作ってみたブログの解説は以上です。
Bootstrapらしい使い方はあまりしていませんが、何もない状態から作り上げるのと、ある程度の品質で作り込まれているフレームワークを使用して作り上げるのでは、作業性が全く違います。
もし、少しでもBootstrapに関心を持ったとしたら、何かしらのサイトで使ってみることをお薦めします。
カスタマイズせず、素のママでも品質はかなり高いです。やりたいことの機能が結構入っているので、自分で調べたり作ったりする必要がなくなり、楽に作れるでしょう。
ぜひ一度、このパワフルなフレームワークを体験してみて下さい。
それでは、よいブログライフを。