Sangoの目次をEasy Table of Contentsに変更してみた

このブログは有料テーマの「Sango」をベースに、ちょいちょいカスタマイズしたり機能を停止させたりしています。

そんな中、今回は「もくじ」にスポットを当てて紹介したいと思います

というのも、「Sango」ではプラグイン「Table of Contents Plus」を導入すると、テーマに合ったデザインで自動的に表示されるようになっています。

ただ、このプラグインがもう3年も更新されていない!

非常に気になる部分なので、別のプラグイン「Easy Table of Contents」を利用してみることにしました。

追記
作者「サルワカ」さんも「Table of Contents Plus」が更新されないことが気になったらしく、「Easy Table of Contents」も対応するようにアップデートしたそうです。詳しい設定方法は、こちらを参照ください。
さらに追記 2020-02-17
「Table of Contents Plus」が、3年以上ぶりに更新しました! ただ、更新した途端にデザインが崩れたので、修正方法をTable of Contents Plus の見出し位置を修正する方法【更新後に文字が埋もれたので】の記事で紹介しています。

WordPress2大「もくじ」プラグイン

これまでは、「もくじ」のプラグインといえば必ずと言って良いほど紹介されてきた「Table of Contents Plus」と「Easy Table of Contents」

ただ、先ほども言ったように「Table of Contents Plus」が3年以上も更新していないんですよ。

これは、怖い! いろんな意味で。

それに比べ、「Easy Table of Contents」は現在進行形で頻繁にシステム更新をしてくれています。

「Sango」では「Table of Contents Plus」を使えば自動的にデザインが合うけど、「Easy Table of Contents」は自分でカスタマイズをする必要が…

と思ったんですが、システム更新されない部分に無視もできない。

というワケで、デザインを少し寄せる感じで表示させてみるコトにしました。

Easy Table of Contentsをインストール

この記事を読んで頂いているくらいですから説明は不要だと思いますが、一応プラグインのインストール手順を紹介します。(もちろん知っている人は飛ばしちゃってくださいな)

STEP.1
プラグインから検索
プラグインの「新規追加」に進んで、「Easy Table of Content」と検索します。

STEP.2
インストール&有効化
「Easy Table of Content」が見つかったら、「今すぐインストール」を押して、その後に「有効化」すれば完了です!

プラグインのメイン設定

プラグインを「有効化」したら、さっそくメニューから「設定 > 目次」、またはプラグインから「Easy Table of Content」の欄にある「設定」に入りましょう。

有効化すると、下記の内容でデフォルト設定されています。

一般
サポートを有効化固定ページ
自動挿入空欄
位置最初の見出しの前(デフォルト)
表示条件4件以上
見出しラベルを表示チェックあり
見出しラベルTable of Contents
折りたたみ表示チェックあり
初期状態チェックなし
ツリー表示チェックあり
カウンター小数点表示(デフォルト)
スクロールを滑らかにするチェックあり
スクロールを滑らかにするチェックあり
外観
Auto
カスタム幅275px
回り込みなし(デフォルト)
タイトル文字サイズ120%
タイトル文字の太さMedium
文字サイズ95%
テーマグレー
高度
小文字チェックなし
ハイフネーションチェックなし
ホームページチェックなし
CSSチェックなし
見出し全てにチェックあり
除外する見出し空欄
スムーズスクロールのオフセット30px
モバイルのスムーズスクロール0px
パス制限空欄
デフォルトのアンカー接頭辞i
ウィジェットの固定セレクタ空欄

できる人はどんどん好きに設定して良いと思いますが、変更するコトが多そうなポイントだけ絞って紹介しましょうかね。

サポートを有効化

ここのチェックを入れると、投稿画面に「もくじ」を利用するかどうかの設定項目が表示されるようになります。

僕は投稿画面はなるべくスッキリさせたいので、全てのチェックを外しました。

自動挿入

ここにチェックを入れた部分は、設定した内容で自動的に「もくじ」が表示されるようになります。

僕の場合は、ブログ記事だけに表示させたいので「投稿」のみにチェックを入れました。

位置

この位置は、デフォルトの「最初の見出しの前」で良いんじゃないですかね。

表示件数

これは、「見出しタグ」が記事に何個以上あると表示するのかを設定する項目。ここはもう、好きな数字を選んじゃってください。

見出しラベルを表示

基本的にチェックを入れたままだと思いますが、「もくじ」とかの文字を入れたくないって人は外しちゃいましょう。

見出しラベル

ここには、「もくじ」とか「目次」とかの見出しを入力します。

折りたたみ表示

これは、閲覧者が「もくじ」好きに折りたたんだりできるようにするボタンを表示させます。

