このサイトでは、長らくWordpressプラグインの【Easy Table of Contents】を目次として使っていました。しかし、最近のアップデートで目次が表示されなくなる不具合が発生。開発元に問い合わせをしたところ、ステージング機能を使ってコピーしたサイトアクセス権を送れば、解析してくれるとのことでしたが、セキュリティー上ちょっと恐いこともあり、使用を断念することにしました。
代替えとして、The Thor標準でついている目次機能を使うのですが、デザインが微妙なので、CSSで色をカスタマイズしてなんとか使うことに。
興味のある方は、ご参照ください。
◆この記事でわかること
- 目次表示が出来なくなったバージョン
- Easy Table of Contentsの良かったところ
- The Thor標準の目次機能の色カスタマイズCSS
目次
目次表示が出来なくなったバージョン
まず、目次表示が出来なくなったバージョンをお知らせします。
◆目次表示が出来なくなったバージョン
Ver. 2.0.87
Ver. 2.0.87
Ver. 2.0.86に戻すと表示されます。
バージョンを元に戻すのには、プラグインの【WP Rollback】が簡単で便利です。WP Rollbackをインストールして有効にすると、下記のような画面になり、バージョンを簡単に変更出来ます。
実は、プラグインの更新は随時やっているのですが、不具合が無いかを確認することを怠っており、表示が出なくなったのに気づいたのは最近で、既に4回バージョンが上がっていました。
冒頭にも書きましたが、開発元（インドらしい）は、問い合わせたところ問題解決に意欲的です。
ただ、サーバーのステージング機能を使ってコピーサイトを作り、このコピーサイトにアクセスする権限（パスワードなど）を送る必要があるとのこと。
この部分は結構重荷で、コピーとはいえ、中身を全部見ず知らずの海外の人に渡すのは、ものすごく抵抗があります。
ただ、サーバーのステージング機能を使ってコピーサイトを作り、このコピーサイトにアクセスする権限（パスワードなど）を送る必要があるとのこと。
この部分は結構重荷で、コピーとはいえ、中身を全部見ず知らずの海外の人に渡すのは、ものすごく抵抗があります。
また、4回バージョンが上がっているのに、表示がされないということは、多くのサイトで問題ないが、私のサイトだけ何か不具合があり、表示出来なくなっているのかもしれません。
確かに、多くのサイトで表示されなくなったら、問い合わせもたくさん来て直しますよね。
Easy Table of Contentsの良かったところ
Easy Table of Contentsの良かったところは･･･
◆Easy Table of Contentsの良かったところ
サイドバーにも目次を表示出来る
サイドバーにも目次を表示出来る
目次はページトップに表示されますが、ウィジェットとして、サイドバーに表示することもできます。
記事を読み進める中で、ちょっと上に戻りたい時、右側のサイドバーに目次があると、さっと戻れてとても便利なんです。
ここが採用していた最大の理由です。
記事を読み進める中で、ちょっと上に戻りたい時、右側のサイドバーに目次があると、さっと戻れてとても便利なんです。
ここが採用していた最大の理由です。
The Thor標準の目次機能の色カスタマイズCSS
やむなく、The Thor標準の目次機能を使うのですが、背景が白で、デザイン上、このサイトでは浮いた感じになってしまいます。色のカスタマイズ機能は見当たりません。
CSSを追加してカスタマイズするしかないということですね･･･
The Thorの目次機能色カスタマイズCSS
という訳で、色カスタマイズのCSSです。
以下のCSSをコピーして、Windowsの人はメモ帳ソフトなどに貼り付けます。
/* 目次の背景色と枠線の変更 */
.content .outline {
background: #fff2c6; /* 外側背景色 */
border: solid 2px #b2384e; /* 枠線の太さと色 */
}
.content .outline__switch+.outline__list {
background: #fff2c6; /* 内側背景色 */
}
/* 目次の数字のデザイン変更 */
.content .outline__number {
color: #ffffff; /* 数字の色 */
background-color: #b2384e; /* 数字の背景色 */
}
.content .outline {
background: #fff2c6; /* 外側背景色 */
border: solid 2px #b2384e; /* 枠線の太さと色 */
}
.content .outline__switch+.outline__list {
background: #fff2c6; /* 内側背景色 */
}
/* 目次の数字のデザイン変更 */
.content .outline__number {
color: #ffffff; /* 数字の色 */
background-color: #b2384e; /* 数字の背景色 */
}
黄色い下線の部分は、色を表すコード。（上記はこのサイト用にカスタムした色コードです。ここを書き換えます）
各コマンドがどの部分に該当するかはこちら↓
※ 下図は、①の領域のみ分かりやすくするため、白（#ffffff）にしていますが、①と③は同じ色にしましょう。
※ 下図は、①の領域のみ分かりやすくするため、白（#ffffff）にしていますが、①と③は同じ色にしましょう。
メモ帳ソフトに貼り付けたら、色を編集します。
色は、【#】からはじまるカラーコード（Hex）で記載します。
色は、【#】からはじまるカラーコード（Hex）で記載します。
ネットで【カラーコード】とググると、【HTMLカラーコード：WEB色見本 原色大辞典】などのページで調べられます。
広告が鬱陶しい場合は、パワポやワードでも調べられます。
パワポを例に紹介します。
パワポを例に紹介します。
パワポを立上げ、【挿入】→【図形】で適当な四角形を描きます。
描いた四角形を【右クリック】→【塗りつぶし】→【塗りつぶしの色】と選択。
上のタブで【ユーザー設定】を選択すると、下図のような画面になります。
ここで、色をクリックすると、【Hex】の欄にコードが表示されます。
このコードを、メモ帳のCSSに書き換えます。
The Thor にCSSを記載する方法
The ThorにCSSを記載する方法です。
wordpress管理画面の【外観】→【カスタマイズ】 左のメニューを下にスクロールして、【追加CSS】をクリック。
左側にCSSを記載する場所が出ます。
右側にはサイトトップページが表示されます。CSSを記載すると、その効果がココで事前確認することが可能です。
右側にはサイトトップページが表示されます。CSSを記載すると、その効果がココで事前確認することが可能です。
今回は、投稿ページの目次の色変更なので、右側のトップ画面から、投稿記事をクリックして投稿記事を表示させ、目次が表示される位置にスクロールしておきます。
メモ帳で用意しておいたCSSをコピーして、wordpress左側に貼り付けます。（既に記載がある場合は、一番下に貼付け。）
この時点でCSSに間違いが無い場合は、右側の投稿記事に反映されます。逆に反映されず、変化が無い場合は、CSSの記載にミスがあると思ってください。
この時点でCSSに間違いが無い場合は、右側の投稿記事に反映されます。逆に反映されず、変化が無い場合は、CSSの記載にミスがあると思ってください。
この時点では、まだ本ページに反映されていません。
右側の投稿記事に問題なく反映されているようでしたら、左上の【公開】を押すと全投稿記事に反映されます。
まとめ
今回は、Wordpress目次プラグインの【The Table of Contens】がアップデートで表示されなくなったバージョン、
代替えでThe Thor標準の目次機能を使うのですが、サイトに合わせて色を変更するCSSについて、紹介しました。
プラグインのアップデートで不具合が起きることは結構あります。サイト全体が表示されなくなる非常に重大な不具合にも過去1回遭遇しました。（この時の大問題プラグインは Widget Logic です。即無効化しました。）油断大敵です。
アップデートは比較的頻繁にきますが、アップデート後は必ず不具合が出ていないか確認しましょう。
不具合が起きた場合、バージョンを元に戻すのには、プラグインの【WP Rollback】がオススメ。今回どこのバージョンから表示されなくなったのか調べる際に、とても重宝しました。
最後まで御覧いただき、ありがとうございました。
