このページだけ目次のスタイルが崩れてるんだけど
キャッシュやプラグインなら、全ページに問題があるはずなのに、特定ページだけ目次のスタイルが崩れる問題、解決しました。
- JINの目次スタイルが崩れた状況確認
- スタイルが正常なページと異常なページの違い
- 原因調査
JIN は、RTOC の目次プラグインを導入している人がほとんどだと思う。JIN 開発側から出されているので問題ないだろうと。
検証中に気になったことがあるので、あわせて他のテーマと目次の挙動について調査もしてみました。
結論から言えば、JIN + RTOC だけの現象ということなので、他のテーマの方は安心してもらいたい。ただ、RTOC を導入しているテーマなら、同じような現象に悩んでいるかもしれません。
キャッシュでもプラグインでもない。原因は別のところにありました。
WordPress のプラグインとテーマ、ブログ記事作りに役立つ記事を書いてます。
テーマは、Cocoon、JIN、Lightning、SWELL を主に使ってます。
WP愛だけじゃ生きていけない😂
JIN の目次が崩れた状況確認
特定のページだけこのようにスタイルが乱れていました。
先にも書きましたが、他のページはまるで問題ないので、あきらかにこのページだけ。
こういう症状の人がいるかどうか不明ですけど。。
他のページと違ったところ
このページと同じ出だしで作っているページを比較してみました。
ここでは、検索順位チェックできる Rank Tracker というアプリを紹介しているのですが、Rank Tracker の情報部分を再利用ブロックで再利用していました。
問題解決のヒントは、このページだけ目次スタイルが崩れたことにありました。
結論：記事の最初の見出しはH2から
再利用ブロック以下、最初の見出しをH2へ変更すると元に戻りました。
崩れたページの見出しは、再利用ブロック内のH2見出しから始めているので問題ないと思っていました。
しかし、これは無視されて、再利用ブロックの次のH3から読み込んでました。
よくみると、目次内には再利用ブロックのH2見出しが反映されてない！（今更。いや、別にいいけど😅）
文中に再利用ブロックを置いてあり、見出しが含まれている場合。もしかするとその部分の問題が見出しに反映されることがあるかもしれません。
JIN + RTOC の目次スタイル崩れは、見出しを見直してみるのも解決の一手かもしれませんね。（他にも要因がある可能性もあるのでこういう書き方。すみません。）
理由：HTML構造判定に矛盾が起きていたから
RTOC がどういう判断で目次を生成しているのかはわからないので置いておいて。
原因としてはこんなかんじ。
- 再利用ブロック内にあるH2に反応して目次を表示しました。
- なぜか反応したはずのH2をスルーしてしまい、次のH3に反応しました。
- あれ？H3からなんで始まるんだい？えと、H3からだからこのスタイルは・・・ないので思いっきり崩れてしまったと。
まあ、わからんでもない。
記事自体のHTML構造がおかしいわけではないのでご安心を。
HTML構造的には問題なし
一応、HTMLソースを確認した。
当然だけど、再利用ブロック内で指定してあるH2見出しは壊れてない。
記事自体の構造がおかしくなっているわけでもない。
目次というのはあくまで訪問者への利便性を高めるもので、目次と記事内容の構造がくずれているからといって、ペナルティになることもなし。
今回のは、記事本文、目次の直下という場所だから、目次に表示されなくてもいいかなという判断もある。
まとめ：JIN と RTOC の組み合わせ時は
再利用ブロックを見出しと一緒に使うのはやめよう。
おそらく、他のページでもこの再利用ブロックは目次から排除されているはず。
もし目次に表示させたい重要な内容なら、再利用ブロック内にH2見出しを含めてはいけない。
そもそも再利用ブロックは、今回の事例のような使われ方ではなく、あくまで部分的に繰り返すものを再利用するためにある。
同じ内容を何度も使い回すのは SEO 的にもよろしくないので、この運用は真似をしないほうがいいかも。
JIN ＋ RTOC だけか別テーマでも同じか？
これは検証してみないとわからない・・・。
別テーマで利用したH2見出し入りの再利用ブロックは目次に表示されないのか？
・・・やってみろってことよね。だよね。
Cocoon で再利用ブロックを使って目次検証
問題なし！
さすが Cocoon!!
H2 込みの再利用ブロックでも、ちゃんと認識して目次を表示している！！
当然のことながら、次に設置したH3も普通に表示。
やっぱりすごいぞ！Cocooooooon!!
SWELL で再利用ブロックを使って目次検証
安定の問題なし！
当然といえば当然か。さすが SWELL。
余談）プレビューで目次が表示される
は？何言ってるの？と言われるかもだけど。
実は、JIN はプレビュー画面で目次がでない。
Cocoon と SWELL を使ってみて思ったけど、たぶん他の有料テーマもプレビューは普通に表示されるのではないかな。
目次の表示も再利用ブロックが無視されることもなく、ちゃんと表示されるんだ。
結論。
目次がプレビューで出ないのも、再利用ブロックが目次から無視されるのもJINの仕様です。
こうなるものと思っておいて作業しましょう。
あと、他のテーマでも RTOC を導入しているなら同様の問題が起こるかもしれませんね。
WordPress や HTML・CSS の基本は学んでおこう
何も知らずに触るよりも、基本的なことを学んでおくほうが、こういう問題発生したときに自分で解決方法を見つけられることもありますよ。
▼HTMLやCSSの基本的なことを学びたい（初級者）
ポチップ
▼WordPress の基本的なことを学びたい（初級者）
上２冊は、Webデザイン界で有名な Mana さん著。さすがに全ては身につかないけれど、最初の一冊で傍に置いておいて良いかと。
▼HTML や CSS のガイドにオススメの一冊（中級者）
ポチップ
