スマホサイト対応完了！はてなブログ公式目次のデザインカスタマイズ

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

先日公開したこちらの記事。

basanote.hatenablog.com

はてなブックマークの「webデザイン」カテゴリに（短い間でしたが）掲載されまして、そこそこいろんな方に読んでいただけたようです。ブックマークしてくださった皆さま、ありがとうございます。

はてなブックマークに掲載されるというのは目標の1つだったので予想よりも早く達成できてご満悦です。

需要はありそう

先のカスタマイズについて、ブログアドバイザーのポジ熊さんからこのようなお言葉をいただきました。

@_tsubasa123_ 全力で導入したい|дﾟ)

— ポジ熊@ブログアドバイザー (@poji_higuma) December 5, 2016

嬉しいですね、カスタマイズ冥利につきます。

で、せっかく導入したいと言っていただけましたので、こちらもスマホサイトに対応したいところなのですが、どうやらスマホのカスタマイズははてなブログProにしなければできないらしい。

つまりスマホサイトに対応したコードを作成しても私のブログでは確認することができない。困った。

目標の1つを達成したご褒美にはてなブログProを契約してもいいところなのですが、ダメもとでポジ熊さんに先行して試用をお願いできないかご相談。そしてなんと快諾！ありがとうございます、助かりました。

実装と設定

スマホサイトではこんな感じで表示されるようになります。スクショはポジ熊さんのサイトからお借りしました。

下記のCSSとJavaScriptをデザインのカスタマイズから設定していただければ、基本的にはコピペで動くようになっています。ただし、テーマによっては多少デザインが崩れる可能性がありますことをご了承ください。

また、非常に申し上げにくいですが、現時点（2016.12.07）では私がはてなブログのProに契約していませんので設定方法がわかりません。契約したらすぐに設定方法を追記します。

ですので、スマホサイトのカスタマイズのやり方をご存知の方は、下記のコードを利用してご自身のやり方で設定を行ってください。もしくは誰かやり方教えてください。

CSSの追記

<style type="text/css">
/* 目次見出し */
p.content-title {
    position: relative;
    text-align: center;
}
p.content-title span {
    position: relative;
    z-index: 2;
    display: inline-block;
    margin: 0 2.5em;
    padding: 0 1em;
    background-color: #fff;
    text-align: left;
}
p.content-title::before {
    position: absolute;
    top: 50%;
    z-index: 1;
    content: '';
    display: block;
    width: 100%;
    height: 1px;
    background-color: #ccc;
}

/* 目次デザイン */
.contents-level2 > a {
    padding-left: 30px !important;
}
.contents-level3 > a {
    padding-left: 60px !important;
}
.table-of-contents {
    display: block;
    margin: 0 0 2em 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;
}
</style>

JavaScriptの追記

<script>
(function($) {
// SPデザイン用の目次
(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);
    });
    $('.table-of-contents').before('<p class="content-title"><span>目次</span></p>');
})();
})(jQuery);
</script>

ちょっとした追加の設定

記事の中で小見出しを利用している場合、大見出しの横に「+」ボタンが表示され、そちらをクリックするとスライドして小見出しが表示されるようになっていますが、この「+」ボタンの大きさをどうしようかと迷いました。

大きすぎるとややデザイン性を損なうように感じる半面、小さすぎると今度は押しにくくなりユーザビリティを損なってしまいます。せっかくユーザビリティを高めるために行ったカスタマイズなのにこれでは本末転倒です。

上記のソースコードではそれなりにいい感じじゃないかな、と私が判断したサイズにしてありますが、お好みで変更してご利用ください。

font-size: 200%;この部分を変更することでボタンのサイズが変わります。サイズ変更により大きくすると下の隙間が小さくなりますので、top: 15px;この部分を小さくしてください。小さくした分だけ、ボタンが上に移動します。0にすると上にぴったりくっつきます。

さいごに

はれて公式目次デザインカスタマイズのスマホ対応バージョンが完成しました。ブログはスマホから閲覧される機会が多い媒体ですのでユーザビリティは下げたくないところです。簡単に導入できますのでぜひともご利用くださいませ。

さいごになりますが、動作検証にご協力いただいたポジ熊さん、ありがとうございました。その他のカスタマイズについてもまた相談させていただきますのでよろしくお願いします。

ではでは、最後までお付き合いいただきありがとうございました。