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

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

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


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

120327-1

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

120327-2

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

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

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

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

2016/10/14追記

プラグインは外して、自作の関数で実装する方法に切り替えました。

更にコンパクトにしたい

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

chrome

120327-3

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

IE

120327-4

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

FireFox

120327-5

何もしていないですが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

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

公開日:2012/03/27
更新日:2016/10/14

1件のピンバック

  1. […] Compact Archivesの使い方:合理的なアーカイブリストを作るwordpressプラグイン「Compact Archives」 Compact Archivesとwebkit-scrollbarを使ってアーカイブをカスタマイズする […]


コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

コメントは承認制ですので、反映までしばらくお待ち下さい。(稀にスパムの誤判定にて届かないこともあるようですので、必要な際はお問い合わせからお願い致します。)