これはテーマというよりカスタマイズというべきかと思いますが、ブログ内の見通しを良くするために、カテゴリーをメニューバー化して、タイトル下に表示してみようと思います。
ソースからカテゴリーの HTML をタイトル下にコピペすれば済むのですが、せっかくですので Javascript で自動化してみましょう。
で、出来たコードがこちら。このコードを「サイドバー」→「モジュール追加」→「HTML」のテキストエリアに入れて、位置をカテゴリーよりも下に置きます。
<script>
var categories = document.querySelectorAll(‘.hatena-module-category li’);
var target = document.getElementById(‘menubar’);
if ( categories.length && target ) {
var menubar = document.createElement(‘ul’);
var home = document.createElement(‘li’);
home.innerHTML = ‘<a href=”自分のurl” title=”ホーム”>ホーム</a>’;
menubar.appendChild(home);
for (var i=0,len=categories.length; i<len; ++i) {
var category = categories[i].cloneNode(true);
category.innerHTML = category.innerHTML.replace(/\s\([0-9]{1,}\)/g, ”);
menubar.appendChild(category);
}
var about = document.createElement(‘li’);
about.innerHTML = ‘<a href=”http://自分のurl/about” title=”About”>About</a>’;
menubar.appendChild(about);
target.appendChild(menubar);
}
</script>
次に、「ヘッダ」→「タイトル下」のテキストエリアに次のコードを入れます。
<div id=”menubar”></div>
これで、下のようにタイトル下にカテゴリーが複製されますので、後は css で好きなように見た目を変えるだけです。
このサンプルでは、ホームとプロフィールを足していますが、なくてもいいですし、必要なら他のリンクを足すことも出来ます。
参考までに次の css を追加しますと、項目が横並びになります。
#menubar ul {
list-style: none;
padding: 0;
margin: 0;
display: block;
}
#menubar ul li {
display: inline-block;
}
#menubar ul li a {
text-decoration: none;
padding: 0 15px;
letter-spacing: 2px;
}
さほど重くなった印象はありませんが、HTML を手打ちした方がいいかも知れませんね。