ブログ管理

WING(AFFINGER5)用プラグインSUGOI MOKUJI(すごいもくじ)でテキストの色が変わらない時の対処方法

投稿日:

プラグインSUGOI MOKUJI(すごいもくじ)でテキストの色が変わらない時の対処方法

SEOに強く収益が発生しやすいと好評のWordPressのテーマ「WING(AFFINGER5)」で利用ができる有料プラグイン

「SUGOI MOKUJI(すごいもくじ)」でオプションカラーを変更しても文字の色が変わらない時の対処法を紹介しています。

プラグインの CSS スタイルを読み込まない」ようにすればいいけど

プラグインのCSSスタイルのデザインを保持したままでテキストの色を変えたい

っていう人向けの対処法です。

SUGOI MOKUJI(すごいもくじ)でテキストの色が変わらない現象

WING(AFFINGER5)はCSSがわからない人でも、タイトルや文字などの色やレイアウトなどを簡単に変更できるWordPressのテーマなので

もちろん、SUGOI MOKUJI(すごいもくじ)も簡単に色を変えることができます。

 

WordPressの管理ページで「外観」から「カスタマイズ」をクリックします。

Wordpress管理画面

 

左メニューから「オプションカラー」をクリック。

Wordpress管理画面

 

左メニューを下の方に「目次プラグイン(すごいもくじ)」の枠線、背景色や文字の色などをカスタマイズする欄があります。

好みのデザインにカスタマイズします。

Wordpress管理画面のすごいもくじのカスタマイズ

 

ほとんどのカスタマイズの項目は反映されるのですが、2階層の目次(おそらくH3タグにあたる見出し)のテキストや下線(点線)の色が黒のまま変化しません

目次プラグイン(すごいもくじ)をカスタマイズ

 

SUGOI MOKUJI(すごいもくじ)でテキストの色が変わらない時の対処方法

実は、SUGOI MOKUJI(すごいもくじ)のプラグインのCSSに、この部分だけ色が固定で記述されているのが原因でカスタマイズのオプションカラーの変更で反映されません。

「SUGOI MOKUJI(すごいもくじ)」の管理・設定ページで「プラグインの CSS スタイルを読み込まない場合はチェック(フォントサイズ指定を除く)」にチェックを入れます。

SUGOI MOKUJI(すごいもくじ)の管理・設定ページ

 

すると以下のようにすべてのテキストの色が変化しますが、デザインも変化してしまいます。

アイコンや数字の表示・非表示もカスタマイズのオプションカラーで選択は可能です。

SUGOI MOKUJI(すごいもくじ)」のカスタマイズ後

 

プラグインのデザインのままテキストの色を変えたい場合は、プラグインSUGOI MOKUJI(すごいもくじ)のCSSを修正します。

 

プラグインのCSSファイルを直接触るのはちょっと不安

 

そんなあなたに、こんな方法はどうでしょうか?

SUGOI MOKUJI(すごいもくじ)のプラグインのCSSをコピー修正したものをカスタムCSSとして読み込ませる。

 

SUGOI MOKUJI(すごいもくじ)のプラグイン

目次のデザインのCSSはプラグインフォルダ(st-toc)の中の「assets」→「css」フォルダにある style.css です。

 

style.cssに記述されている内容を全てコピーをして、カスタマイズの追加CSSやプラグインのSimple Custom CSS & JSなどにペーストします。

参考Simple Custom CSS and JSの使い方

 

これで、SUGOI MOKUJI(すごいもくじ)の設定ページで「プラグインの CSS スタイルを読み込まない場合はチェック(フォントサイズ指定を除く)」にチェックを入れていてもプラグインのデザインで表示されます。

ペーストしたCSSを修正すればいいのでプラグインのCSSファイルを触ることもありません。

コピペしたCSSの106行目くらいにある以下の記述を修正します。

以上です。

 

これで、プラグインのデザインを保持しつつすべての色のカスタマイズをオプションカラーで出来るようになりました。

まとめ

もくじのデザインってあまり重要ではなさそうだけど、ほかとちょっと違ったりするだけで印象が変わると思います。

あとは自己満足な部分もあるけど、ブログなら自己満足がないと楽しくないですよね!

CSSを全く知らない人にはちょっと触りたくないところかもしれませんが、これを機にCSSを勉強してみてはいかがでしょうか?

そんなに難しくないと思います。

 

このブログのテーマはWING(AFFINGER5)です。

WING(AFFINGER5)はSEO対策に強いと言われているWordPressのテーマです。

有料のテーマだけど1度購入すると使いまわせるので2つ目以降のブログでは無料で使えます

複数のブログを持っていたり、計画がある人にはとってもお得です。

ビジュアルエディターだけで文字に色やマーカーをつけたり、枠で囲んだり、会話風のふきだしも簡単にできちゃいます!

WordPressテーマ 「WING(AFFINGER5)」

-ブログ管理
-, ,

Copyright© シエロ・しんふぃん , 2018 All Rights Reserved.