はい！こんにちは！
今回のテーマは
『プラグインを使わずに目次を設置する方法』
です。
「目次？いらんやろ。」という方もいるとは思いますが、1度目を通してみて下さい。
具体的手順は３つ！とても簡単です。
目次を作るメリット
考えられるメリットは２つあります。
- ユーザーの利便性を上げる。
- 目次を作ることによって自分の文章能力が把握できる。
という事です。
ユーザーの利便性を上げる
という事を考えてみましょう。
例えばあなたが何かを検索した時に、
３０００字ある記事の２０００字目くらいにあなたの知りたい情報があったとしたら、あなたはそこまでずっと読みますか？というか読めますか？
読んでいて疲れてしまいますね。疲れるサイトにもう一度来たいと思わないですよね。検索エンジンからくる→知りたい情報がある→早く知りたい、と思うのが人間の心理だと思います。
その時にワンクリックで記事部分まで行けてそこにユーザーの知りたい情報が分かりやすく書いてあったらどうでしょう？私だったら「使いやすし分かりやすい素晴らしいサイトだな」と思います。こう思ってもらえるだけでもブロガーとしては大変嬉しいことでしょう。
目次によって自分の文章能力が把握できる
これは完全に自分の経験なんですが、ブログ書き始めの頃って意外と流れを考えずに書いてたんです。勢いで書きたい事をバーッと。
目次を作って過去記事見直して愕然としました。自分の伝えたいことが分からないんですよ。記事の目次見て、自分で「で？何を伝えたいの？何を書きたかったの？」って思ったんです。
段落も脈絡もない記事は、見ている人は疲れてしまいます。
検索上位の方の記事を読んでいて、勢いがあるなーキャラが立ってるなー、と思うブログでもきちんと順序と流れを意識して書いているのがよく分かります。
自分で書いた文章を見直すひとつの機会として試しに設置してみるのもありかもしれません。
基礎、大事！という事でユーザーの為、自分の為に目次を設置していきましょう。
スポンサーリンク
目次設置の手順
の前に！ｐｈｐなどを弄る時は必ずバックアップを取ってから、作業してください！絶対ですよ！
それでは手順の方に入っていきましょう。
コードをコピーする
下にテキストを張りますのですべてコピーして下さい。
<style type="text/css">#toc { margin: 0 auto; padding-bottom: 10px; width: 80%; background: #ffd;}.mokuji_wrap { border-radius: 5px; border: 1px solid #aaa; -webkit-box-shadow: 3px 3px 4px #bbb; box-shadow: 3px 3px 4px #bbb;}.mokuji { color: #8b4513; text-align: center;}#toc ul { color: #a0522d; margin-left:10px; border: 0; font-size: 8px; font-size: 0.8rem;}#toc li { color: #a0522d; margin-left:10px; line-height: 1.5;}#toc li a{ color: #a0522d;}</style> <script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script><script type="text/javascript">$(function() { var idcount = 1; var toc = ''; var currentlevel = 0; $(".entry-content :header",this).each(function(){ this.id = "toc_" + idcount; idcount++; var level = 0; if(this.nodeName.toLowerCase() == "h2") { level = 1; } else if(this.nodeName.toLowerCase() == "h3") { level = 2; } else if(this.nodeName.toLowerCase() == "h4") { level = 3; } else if(this.nodeName.toLowerCase() == "h5") { level = 4; } while(currentlevel < level) { toc += "<ul>"; currentlevel++; } while(currentlevel > level) { toc += "</ul>"; currentlevel--; } toc += '<li><a href="#' + this.id + '">' + $(this).html() + "<\/a><\/li>\n"; }); if(toc){ toc = '<div class="mokuji_wrap"><div class="mokuji">【目次】ぽちっと押したら自動スクロール♪</div>' + toc + '</div>'; } $("#toc").html(toc); $('a[href^=#]').click(function(){ var speed = 1000, href= $(this).attr("href"), target = $(href == "#" || href == "" ? 'html' : href), position = target.offset().top; $("html, body").animate({scrollTop:position}, speed, "swing"); return false; });});</script>コードを貼り付ける
次はコードを張る場所です。
①外観＞②テーマの編集＞③footer.phpを開きます。
④ファイルの１番下までスクロールしていくと、</body>というコードがあるので、そのすぐ上に先ほどのコードを全部コピーして張ります。
テーマの更新ボタンを押して、目次の出力準備が完了です。
記事などに目次を入れる
記事等の目次を入れたいところに、
<div id="toc"><div>
と打ち込んで、プレビューで記事を確認してみて下さい。
打ち込むのはテキストの方です。ビジュアルの方に打ち込んでも反応しません。
問題なく出来ましたか？
きちんと作動していれば
【目次】
・見出し２
・見出し３
・見出し４
というように見出しの大きさによって段落のついた目次が出来ているはずです。
出来ていたら完成です。お疲れさまでした。
質問等はコメントから気軽に受け付けています。
背景や文字の色を変えたい！などは過去記事も参考にしてみて下さい。
参考記事 プラグインを使わずに見出しを装飾する
まとめ
いかがでしたでしょうか？
結構簡単ですよね。WordPressのプラグインは便利なものが多いですが、入れすぎると表示などの動作が重くなります。ブログの軽量化もかねて目次の設置を考えてみてはどうでしょう？
今回の記事はここまでになります。
最後まで読んで頂き感謝！
また次の記事で。。。
