人生RPG

2児のパパで今年30歳の冒険者(サラリーマン)が日々の生活を通して勇者(自由を手に入れた者)を目指すサクセスブログです。

人生RPG

『目次』をカスタム!【表示】【隠す】機能を追加する方法

SPONSORED LINK

こんにちは!冒険者Lv.1です☆
ブログのデザインは自分でもカスタマイズできますが、みなさん何を基準にカスタムしていますか?
私は「自分の好きなデザイン」っていうのももちろんありますが、「読者に優しいデザイン」の方が優先度が高いです。
今回は読者、特にスマホから訪問していただいている方にやさしい目次のカスタマイズ【表示】【隠す】機能についてカスタマイズの紹介をしたいと思います。

目次について

はてなブログの記事作成機能では元々から目次を簡単に作れるようになっていますが、みなさんは使っていますか?
「目次は付けた方がいい」「目次は付けない方がいい」賛否両論ありますが、記事内容・ジャンルで変わりますよね。どっちが正しいとかはないと思います。
私は1記事最低でも3000文字を超えるように書いているのと、内容からして付ける派です。

目次のメリット

・記事タイトル・見出し・流れの統一感を見ることができ、作成者側にも優しい
・目次内容で記事全体のだいたいの内容が分かるので、求めている情報があるかすぐ確認できる
・Google(SEO)としても役立つ
・読みたい部分にすぐ飛べる(スクロールする手間が省略できる)
・出来るサイトって感じがする(個人的なイメージ)

目次のデメリット

・目次だけで記事内容を把握できるので、求めている記事じゃないと分かればすぐサイトから去ってしまう
・スマホだと目次だけで画面いっぱいになる場合もあるので、スクロールの手間が増える

こんな感じかな。

デメリットの最後、「スマホ画面いっぱいの目次」を解決するために
目次を最初は隠しておいて、【表示】ボタンをクリックすると目次内容が出てくるシステムにしたら目次を設置してもコンパクトにまとめることが出来ます。

デザイン

最初に表示されるのはこんな感じ

「目次 【表示】」だけなので幅もとらず、シンプルです。


【表示】ボタンをクリック(タップ)すると

下側に見出しが表示されて記事内容が分かります。
【隠す】ボタンをクリック(タップ)すると、またシンプル表示に戻ります。

参考にした記事

www.yukihy.com

私 お馴染みのゆきひーさんです。
ゆきひーさんの「カスタム実装図」は動画式で、どこがどう変化するのが一目瞭然ですごい分かりやすいです。
今回もお世話になっています。ありがとうございます。

設定方法

はてなブログサービスの無料版ユーザーでも行えるので安心してください。

手順①

こちらのコードをコピペ(コピー<複製>&ペースト<貼り付け>)します。

<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script>
//クリックすると表示される目次
$(function(){
    var $Contents = $(".table-of-contents")
    $($Contents).before('<span style="font-size: 150%; color: #333;">目次</span><p class="show-area">[表示]</p>');
    $(".show-area").click(function(){
        var $this = $(this);
        if($Contents.css('display') == 'none'){
            $Contents.slideDown(400),
            $this.text("[隠す]");
        }else{
            $Contents.slideUp(400),
            $this.text("[表示]")
        };
    });
});
</script>

ダッシュボード(管理画面)
  ↓
デザイン
  ↓
カスタマイズ(スパナマーク)
  ↓
フッタを選択します。
HTMLを記述する枠に貼り付けしてください。

手順②

次に調整です。
こちらのコードをコピペ(コピー<複製>&ペースト<貼り付け>)します。

.table-of-contents{
    display: none;
}
.show-area{
    display: inline-block;
    padding: 10px;
    border-radius: 5px;
    cursor: pointer;
    margin-bottom: 0;
    color: blue;
}

カスタマイズの一番下に[デザインCSS]を記述する枠があるので、そこに貼り付けてください。

以上で完了です。
上部の「変更を保存する」をクリックして終わりです。

まとめ

目次は、訪問者のための機能と記事作成者のための機能でもあります。
文章を各初心者は記事を書いている途中で話が脱線したり、なにが言いたいか分からなくなる時があります。
目次を設置することで記事内容の流れをしっかり把握してまとまりある作品にすることができます。

また、スマホの小さい画面でも邪魔にならないようにすることで読者にやさしいサイトデザインになるので、この表示システムを勧めます。