Blogを長く運営していると結構気になってくるのが、月別アーカイブが縦に長くなっていくことです。2カラムのテンプレートだと本文(メインカラム)よりサイドバーが長くなっているのをよく見ますし、3カラムでも長すぎると邪魔になってきます。さらに問題なのがカテゴリと違い意図的に増減することはできず、長くBlogを続ければ続けるほど項目が増えることでしょう。(カテゴリは自分で増やさない限り増えないので。)
この問題を解決する方法としては、一般的に月別アーカイブをForm形式のプルダウンにする方法がとられます。
しかしこれらの方法には弱点もあります。前者はJavaScriptがONでないと機能しませんし、後者はFC2ブログ以外では使えません。さらにプルダウン方式を使うとHTMLの「リンク」にならないため、内部リンクが減り検索エンジンのクローラが過去記事へたどり着きにくくなる可能性があります。
というわけで、今回はJavaScriptもプルダウンも使わず、CSSだけでFC2ブログの月別アーカイブをコンパクトに表示する方法を紹介します。
CSSで月別アーカイブをスクロールさせる
概要
月別アーカイブにclassを割り当ててCSSで装飾します。表示させる高さを任意で設定し、残りはスクロールさせて見栄えだけを変更します。HTML自体は何も変わりません。
ソース
管理ページから「プラグインの設定」を選択し、「月別アーカイブ」の「HTMLの編集」から以下のソースをそのまま上書きします。(「archive-date」というclassを割り当てているだけなので、わかる方はそれだけ追加すればいいです。)
<ul class="archive-date">
<!--archive-->
<li &align>
<a href="<%archive_link>" title="<%archive_year>年<%archive_month>月"><%archive_year>年<%archive_month>月 （<%archive_count>）</a>
</li>
<!--/archive-->
</ul>次に「テンプレートの編集」からスタイルシートに以下のソースを追加します。
.archive-date {
height: 70px;
overflow: auto;
}青文字の部分の数値を増減させることによって、標準で表示される高さを変更することができます。自分が適切だと思う数値に変更してください。成功すればこのBlogの月別アーカイブのようにスクロールバーが表示されて、設定した高さを超える部分が隠れるはずです。
注意点
動作確認はIE6、IE7、Firefox2、Opera9でおこなっています。それ以外のブラウザではもしかしたら正常に表示されないかもしれません。また、単純に「使いやすさ」という点ではプルダウンやそのままの状態の方が勝っていると思います。このカスタマイズはあくまで表示をコンパクトにすることが目的です。「使いにくい」と思ったら別の方法を試した方がいいかもしれません。
この記事へのコメント
コメント機能を利用するにはログインする必要があります。「Disqus」または「Twitter」「Google」「Facebook」などのアカウントが使用できます。