- はてなブログ管理画面サイドメニュー内「デザイン」クリック
- 飛んだ先の画面内左上レンチマーク「カスタマイズ」クリック
- 「フッター」をクリックして出てきた欄の中にコードを貼り付け
【コピペで簡単】サイドバーに置いた目次を固定＆追尾させる方法【おまけ付き】
最近目次のカスタムにハマりだした苦労詐欺だ。
つい先日Twitterでフォローしているかのさんがこんなことをつぶやいてた。
なんで、ブックマークに入れとかんかったんや・・・・。
— かの@読書ブログしてます (@kanoblog) 2017年2月11日
サイドバーに目次置いてるんだけど。進むごとに強調されるサイドバーを置きたい。
どこかで記事みたんだけどなあ。
実はコレ、自分もどこかのブログで使われているの見て、調べて実装しようと思ってたんだよね。
今回はWPやはてブのようにcss＆HTMLが触れるようなサービスなら、コピペでこの機能が実装できるように紹介するよ。
サイドに目次を設置
まず、サイドバーの一番下に目次を設置。
この目次は記事内をスクロールしていって、サイド部分の一番下まで到達したら、そこから固定される仕組みになってるよ。
ちょっと長めだけど上記の記述をコピーしてサイドにHTMLのモジュール(ウィジェット)を追加して貼り付け。
ってのが僕が調べた↓の参考元のやり方なんだけど、個人的にスクリプト部分は別にしてまとめて置きたいと思ってちょっと変更してみた。
まず、サイド部分にHTMLのモジュール(ウィジェット)を追加して、タイトルを入れずに以下のコードだけを貼り付けて保存。
で、bodyタグ内の</body>直前辺りに以下のスクリプトコードを貼り付け。
さっきと対して何も変わらないんだけど、ソースの見栄えは変わるかなと。
僕は現役SEO担当としてお客様のサイトを弄ることが多くて、HTML・css触ることもしょっちゅうだし、これでも一応プログラマーの端くれ。
ソースの見栄えにすごい拘っているわけじゃないけど、できるんだったらスッキリさせておきたいと思うんだよね。
はてブとWPそれぞれでスクリプトコードを貼る場所をまとめておく。
【はてなブログ】
【WordPress】
- 管理画面サイドメニュー「外観」内「テーマ編集」クリック
- 画面右「テンプレート」内「footer.php」をクリック
- 「Ctrl」＋「F」で検索窓を呼び出し</body>で調べて、その上辺りにコードを貼り付け
はてブとWPそれぞれの貼り付ける箇所を紹介したけど、bodyタグ内・サイド部分を弄ることができるサービスなら貼り付けで実装ができるはず。
bodyタグ内がいじれなくて、サイドへのモジュール(ウィジェット)追加ができるとかなら、モジュール(ウィジェット)内にコード貼り付けでOK。
cssで表示をカスタム
さっきのコードを追加しても記事のサイド部分にはまだ目次が表示されていないと思う。
もしくは、ものすごい味気ない感じの目次が表示されているかもw
表示されない原因はcss等で表示領域の設定できていないからだと思う。
ここからはcssで表示のカスタムを紹介してく。
まずは、以下のcssを、記事ページに反映しているcssに追記する。
はてブの場合は「デザイン」→「カスタマイズ」→「デザインcss」内
WPの場合は「外観」→「テーマ編集」→「style.css」等のページに反映されているっぽいcss内
WPの場合は「page.css」とか作れるなら作って、記事のみに反映されるようにしちゃってもいいかも。
WPで試してないからわからないけど、サイト全体で使われているcssに設置しちゃうとトップページのサイドにも目次が出る可能性があるよ。
↑のcssは参考元のやつそのまんまでかなりシンプルな感じになってる。
僕はこれを少し弄って、現在記事サイドに表示されているような感じに変更したよ。
変更後のcssがこれ↓
元のやつと見比べるとそれなりに弄ってあるんだけど、特に大きく変更したのが「#sectionListSide」ってのを設置したとこかな。
この中でサイドの目次部分全体をいじってて、黒色の外枠線付けて、角部分を丸めたり、目次全体を太文字にするといった設定がしてある。
もう1個「#sectionListSide li」ってのも足してあって、目次の両サイドに余白を入れたり、左側に「●」が表示されるようにしてあるよ。
cssが分かる人は元のやつをコピーしてカスタムするといいかも。
面倒くさいけど実装したいって人は全コピペで問題ないかと。
ちなみにこの目次はクリックするとスムーススクロールで目的の場所に自動スクロールする仕様になってるよ。
【おまけ】自動で作られる目次を設置する方法
サイド部分に設置する目次は、サイト内で共通部分に設置されているので、記事内の見出し部分を読み取って自動で作られるようになってる。
この仕組を見た時に、「もしかして自動で目次を作ってくれるスクリプトが存在してる？」と思ったから調べた。
見つけたから、早速実装＆cssのカスタムもした。
※参考元のやつだとうまくリンクが設置されなかったのでこちらで修正したよ。
元のをコピペして使おうと思っている人は要注意。
どこがおかしいのか知りたい人は、ブログ内のお問い合わせかTwitterでDM送ってくれれば答えるよ。
まず、↑のコードを固定＆追尾機能をもたせたサイド目次と同じように設置。
はてブなら「デザイン」→「カスタマイズ」内「フッター」のところ。
WPなら「外観」→「テーマ編集」→「footer.php」内</body>直前のところ。
はてブの人もWPの人もレスポンシブじゃなかったり、スマホ表示が別である人はスマホの対応するところにも設置必須。
設置しておかないと、PCで表示されてるのにスマホで表示されないとかあるからね。
次にcss部分だけど、これも設置箇所はサイド目次と一緒で記事ページに反映しているcssの中に設置。
↑は参考元のやつで、これも僕は少し弄って、自分のブログに合うようにした。
自分用にカスタマイズしたのがこれ↓
元のやつには余白とかが無かったので、「#toc」内に「margin-bottom」や「.mokuji_wrap」内に「padding-bottom」を追加して調節した。
背景色はもとの目次の色を気に入ってたいのでそちらに変更。
文字サイズが元のやつだと何故か「font-size: 14px;」と「font-size: 1.4rem;」2つ存在してた。
後半の「font-size: 1.4rem;」が反映されてて文字が大きかったから、不要な部分を削除して、文字サイズを整えた。
このcssもスクリプトと同じで、スマホ表示が別で作られているなら、対応してるcssにも追記しておこう。
最後に目次を表示させたい位置に以下を設置して完了。
中身は空で、他の<div>で囲ったりはしないほうがいいみたい。
僕は前回の「アムール・デュ・ショコラ」の記事で何回か実験して実装してみた。
元の見出しタグ(h2やh3等)にすでにidとか設置してあると、リンクが機能しなくなるっぽいので注意。
最初表示させるとこまでは上手く行ったけどリンクが機能しなくて、暫く何が悪いのか悩まされた(；・∀・)
元から入ってたidを削除して、script内を修正したら機能したよ。(表示させているコードは修正後のもの)
このcssを見てすごいなと思ったのが「-webkit-box-shadow」「box-shadow」を使って、目次に影をつけているところ。
細かいところなんだけど、これがあるだけで目次が浮くようになって目立つ＆見やすくなるんだよね。
うちの会社のデザイナーさんとかもそうなんだけど、プロのデザイナーとかってこうゆうところ拘ってるんだよね。
これを応用してボタン作ったら、クリック率が上がったなんてこともあるからHTML・cssに興味ある人は学んでおいて損はないかと。
【おまけ】WPの自動目次を作ってくれるプラグインをご紹介
さっきの目次生成コードは、参考元の人も言ってるけど、WPのプラグインを解析して、使いやすいようにシンプルにしたものだよ。
だから、機能性がそこまでないんだけど、元のWPの目次を自動で作ってくれるプラグインは機能性が高いよ。
Table of Contents Plusってやつで、↑の記事で使い方を紹介してる。
WPの人はこちらを使ったほうが時間かけずにできると思う。
はてブの人も実は目次記法が実装されてて、コードコピペとかしなくても目次簡単に作れるよ。
だから、おまけの目次自動生成は僕みたいにカスタマイズして使いたいって人向けだね。
それと、目次を隠しにしている人が多いんだけど、SEOとして見るとこれはあんまりよくないよ。
他の記事でも書いたけど、ヘッダーやサイドでアコーディオンになっていたり、目次が隠しになっているなどの表示されていないやつは評価されない可能性がある。
隠しテキストとまではいかないからマイナスにはならないけど、せっかくの内部リンクが評価されないのは勿体無いかな。
SEOを意識しているのなら基本的には表示させるようにしよう！
