スワローでRTOCが正しく表示されない?コピペと解決方法まとめ!

スワローカスタマイズ 生き方

  • スワローでRTOCを使うとエラーになる
  • カスタマイズが正しく表示されない

このような悩みにお答えします。

まさやん
ぼくはスワローというテーマを8ヶ月、愛用しています!


ブログのカスタマイズをしていて、スワローでRTOCを使った際にエラーが起きたのか、なぜか正しく表示されない…

その後いくつかの方法で解決できたので、原因とあわせてお伝えしていきたいと思います。

ぜひ、スワローを使っているみなさんのお役に立てればと思います。

この記事をよむメリット

・RTOCというプラグインとの競合から不具合がなくなる

・カスタマイズが正しく表示される

スワローでRTOCを使ったときにうまく表示されない

悩むこども


スワローは、プロブロガー八木仁平さん監修のもと開発されたWordPressテーマ。

洗練されたデザインが特徴でかっこよく、コスパもすばらしいです。

そんなスワローですが、もくじをもっとカスタマイズしてみたいと思い

RTOC(Rich Table of Contents)」というプラグインを発見!



もくじに不具合がでて表示される


でも異変が…

プラグインを有効化してみても、なぜかこんな感じでエラーが起きてしまいました。

RTOCのエラー画面


なぜか変なところに⚫︎が出現したり…

RTOCのエラー画面


設定を変えても数字がおかしかったり、丸で囲われてしまったり…



どれだけいじってみても正常にカスタマイズされませんでした。



それには、仕方のない原因があったんです。


スワローとRTOCが競合しているのが原因


いくら解決策を調べても出てきませんでした。

そこで、RTOCの開発をされた「ひつじ」さんに直接DMで聞いてみると

ひつじさんとのやりとり


ということで

スワローを開発した「OPENCAGE」さんにも問い合わせてみます。


やはりテーマとRTOCが競合していたことがわかりました。

つまり、スワローを使っている人は

みんな同じようにエラーが起きてしまうということだったんです。


コピペで表示の不具合を改善

迷路をゴールする絵
まさやん
ここからは、コピペするだけで簡単な改善方法をお伝えしていきます。


実際のwordpressの画面をみながら、流れにそって進めていきます。


STEP①テーマエディターを開く


WordPressを開いて

「外観」→「テーマエディター」と進みます。

wordpress画面1



STEP②子テーマを選択


「編集するテーマを選択」で子テーマを選択してください。

wordpress画面2


※子テーマをダウンロードしていない場合は、開発元のOPENCAGE公式サイトからやり方を確認できます。

>>子テーマをインストールする方法



STEP③style.cssにコピペ


下記のCSSを子テーマのstyle.cssに記述することで、目次(RTOC)での表示不具合が改善されます。

.rtoc-mokuji-content .mokuji_ol > .rtoc-item::before,

.rtoc-mokuji-content .decimal_ol > .rtoc-item:before {

 border: none;

 transform: none;

}

.rtoc-mokuji-content .decimal_ol.level-1 > .rtoc-item::before {

 content: counter(rtoc-decimal-1, decimal-leading-zero) “” !important;

}

.rtoc-mokuji-content .mokuji_ol.level-1 > .rtoc-item::before {

 content: counter(rtoc-li) “. ” !important;

}

.rtoc-mokuji-content ul li:before {

 content: none;

}


まさやん
下のように、コピペで貼り付ければOKです!
wordpress画面3


最後に「ファイルを更新」をクリックして完了になります。



それでもうまくいかない場合の解決策

疑問点が多い女性


やってみたけど、なぜか反映されない…

まさやん
ぼくは以前そういう思いをして困りました。

この先では、そんなときに考えられる要因と、解決策をお伝えします。


キャッシュの削除を実行

キャッシュとは?
1度表示したウェブページのデータをブラウザやサーバーに保存しておくことで、再び表示するときに早く使える仕組みのこと。

簡単にいうと

間違えたカスタマイズ古いデータがサーバーに残っているせいで


新しく変更したデータが反映されないということです。



この問題は、プラグインを使ってサクッとできます。

>>【2021年最新】WP Fastest Cacheの使い方・設定方法(不具合対処も紹介)



こちらでわかりやすく解説されているので参考にしてみてください。


ブラウザキャッシュの実行


キャッシュの削除をしたのに、それでもなぜか反映されていない…

まさやん
それなら「ブラウザキャッシュ」を実行しましょう。


どういうことかというと

使用しているブラウザ(safari、googleなど)に以前のデータが残っていて邪魔をしているという状態。

あなたが使っているパソコンやスマホにデータが残っているせいで、古いカスタマイズが反映され続けているかもしれません。

>>【Mac版】ブラウザキャッシュの削除方法


OPENCAGEに問い合わせてみる


OPENCAGEの公式サイトにある「お問い合わせ」を利用することも可能です。

とっても親切に対応してくれます。手厚いサービスで、今回は感謝しかありません。

だれでもみんな最初はブログ初心者。

調べてもわからないことが必ずありますし、まわりに助けを求めるのも一つの手。

完全無料で利用できるので、スワローユーザーは知っておいて損はありません。

>>使い方に関するお問い合わせ


スワローでRTOCが表示されないときのまとめ

光を見つけた瞬間


いかがでしたでしょうか?

RTOCは、とってもおしゃれな、もくじカスタマイズプラグイン。

ですが「スワロー」との競合が原因で、正しく反映されていませんでした。

この記事では、コピペでできる解決策以外に、それでも改善しない場合の方法をいくつか、まとめてご紹介しました。

まさやん
ブログカスタマイズ、一緒に頑張っていきましょう!


以前のぼくのように、同じような悩みをもった人のお役に立てれば幸いです。