xeoryの見出し変更・カスタマイズできない場合の対策

どうも。

長らくずっとワードプレスのテーマ「xeory」の見出し（h3）のデザインをCSSをいじってはいたものの変更・カスタマイズできなかったのですが、先日やっとできるようになった私laboterです。

見出しのカスタマイズに関しては、他サイトを参考にしてその通り実践しても全然できなかったので本当に困っていたのですが、それができるようになって今非常にスッキリしております。

ということで今回はワードプレスのテーマ「xeory」の見出し変更・カスタマイズできない場合の対策について、自身の経験談も交えてご紹介していきたいと思います。

まずCSSが反映されない主な原因は下記のようなものがあります。

詳しくは過去記事「cssが反映されない原因は？サーバー側のキャッシュ？」で詳しく解説しています。

文法ミスの典型的な例としては、CSS波括弧の閉じ忘れやセミコロンの付け忘れ・書き間違いなどがあります。文法ミスがあるのであれば修正するようにしましょう。

またサーバー側のキャッシュによる問題に関しては、キャッシュを削除すればよいだけなので簡単です。

それで特に初心者の方にとって最も厄介だと思われるのが>「CSSの指定の優先順位による問題」です。

これは「h2」→「.main h2」→「.container.main h2」とセレクタをより詳しく記述したほうが優先的にCSSが適用されるというルールによって起こる問題です。

先に触れた文法ミスやキャッシュによる原因に対して対策したけれども、やっぱりh2やh3といった見出しが変更・カスタマイズされない場合は、これによる問題が原因として考えられます。

良くワードプレスのテーマ「xeorybase」の見出しを変更するには、h2ならば「.post-content h2」、h3ならば「.post-content h3」というように、「.post-content 指定の見出し」でカスタマイズができるというように解説されてあります。

そして私もその通りにやったのですが、これっぽっちも思い通りにCSSが反映されませんでした。

全く反映されないわけではないのですが、何故か何回修正しても指定していない余計なデザインが表示されるのです。

私の場合は下記のように、何も指定していないのに見出しの左側に何故かグレーの線が現れてしまっていました。

xeory 見出し　変更　カスタマイズ　できない

この左側のグレーの線が指定してもいないのに何故か出てきます。

しかもCSSで削除する記述を施しても消えません。

下の残しておきたい青線は消せるのに、肝心の左側のグレーの線だけが消せないのです。

ということはそもそも既にどこか別の個所で指定されているのんじゃないの？

と言うことが頭によぎったので早速「style.css」を調べてみると・・・

xeory 見出し　変更　カスタマイズ　できない　原因

「.post-content h3」以外にの下の方に何やら「body.color01 .post-content h3」というh3を指定した記述が存在するではありませんか！（h2もあります）

しかもここに左側にグレーの線を表示させるコード（border-left: #グレーの色;）があったのです！！

こちらの方が「.post-content h3」よりも具体的にセレクタを記述してあるので、当然こちらで書いてあるCSSの方が優先的に記述されるということになります。

つまりここの部分を修正すれば、思い通りにカスタマイズできる可能性があると考えられるので、実際にセレクタを「.post-content h3」から「body.color01 .post-content h3」に変更してプロパティと値を指定したところ・・・

このように今まで全く消せなかった左側の線が消えて、見事思い通りにカスタマイズさせることに成功しました！

忠犬パチ公

パチパチパチパチ

ワードプレス　xeory CSSを反映するための設定

ちなみにカスタマイズ手順については、ワードプレスの左側メニューの「外観」＞「カスタマイズ」＞「追加CSS」からbody.color01 .post-content h3 ｛～お好みのデザインコード記述～｝を書いたり、「テーマ編集」からstyle.cssをいじるなどすることでできます。

（追記）
見出しのデザインを「.post-content h～」だけで指定できない原因は、どうやら初期設定のカラースキムを変えている場合に起こるようです。

私の場合は何故か知らないうちにカラースキムを緑に変えていたようで、見出しのデザインを「.post-content h～」の指定だけで変えることができなかったようです。

ちなみにカラースキムが赤ならば「body.color02 .post-content h～」オレンジならば「body.color03 .post-content h～」ピンクならば「body.color04 .post-content h～」と変えると解決するかもしれません。

結論

というわけでxeoryで見出しが変更できない場合で、文法ミスでもキャッシュによる問題でもないと思われる場合は、セレクタを「.post-content h3」から「body.color01 .post-content h3」に変更してCSSを指定すると解決するかもしれません。