【WordPress】記事に目次をつけるプラグイン

記事に目次をつけるためのプラグインを導入しました。

ついでにご紹介。

スポンサーリンク

記事に目次をつけることにしました

プラグインじたいの存在は知ってて、導入してるブログもあるんですが、ここはいらないかなあ、どうかなあ、としばらく考えてました。

でもMEC食日記をはじめて、たぶん、MEC食の食事例を見にくる人には前段は邪魔なんじゃないかなあ、と思って(・x・)

自分で自分の書いたものいらないだろって思うのもアレですが。
でもなんとなく何か前フリは書きたい。そのうち書かなくなるかもですけど。

とりあえず、そこどうでもいいから食事の内容と写真見せろよ的なひとが一発でジャンプできるようにしようかなってことでつけることにしました。

でも、じつは私、目次つきのブログ記事ってあんまり好きじゃなくて(笑)

だって目次だけでタテにごちゃくちゃ無駄に長くて、それスクロールするのがうざいんですもの(・x・)
自分で閉じるためのクリックもめんどくさいし(できないこともあるし)

ぐーぐるによるブログの評価って滞在時間も要素の1つらしいので、目次を縦長にしてそのぶんスクロール量を稼ぐことで1秒でも滞在時間稼ごうとしてるのかしら、とか思っちゃいます。

そういう意図ではないにしても、自分がうざいなあって思ってるものを自分のブログにつけるのはどうなのかと。

ところが最近、ブログによっては目次は最初たたんであって、表示したい人だけが「表示」をクリックすると展開できるようにしてあることに気がつきました。

あれ、設定できるんだ(・x・)1行だったらうざくないし、つけてもいいかな(・x・)

ということで設置しました。

TOC+ こと Table Of Contents Plus

今回導入したのは、Table Of Contents Plus、略してTOC+というプラグインです。

ほかにも目次を作ってくれるプラグインは提供されてますが、いろいろぐぐると一番のおすすめはこれみたいだったので(・x・)

ゲームする時攻略編成や装備は参考ブログ様をコピペする派です。
手持ちにない場合はいちおう代品を考えますし、艦これなんかの場合私みたいなぬる提督の手持ち装備はたいてい攻略ブログの甲提督さまたちの足元にも及ばないんで代用装備多いですけどねw
先人の知恵だいじ。

インストール方法

登録されてるWordPressのプラグインですので、一番オーソドックスなやりかたです。

ダッシュボード左下のほうの「プラグイン」から「新規追加」を選択

検索ウィンドウに「Table Of Contents」と入力。

Plusまで入れてもいいとは思いますが、入れなくても上位に出てくるので問題ありません。

※2017年5月現在では2番め、一番上の列の右側に出ます。

右上の「今すぐインストール」をクリックして

 

インストールが終わったらそのまま「有効化」。

以前はプラグイン一覧に一度戻って有効化する必要があったと思うんですが、いつの間にかインストールしたその場で有効化できるようになりましたね(・∀・)

自動的にプラグイン一覧画面に戻ったら完了です(・∀・)

設定

そのままでも条件に合った記事があれば動作しますが、設定しないと、たぶんほとんどのブログではエントリに目次は出てこないと思います。

設定はここ。

左下の「設定」から「TOC+」です。

さっきから何度か「Table Of Contents Plus、略してTOC+」とか名前を並べて書いてたのはこれが理由です(・x・)

長いのはわかるんですけど、いきなりTOC+って言われたってわかんねーっすよ(・x・)

TOC+=Table of Contents Plusです! TOC+ですよ!!!!!
(初期にすごく混乱した末の学習)

TOC+を選ぶと、こんな画面になります。

※このあと分解していくので大きい画像で見なくてもだいじょうぶd(・x・)

位置

どこに見出しを出すか、です。

デフォは「最初の見出しの前」

ここに置いてあるブログがほとんどですね。

h1を最初の見出しにするとかだったら最初の見出しの後とかでもいいのかも。

「上」と「下」は文字通り(笑)記事のいちばん上と下です。

このブログは「上」を使ってます。

自分の見たいとこだけ見たい人はアイキャッチ画像とか惹句なんかもうざいかなーって思ったので(笑)

すぐに変更もできますので、全部ためしてみるのもいいかと。

表示条件

短い記事に目次があるのは意味ないですよね(・x・)

デフォルトは4です。

どこを目次を出す分岐点にするかは、文章の書き方にもよると思います。

私は比較的1セクションが長いので、3にしました。

以下のコンテンツタイプを自動挿入

ここが大事です。

まあ、一度設定しちゃえばそこまでなんでこの位置なんだとは思いますが、もっと上のほうに置いてあってもいいような気がするくらい。

