blogの外観を弄る エントリーアーカイブ編

写真と記事を投稿するだけでWebページとしての体裁が整ってくれる「blog」は手間いらずで非常に便利。自前のWebサイトも別に持っているのですが，新たなネタをアップロードするとなると，部品の作成やらHTMLの追加修正やらと作業が非常に面倒になります。特定のネタに特化したページを作るのであればWebサイトでも良いのですが，日記のように頻繁に更新が入るようなページの場合は，様々な企業から提供されている「blogサービス」を利用するのが簡単です。この「MC68000 Maniacs!」も2004年から「gooブログ」を使用して開始し，既に8年間も経過してしまいました。ブログ開始当初は無料のサービスを利用して「とりあえず」始めたような感じでした。「gooブログ」は無料版でもそこそこ使える機能が提供されるので不自由は特にありませんでしたが，慣れてきたらだんだん「ブログの外観」をカスタマイズしたくなってきました・・・。「gooブログ」の場合は「アドバンス」という有料パッケージを契約すればブログの外観変更が可能になるので，現在は「アドバンス」を契約して利用しています。（月額200円のサービスです）

なんだか「goo」の回し者のような記事になってきましたね（笑）。
回し者ではありません。ちがいます。(≧∇≦)

外観を弄るといっても，全体的なイメージは「提供されているテンプレート」から適当なものを選んで決めています。カスタマイズしているのは，本当に細かいところばかりです。例えば，ブログタイトルの下に「リンクバナー」を追加している部分はテンプレートのHTMLを直接編集していますし，ブログ本文の右側のエリア（CONFIGの下側）についても，テンプレートのHTMLを編集して「勝手な広告エリア」に作り変えてしまいました（笑）。特定のブラウザで「文字が小さくて見辛い」とコメントを頂いた際は，テンプレートのCSSを変更して文字サイズを調整したりもしました。その他では，プロフィール欄に「TwitterのID」を追加したり，QRコードを表示したり，「RSS2.0」のアイコンを追加したり・・・。弄り始めるときりがありませんね・・・（汗）。今日やったのは「ENTRY ARCHIVE」部分のエリアを縮小してスクロールバーを付けたこと。2004年5月～2011年6月までのエントリーがズラッと並んでいて見辛くなっていたので，1年分（12件）だけ表示して，以降はスクロールで閲覧できるようにしました。以下にやり方を載せておきます。

まず，テンプレートCSSに「.menuBgz」クラスを追加。
直前の「.menuBg」をコピーして，overflowとheightを追記しただけです。
heightの値は，スクロールエリアの「縦サイズ」になります。
画面を見ながら目分量で合わせました。

/* 左メニューのリスト背景 */
.menuBg {
padding: 2px;
width: 180px;
text-align: center;
}

.menuBgz {
padding: 2px;
width: 180px;
text-align: center;
overflow: auto;
height: 195px;
}

あとは，テンプレートHTMLの修正ですね。
「ARCHIVE LIST MODULE」に適用されているクラス名称を「menuBgz」に書き換えました。
これだけの変更でリストのスクロール化ができます。

＜div class="menuBar"＞ENTRY ARCHIVE＜/div＞
＜div class="menuBgz"＞
＜!-- ARCHIVE LIST MODULE --＞
＜{$archive_list}＞
＜/div＞

使っているテンプレートは「カスタムブルー」です。