OceanWPで、あえて記事内の見出しを固定する方法

Elementorを使って自由に装飾できるWordPressテーマ・OceanWPで、あえてElementorを使わず見出しのデザインを固定する方法を書いています。

という方にはお役に立てると思います。

固定化せずに複数の見出しデザインをCSSに書いて使い分けたい方には、下のリンク先の記事に書いた方法が向いています。

ここはTHE SONICというテーマに変えていて、今OceanWPを使っているのはサブドメインで運用している特化ブログなので
このブログのソースからすぐに実物を確認いただけないところがちょっと悲しいですね。

見出しのデザインをあえて固定する方法

冒頭で書いた通り、Elementorは使いません。
CSSとHTMLを使います。

基本的なことの確認ですが
見出しを固定化するには、H2やH3と打ったらそのデザインが出てくるようにする必要があります。

しかし、普通にやったらコメント欄など記事外のものにまで反映されてしまいます。
そのため記事内限定で指定しなければなりません。

OceanWPで、記事内の見出しのデザインを指定しているのは【.entry-content】。
見出しデザインを記事内限定で固定化するには、この 【.entry-content】 を使います。

使いたいデザインに 【.entry-content H〇】 とつけて、外観→カスタマイズと進み
Custom CSS/JSに記入します。

〇には設定したい見出しの数字を入れます。H2やH3などです。
H2に設定したいなら 【.entry-content H2】と書きます。

.entry-content h2{
    (ここからは設定したいものによって違うので略)

beforeやafterなどありますが、おなじところを構成するものには全てつけます。

書き込むのは子テーマの【style.css】ではなく、子テーマの外観→カスタマイズ内にある【Custom CSS/JS】です。
前者だと反映されない場合があります。私が触った時は全く反映されませんでした。

見出しのデザインは自由に変えたい場合

Elementorで自由に作れるOceanWPの場合、固定化するよりこっちのほうが向いていると思います。

手順はこちらの記事でどうぞ。

【h2】【h3】などとつけて記述していくと、デザインが1つだけになってしまうので
OceanWPをはじめとしたElementorを使って作り上げていくタイプのテーマにある、自由に設定できる良さは損ないたくない方にはこちらがおすすめです。

それだけでなく、記事エリア外の見出しに変更がかかるのを防ぐこともできます。

同じ数字は同じ見出しでいいと思っている方・なんでもいいからササッと全部設定したい方には、細かく設定しないといけなくなるので向きませんが
全てを統一したくない・用途に応じてデザインを変えたい方には役立つ方法です。