ライブドアブログ:ブログパーツをフッターエリアに横並びにする方法


ブログデザインをマイナーチェンジしてみました。
今使っているテンプレートは公式の「Author’s Store [Black]」をカスタマイズしたもの。

もともと「Author’s Store [Black]」は3カラムのデザインなんですが、左サイドバーを外して2カラムにしています。

で、今回のカスタマイズでは、本来の左サイドバー部分に表示されるはずだったブログパーツ(デザイン設定では「ブログパーツA」で表示されるもの)をフッターエリアに表示できるようにし、それぞれのパーツが横並びになるようにしてみました。

ライブドアブログのテンプレートって、デフォルトでフッターエリアを活用しやすくなっているものがわりと少ないんですよね。
しかしサイドバー部分に表示するはずのブログパーツをそのままフッターに持ってこれるとなればいろいろと便利です。本文よりサイドバー部分のほうが延々と長いという事態も避けられます。

livedoor Blog 開発日誌(公式)のこのページが参考になるかと思います。

【完了報告】ブログパーツのHTMLソースを変更いたしました(デザインカスタマイズ用) : ライブドアブログ スタッフブログ
2009/5/28 20:45 追記しました。 もっと分かりやすくするため、「新ソースを使ってカスタマイズしたサンプルブログ」の箇所を編集いたしました。 いつもlivedoor Blogをご利用いただきありがとうございます。 制作担当の石野...

上のページではパーツを横並びさせる方法がさらっとしか書かれてないのだけど、要はブラウザのソース表示などでブログパーツのdiv class名を確認し(リンク集なら「plugin-link」、フリーエリアなら「plugin-memo」といった具合)、デザイン設定のcssのところでそれぞれfloat:left;を入れて書き加えていけばOKです。

ちなみにわたしの場合には、

【css】

#blog-footer {
color:#c1c1ff;
margin:0 auto;
width:930px;
}

#blog-footer .plugin-memo {
width:310px;
float:left;
margin-right:25px;
padding-top:0 !important;
}

#blog-footer .plugin-link {
width:270px;
float:left;
margin-right:3px;
padding-top:5px !important;
}

・・・
・・・

【html(トップページ、カテゴリアーカイブ、月別アーカイブ)】

<footer id="blog-footer">
<$PluginList_A$>
</footer>

といった感じにしています。
上記cssの最初に書いていますが、フッターエリアの幅はあらかじめ決めておく必要があります。で、marginを使ってセンタリングします。

このタイプのカスタマイズは実は初めてやったので勉強になりました。
当初こうしようと思ってこの「Author’s Store [Black]」テンプレートを選んだわけじゃなかったので、実は本文が短いページでは少々デザイン的にイマイチになってしまって、そこが若干不満……。
策を弄さず「デジタルネイティブ」の方をベースにしておけばよかったかなぁ?

タイトルとURLをコピーしました