どうも、すぎもん(@suginomoto73)です。
私は旅×お酒のブログマガジン「トラべろマガジン」を運営している。
例えば浅草で生ホッピーを飲んだり、地ビールを飲んだり、お酒を軸にした観光記事を書いている。
トラべろマガジンを作って一年以上経つのだが、今更
「観光記事って目次あったほうが良くね？！」
と思ったので、WordPressのプラグインを使って実装してみた。
因みに先に完成形を見せておくとこんな感じ。
ズン。
なかなか良いんじゃないでしょうか。
これを作っていく。
因みに機能としては、
・見出しタグ(hタグ)をもとに自動で目次を生成する
・hタグはついてるが、見出しは付けたくないページには表示させない
ということを機能として実装していく感じだ。
目次があった方が良い理由
この記事を読んでいる人は、目次を付けたいと考えてると思うが、そもそも本当に目次をつける必要はあるのか？
的なことは考えたほうが良い。
私は観光記事には目次はあった方が良いと思ってて、
・観光記事は紹介することが多いので、タイトルだけでは説明が不十分
・長くなりがちなので、先に紹介の流れを説明しないと分かりにくい
って感じたので、作ることにした。私は同じくWordPressでブログをやっているが、そちらには入れていない。
目次の自動作成機能を使うと、見出しタグを入れたところが自動で目次になるのだが、
見出しも適当に書いてるから、見出しにしても訳分からないし、ブログは何も気にせずに徒然なるままに書きたい。
カスタマイズ記事が沢山ある「Table of Contents plus」は古い
プラグイン使わずにも出来そうだけど、取りあえず時間短縮でプラグインを探してみた。
ネットで検索すると「Table of Contents plus」というプラグインが多く使われているっぽい。
早速見てみると、
最近メンテナンスされていないっぽい！
「う～ん、新しいやつ探すか。」
と思って、見つけたのが「Easy Table of Contents」だ。
2018年5月現在でもこまめに更新されているから、安心そうだ。
「Easy Table of Contents」をインストールしよう
「Easy Table of Contents」のインストールの仕方は、
①プラグイン検索から「Easy Table of Contents」と調べて、インストールボタンを押す
②「Easy Table of Contents」のサイトからダウンロードして、WordPress上にアップロードする。
次行ってみよう。
設定しよう。色の設定も簡単！
プラグインをインストール出来たら、設定をしていく。
インストールすると、設定欄に「目次」という項目が追加されているので、そこをクリック。
どんどん設定していくだけ。ちなみに私の設定はこんな感じ。
設定欄で、どの見出しタグをもとに自動で目次を生成できるか、色なども指定できるので簡単。
あと、この投稿は目次は作りたくない！というときは、個別の投稿編集ページの上から設定できる。
ページ上部の「表示オプション」をクリックすると、チェックボックスが出てくるので、そこの「Table of contents」のチェックボックスを外すだけ。
すると、こんな感じの目次が出来上がった！
もうすでに結構ええやん。
CSSで細かいデザイン調整をしよう
あとは、CSSで細かい部分を直していった。
いい感じだ！
因みに使ったコードは以下。
こちらのブログを参考にさせていただきました。
カスタマイズに困ったら、Table of Contents plusの記事を見よう
色々デザインカスタマイズしたいけど、CSS詳しくない…
調べたいけど「Easy Table of Contents」のカスタマイズ記事が見つからない…
というときは「Table of Contents plus」の記事を参考に出来る。
というのも、classやidなどの指定が似ているため、ちょっと変えるだけで「Easy Table of Contents」にも応用できる。
具体的には、CSSの
「#toc_container」の部分を「#ez-toc-container」に、
「p.toc_title」の部分を「p.ez-toc-title」のように変えるだけ。
「toc_」の部分の前に「ez-」と付けるとだいたい大丈夫。
一点注意なのが、「toc_title」など、アンダーバーが使われているので、それをハイフンにするのを忘れずに。
これで「トラべろマガジン」が読みやすくなったぞ。
読みやすくなった「トラべろマガジン」をどうぞ、宜しくお願い致します。
