Compact Archivesとwebkit-scrollbarを使ってアーカイブをカスタマイズする

アーカイブって場所を取りがちですよね。プルダウンにするとか、ボックスにしてスクロールバーを出すとかいろいろ方法はあると思うのですが、プラグインを使って自分好みのアーカイブにしてみました。

WordPressデフォルトのウィジェットだと…

ぎゃー！とてもじゃないけどこれがずらっと並ぶのは耐えられない。

プルダウン式にしてみると、場所はとらなくなりますがぱっとしない。ボックスの見た目変えたり、jQuery使ったりすればもっと可愛くなるとは思いますが、個人的に○年○月が下にずらーっと並ぶのがあまり好みでないんですよね。。

Compact Archivesでコンパクトなアーカイブに

長くなりがちなアーカイブをその名の通りすっきりコンパクトに作成してくれるのがCompact Archivesです。

リンク先を参照して頂ければ分かりますが、2012: Jan～Decのように1行で1年分のアーカイブ。数字表記も可能です。

更にコンパクトにしたい

もう上記のプラグインで十分なのですが、サイトリニューアル前はあんまり記事もないし、3年分くらいファーストビューで見えていればいいんじゃないかなーと思うので、ボックスを使ってスクロールバーを出すことにしました。私はchromeを使っているんですが、WebKitを使ったスクロールバーがとっても可愛くて、使ってみることにしました！

chrome

こういうスクロールバー、憧れてました。

IE

IEではこんな感じに見えるようにしてみました。うっすら灰色。

FireFox

何もしていないですがFireFoxだとこんな風に見えますね。このままでも悪くないのでOKで！

実装

Compact Archivesを有効化

上記のリンクからDL&インストールして、有効化して下さい。

footer.php

<h3>アーカイブ</h3>
<div id="ArchivesArea">
    <?php compact_archive($style='numeric', $before='<ul>', $after='</ul>'); ?>
</div><!-- /#ArchivesArea -->

もちろんフッターじゃなくてもOKですよ。

私は今回、直接テーマに埋め込んでしまいましたが、ウィジェットをご使用の場合はウィジェット内でPHPが使えるようになるプラグインが別途必要となるみたいです。

CSS

#ArchivesArea{
	width:270px;
	height:40px;
	font-size:80%;
	line-height:1.3;
	overflow:auto;
	scrollbar-arrow-color:#CCCCCC; /*IE用*/
	scrollbar-3dlight-color:#F6F6F6;
	scrollbar-darkshadow-color:#F6F6F6;
	scrollbar-highlight-color:#F6F6F6;
	scrollbar-face-color:#F6F6F6;
	scrollbar-track-color:#F6F6F6;
	scrollbar-shadow-color:#F6F6F6; /*IE用ここまで*/
	}

/*ここからchrome用*/
#ArchivesArea::-webkit-scrollbar {
	width: 12px;
	}
#ArchivesArea::-webkit-scrollbar-track {
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); /*余白シャドウ*/
	border-radius: 10px;
	}
#ArchivesArea::-webkit-scrollbar-thumb {
	border-radius: 10px;
	background: rgba(159,188,196,0.8); /*スクロールバー色*/
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); /*シャドウ*/
	}

WebKitを使ってスクロールバーをカスタマイズ -DigitalSkill

こちらのサイトを参考にさせて頂きました！