どんな種類の記事に目次をつけるか、という設定です。

デフォルトでチェックが入ってるのは、これもなぜ?と思いますが、pageの項目。

これはなにかというと、

page=固定ページ

post=エントリ(記事)

のことです(・x・)

そう、デフォルトだと固定ページにしか目次が表示されないのです(・x・)

なので、デフォルト状態で目次がエントリに表示されてる人は少ないと思いますと書いたんですね。

全部固定ページで作ってる人もいるかもしれませんが、ふつうは「新規投稿」で投稿すると思うので、そうするとここがpageのみだと目次が作られない、と。

そんなわけで、pageのチェックを外すかどうかは検討するとして、ふつうに「投稿」からエントリ(記事)を書いてる場合はpostにはチェックを入れたほうがいいと思います。

見出しテキスト

記事に目次を表示する時、どういう文字列で出すか、という設定ですね。

目次の名前そのものと、表示/非表示の部分

この「=====もくじ=====」と[]の中の「表示」の文字になります。

最初に表示する時に目次を折りたたんでおくかどうかもここで選択します。

あとのほうの設定にありますが目次のサイズを「自動」にしとくと、このテキストが「目次」的な短いもので、かつ最初は折りたたんで表示だった場合、テーブルの枠がすごく狭くなります。

あんまり見栄えがよくないので、私はちょっと左右に記号を入れて長くしました。

階層表示

テキストをhタグに応じた階層表示にするかどうかです。

チェックが入ってるとこんな感じになります。

番号振り

各項目に番号を振るかどうかですね。

論文でもないのに項目に番号って私はあんまり好きじゃないのでオフにしてますが、

チェックを入れると

こんなかんじになります。

大項目がいくつ置いてあるかはわかりやすくはなります。

スムーズ・スクロール効果を有効化

これは言葉どおり。ジャンプで移動するかスクロールで移動するかを選べます。

プレゼンテーション

目次のデザインですね。

白にしてるブログが多いような気がします。

そのほかにカスタムもできて、

自分で色を選べます。

ここにカラーコードを入れると該当の部分の色が自由に変更できます。

小さく書いてありますが、何も入れなければデフォルトの「グレー」で表示される色のままです。

カラーコードは

WEB色見本 原色大辞典 - HTMLカラーコード
色の名前とカラーコードが一目でわかるWEB色見本

こういうサイトで自分のほしい色を見つけたり、

カラーピッカー - 原色大辞典
Photoshopライクなカラーピッカー

カラーピッカーで色を選んでコードを書き取ったり

もできますが、

明確に目的のカラーがあるのでないなら、

この、右側にうすーーーくひっそり出てるよくわかんない形のアイコンをクリックすると

自前のカラーピッカーが出てきます(・x・)

外側のわっかで緑とか青とか、おおよその色を選んで、

内側の四角でもうちょっと細かい調整をします。

左側に選んだ色が表示されますので参考……にはしますけど結局表示させてみたらイメージとちがったりするので何度か投稿記事との間をいったりきたりすることになるかも。

上級者用設定

色設定の下に上級者用設定というのがありますが、基本的には設定する必要はありません。

「見出しレベル」だけ、目次に含めたいhタグをどこまでにするかが設定できるので、下のほうのhタグは目次に出さなくていいよ、というときはここでチェックを外しましょう。

 

【最重要】最後に

これすっごい大事です。

最後に「設定を更新」をクリック。

これ押すまでは設定が適用されません。

ほかの項目に移動しちゃうと確認なしでここまでの設定がクリアされますのでご注意を。

記事ごとに目次の表示/非表示を変更する

ところで、場合によっては一部の記事にだけ目次を表示したい、あるいは特定の記事は目次を表示したくない場合があると思います。

これは、設定とショートコードの組み合わせで可能です。

特定の記事だけ目次を生成しない

最初は、一部の記事だけ目次を出さない方法。

コンテンツタイプで基本的に投稿には目次が表示されるようにしておいて、

本文内のどこでもいいので、no_tocというショートコードを入れます。

ショートコードなので、ブラケット・・・[]でくくります。

すいませんほんとはブラケットつきで書きたいんですけど、そうするとショートコードが働いちゃってエントリの表示がおかしくなってですね(・x・;

記事内に書く方法をさがしたんですけど見つからなかった(´・ω・`)

特定の記事だけ目次をつける

今の逆ですね。

自動で目次が入る記事がなくなるように、チェックを全部はずして、

今度はtocとショートコードを書き込みます。[]もお忘れなく。

このショートコードのある場所に目次が表示されます(・∀・)