つばさのーと

つばさの日常を綴るのーと

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

f:id:tsubasa123:20161129115553j:plain

 

こんにちは、つばさ(@tsubasa123)です。

 

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

 

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

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

basanote.hatenablog.com

 

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

 

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

 

www.yukihy.com

 

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

 

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

 

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

 

www.north-geek.com

 

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

 

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

 

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

 

f:id:tsubasa123:20161203164211j:plain

 

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

 

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

 

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

 

できあがりはこちら

 

f:id:tsubasa123:20161203164755j:plain

 

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

 

f:id:tsubasa123:20161203164936j:plain

 

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

 

すべてはチェックできていませんが、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]-->

 

これをコードの先頭に追加していただければOKです。

 

また、アーカイブページなどでも目次を利用する人は記事ではなく、フッタに入れてください。

注意点

 

やってもよかったんですが敢えてやらなかったこととして、ブラウザのサイズを大きくしたり小さくしたりすると正常に動作しなくなってしまいます。普通そんなことしないよねって考えです。

 

メニューが消えたり、アイコンが出なかったり、アコーディオンごと隠れたりと不思議な動きをしますが、現状はそのような仕様として公開することにしました。reiszeイベント扱いにくい。

 

もしご要望がありましたら将来的に修正も検討していきますのでご連絡ください。

 

課題

 

目次に番号を振る機能が未実装なんですよね。子要素だとわからせるためにインデントさせているので、ディスプレイの横幅との兼ね合いもあって番号は省略しましたが、あったほうがいいのだろうか。UIを考えるって難しいです。

 

さいごに

 

オリジナルカスタマイズとしてはこれが1作目になりました。まぁ、そんな手の込んだことしているわけではないですが、そこそこ満足です。自分用にもう少し作りこもうかな。

 

次のカスタマイズは何にしようか。また考えます。

 

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

 

関連記事

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

はてなブログ開設10日、参考にしたカスタマイズとかこれからやりたいカスタマイズまとめ(初~中級者向け)