レスポンシブデザイン向け、はてなブログ公式目次のデザインカスタマイズ

こんにちは、つばさ（@tsubasa123）です。

今日もちょっとしたカスタマイズネタです。

レスポンシブデザイン向けにカスタマイズしましたが、スマホサイトでももしかしたら応用できるのかもしれません。~~プロ契約したら改めて調べる予定です。~~

【2016.12.07追記】
スマホサイト対応バージョンも作成しました。よろしければこちらもどうぞ。

basanote.hatenablog.com

目次のカスタマイズ例があまり見当たらない
便利だけどちょっと押しにくい
できあがりはこちら
導入方法
注意点
課題
さいごに
関連記事

目次のカスタマイズ例があまり見当たらない

当ブログでも使わせていただいていますが、

www.yukihy.com

このカスタマイズは割と有名なようで、いろんなブログで導入されているのを見かけます。背景色の設定とリストを番号にするカスタマイズ。あと細かい調整なんかもセンスを感じます。

反対に、色とリストスタイルの変更以外のカスタマイズってあまり見かけなかったんですよね。まぁ目次装飾してもあまり意味がないので誰もやっていなのかもしれませんが。

でも目次ってページの上のほうにあるし、使われているかどうかは別として割と目立つものだと思います。ちょっとはオシャレに気を使ってもいい場所なんじゃないかなと思います。

www.north-geek.com

今回のカスタマイズの趣旨とは少し違いますが、目次の重要性について書かれています。アクセシビリティの観点までは考えていませんでした。勉強になります。

便利だけどちょっと押しにくい

公式目次機能、便利なんですけどレスポンシブデザインでブログを運用している場合、ちょっと押しにくいんですよね。

このようにリンクがかなり小さな文字になってしまいます。女性やお子様のように指が細い方ならいいのかもしれませんが、男性だとこれは使いにくいんじゃないかと思います。

ピンチアウトすればいいじゃん、って話なのかもしれませんがそのひと手間がめんどくさかったりしませんか？電車で立ちながら片手でスマホ操作している人のように、そもそもピンチアウトできない状況も考えられます。

ですので今回は押しやすさを重視して、アコーディオンメニューとして表示できるようにカスタマイズを行ってみました。

できあがりはこちら

いかがでしょうか。まだデザインに調整の余地はありますが大枠として機能は完成しました。

見出しタイトルの右側にある「+」をクリック（タップ）すると小見出しがスライドして表示されるようになっています。

すべてはチェックできていませんが、h2～h4くらいまでは動作確認済みです。jQueryとWEBフォントアイコンを利用しています。

導入方法

下記のコードをそれぞれ「設定」と「カスタマイズ」から追記していただければ動作します。ブレイクポイントのサイズ（下記コードで768になっているところ）は各テーマの設定に合わせて修正してください。

設定 > 詳細設定 > 検索エンジン最適化 > headに要素を追加

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">

WEBフォント読み込み用のCSSの指定です。すでに他のカスタマイズで利用されている場合はこの指定は必要ありません。

デザイン > カスタマイズ > デザインCSS

@media (max-width: 768px) {
.contents-level2 > a {
padding-left: 30px !important;
}
.contents-level3 > a {
padding-left: 60px !important;
}
ul.table-of-contents {
display: block;;
margin: 0 !important;
padding: 0 !important;
border-top: 1px solid #dfdfdf;
border-left: 1px solid #dfdfdf;
border-right: 1px solid #dfdfdf;
}
.table-of-contents li {
list-style: none;
position: relative;
}
.table-of-contents ul {
padding: 0;
margin: 0;
font-size: 96%;
}
.table-of-contents li > a {
padding: 20px 10px 20px 10px;
width: 100%;
display: inline-block;
box-sizing: border-box;
border-bottom: 1px solid #dfdfdf;
}
.table-of-contents li > span {
position: absolute;
right: 15px;
top: 15px;
z-index: 999;
cursor: pointer;
}
.table-of-contents li > span.plus::before {
font-size: 200%;
font-family: 'FontAwesome';
content: '\f0fe';
}
.table-of-contents li > span.minus::before {
font-size: 200%;
font-family: 'FontAwesome';
content: '\f146';
}
.table-of-contents li > span i {
font-size: 200%;
padding: 8px;
}
.table-of-contents ul {
display: none;
}
}

デザインについては「Naked」というテーマに合わせていますので、その他のテーマをご利用の方はCSSでご調整ください。

また、先ほど追加したWEBフォント読み込み用のCSSのバージョンによっては疑似要素（\f0feと\f146）の部分の指定が変わる可能性がありますので、他のアイコンが出たら確認してみてください。

デザイン > カスタマイズ > 記事 > 記事の下

<script>
(function($) {
var initTableOfContents = function () {
$(document).on('click', '.table-of-contents span', function() {
if ($(this).parent().find('> ul').is(':visible')) {
$(this).parent().find('> ul').slideUp();
$(this).removeClass('minus').addClass('plus');
} else {
$(this).parent().find('> ul').slideDown();
$(this).removeClass('plus').addClass('minus');
}
});
$('.table-of-contents li').each(function() {
if ($(this).find('> ul').length) {
$(this).append('<span class="plus"></span>');
}
$(this).addClass('contents-level' + $(this).parents('ul').length);
});
};
if ($(window).width() <= 768) {
initTableOfContents();
};
})(jQuery);
</script>

jQueryを利用していますので必要な方はそちらの読み込みも記述してください。具体的には、

<!--[if lt IE 9]>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.12.3.min.js"></script>
<![endif]-->
<!--[if gte IE 9]><!-->
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.2.3.min.js"></script>
<!--<![endif]-->