WordPress(ワードプレス)を使ってブログに「目次」を表示してくれる便利なプラグイン「Table of Contents Plus」と言うのがあります。
僕のブログでも使っていたのですが、表示が崩れると言う問題があったため最近は使用せずにいました。しかし、そのまま放置するのも良くないので原因を確認して修正しました。
その方法を書いておきますので良ければお役立てください。
Table of Contents Plusが崩れる
僕のブログはWordPress(ワードプレス)を使用しているのですが、記事の上の方に目次を設置しているのですが、ある時から表示が崩れています。
目次の表示には「Table of Contents Plus」と言うプラグインを使用しています。
目次の項目をクリックすると該当箇所にジャンプするし、「隠す」をクリックすれば目次が非表示になります。
動作は正常なので、スタイルシートが正常に読み込めていない様です。
目次表示が崩れる原因
原因は「Autoptimize」と言うWordPressプラグインでした。
「Autoptimize」はJavaScriptやCSSファイルを圧縮してくれるWordPressプラグインです。ページの表示スピードを上げるために非常に役立ちます。
この手のプラグインの中では1番人気ですね。
PageSpeed Insightsなどを利用してページ表示速度について対策を取った事がある方なら導入しているのではないでしょうか？
「Table of Contents Plus」の表示は「Autoptimize」の設定の中にある「Optimize CSS Code?」を有効にする事で崩れます。
Autoptimizeの設定を変更する
- 「Autoptimize」の設定画面の右側にある「Show advanced settings」ボタンを押し、更に詳細な設定が出来る様にします。
- 「CSS Options」の下の方にある「Exclude CSS from Autoptimize」に「Table of Contents Plus」のCSSファイル名を追記します。
“exclude=除外”ですね。ここに記入したCSSファイルは圧縮されない様になります。
最初から管理画面用のCSSが入っているので「table-of-contents-plus/screen.min.css」を追記すればOKです。
または、そのまま以下をコピペして貰えればOKです。
1admin-bar.min.css, dashicons.min.css,table-of-contents-plus/screen.min.css - 一番下部にある「Save Changes and Empty Cache」をクリックして完了です。ウェブページを表示して「Table of Contents Plus」が正常動作しているか確認してみてください。僕はこの方法で復活しました。
PageSpeed Insightsの確認
「Autoptimize」をインストールしていたと言う事は、「PageSpeed Insights」のスコアも気にされているのではないかと思います。
圧縮するファイルを減らしたのでスコア下がっているのではないか？と思ったので僕の方でも調べてみました。
変更前スコア
モバイル：66 パソコン：77
変更後スコア
モバイル：69 パソコン：83
あれ？上がるんですね。
変更後の「修正が必要」欄には「Table of Contents PlusのCSSを最適化してください」と言う様な事が書かれているので、間違ってはいないはずです。
まぁ、早くなってくれたならむしろラッキーですね。
まとめ
「Autoptimize」は便利なWordPressプラグインですが、ブログのスタイルが崩れると言う情報は度々目にします。
見てくれる人のユーザビリティを下げない為にも、プラグインの追加など特別な事をした時には特に、自分のブログのチェックは欠かさずにやるべきですね。
コメント