僕は、「Sango」のデザインと合わなかったのでチェックを外しました。まあ、「もくじ」をわざわざ折りたたむ人はあまりいないとも思ったので。

初期状態

ここにチェックを入れると、「もくじ」が最初から折りたたまれた状態で表示されます。

ただ、「折りたたみ表示」にチェックを外している場合には、ここもチェックを外しておかないといけませんね。

ツリー表示

これは、「もくじ」の表示が「見出しタグ」によって少しずれて表示する設定です。基本的には、チェックを入れたままで良いでしょう。

カウンター

「もくじ」を表示させると、数字が先頭についた状態でリストができます。その時に、小数点を外したり、ローマ数字で表示させたりを設定できます。

スクロールを滑らかにする

文字通り、チェックを入れておくとスクロールが滑らかになります。ただ、重くなったりする要因になる場合もあるので、SEO的には外しておくと良いかもしれません。

テーマ

基本的に外観で設定を変更するとしたら、「テーマ」の部分じゃないかと思います。これを「カスタマイズ」にすると、下の部分の色を反映させるコトができます。

css

あとでcssを追加するんですが、プラグインのcssスタイルを変更するのでチェックは外したままにします。

見出し

基本的に「h2」が一番大きな見出しになると思うので、「h1」は外すば良いと思います。

僕の場合は、「h4」以降も目次には入れる必要がないと思ったので「h4」から「h6」も外しました。

除外する見出し

最後の締めとして「最後に」とか「まとめ」などの「見出し」を入れるような人は、ここでそれらの単語を入れると良いでしょう。

cssを追加してカスタマイズ

基本の設定が終わってから「もくじ」の表示を確認してみると、なんか文字とかが詰まったコンパクトなモノが出ているはずです。

そこで、「Sango」でも違和感がないような感じになるよう css を追加してみましょうか

下記のコードを丸っとコピーして、カスタマイズにある「追加css」に貼っちゃっても良いです。

CSS
#ez-toc-container {
  border-width: 2px !important;
  border-radius: 0;
	box-shadow: 1px 1px 1px 1px rgba(226,226,226,1);
}
#ez-toc-container ul.ez-toc-list a {
  display: block;
  padding: 6px;
}
.ez-toc-title-container {
  display: block;
  width: 100%;
}
#ez-toc-container p.ez-toc-title {
  display: block;
  margin-bottom: 13px;
	margin-left: 8px;
	margin-top: 10px;
  font-weight: bold !important;
}
.ez-toc-title-toggle {
  position: absolute;
  top: 13px;
  right: 15px;
}
#ez-toc-container.counter-decimal ul.ez-toc-list li a::before, .ez-toc-widget-container.counter-decimal ul.ez-toc-list li a::before {
  color: #383838;
  margin-right: 8px;
	margin-left: 10px;
}

あとは、色なり幅なりを好きなように変更しちゃってください。

ただ、ここで「あれ?」ってコトがあると思います。それは、枠線が表示されているってコト。

そう、「Sango」ではリスト表示すると自動的に薄いグレーの枠線が表示されます

これを非表示すれば、枠線が消えます。ひとまず、枠線を非表示するコードはこちら。

HTML
.entry-content ul, .entry-content ol {
    border: none;
}

これも「追加css」に追加しておけば、綺麗に「もくじ」が表示されるようになります。

利用する前の注意点!

最後の最後に注意点かよと思われるかもしれませんが、上記の内容で「Easy Table of Contents」を利用すれば「もくじ」を表示できます。

ただ、この記事を読んでいる時に「あるコト」に気づいた人っています?

この記事にも「もくじ」が自動で設定されているはずなんですが、実はソースコードを表示させると「もくじ」が表示されなかったんです。

なので、画像を貼りました。笑

もちろん、クリックしても何処へも飛ばないですよ〜。

まあ、ソースコードを載せるような記事はあまり書かないので、まあスルーしてもらえるかなって勝手に思っています。

あと、枠線を非表示にするcssを追加しているので、「Sango」独自ショートコードを使ったボックスなどが表示されないのも何個かあります。

僕はあまりボックスを使わないのでココはパスできるとして、ボックスをよく使うという人は「Easy Table of Contents」がオススメではないかもしれないですね。

さいごに

「Table of Contents Plus」から「Easy Table of Contents」に移行してみましたが、いかがだったでしょうか。

まあ、ある程度「Easy Table of Contents」を使えるようにはしたんですが、まだまだ課題がある感じですかね

もっと良い「もくじ」のプラグインが見つかったり、もっと良いカスタマイズが見つかったら更新したいと思います。