THETHORで同一サイズの見出しを複数使用する方法!!

 
マーシー
この記事ではTHETHORで【同一サイズの見出しを複数使用する方法】について紹介しているよ!!

同じ投稿内で「h2」のデザイン違いの見出しを使用したい場合や、投稿ページと固定ページで見出しデザインを変更したい場合に役立つ方法です。

同一サイズの見出しを使い分ける

同一サイズの見出しを複数使用するには、CSSのセレクター名を変えることでデザイン毎に使い分けることができます。

上記のように「h2」のあとに「.○○○」という感じでCSSのセレクター名を追加記載します。自分が管理しやすい名称であれば何でもOK。「h3」「h4」の場合も同様です。

CSS・HTMLコードの参考例

CSSコード参考例

上記は参考のCSSコードです。通常は「h2」というセレクター名なのですが、同サイズでデザインを複数使い分けるために「h2.orange」という名称に変更しています。

このように「h2.○○○」とセレクター名を追加することで同一サイズのデザインを複数使い分けることができます。

HTMLコード参考例

次に参考のHTMLコードです。CSSコードで追加したセレクター名を「class」を用いて記載します。同一サイズの見出しであっても「class」を使用することで、用途に合わせて使い分けができます。

見出しデザインを複数使用する方法
・デザインはCSSコードで作成して「セレクター名」で仕分けする。
・HTMLコードの「class」を使用してデザインを反映させる。

CSS・HTMLコードの記載方法

CSSコード記載場所

【ダッシュボード】

【外観】

【カスタマイズ】

【追加 CSS】

追加CSSの画面まで進んだらCSSコードを入力します。「見出しデザイン」などで検索するとWEB上に様々なデザインが紹介されていますので、気に入ったデザインのCSSコードをコピペすると簡単です。

CSSコードをコピペした段階ではCSSコードの「セレクター名」が「h2」になっていると思いますので「h2.○○○」という感じで「セレクター名」を変更します。複数のデザインを使用する場合はこの作業の繰り返しでデザインのCSSコードを増やします。

HTMLコード記載場所

投稿画面の「カスタムHTML」を使用します。「h2 class=”○○○”」という感じで「○○○」の部分にCSSコードの「セレクター名」を記入します。