WordPressで見出しhタグをCSSで装飾してタイトルを見やすく方法

wordpress使い方




WordPressでh1タグを装飾して見やすくする方法

 

WordPressのテーマによっては、見出しのタイトル部分(h1タグ)が見にくい場合があります。そんな時に、上の図のように吹き出しで囲ったりして、hタグを装飾すれば見やすくなります。今回はhタグをcssで装飾して見出し部分を見やすくする方法をご紹介します。応用すれば簡単にh2などのタグも装飾出来たり、オリジナルのタグをhタグ以外のタグを作ってデザインを反映させることもできます。

 

 

 

CSSの装飾を選ぶ

こちらのサイトにサンプルがありますので、お好きなデザインを選んでコピーします。

CSSで見出しタイトルのデザインに使えるシンプルなサンプル

 

 

 

style.cssに貼り付ける

先ほどコピーしたCSSのコードをstyle.cssファイルの一番下にペーストします。

 

※ソースコードでh1と記述されている部分をh2に変えると、h2タグの部分のデザインが変わります。オリジナルのタグにした場合は、記事を書く時にテキスト表示にしてから<h>タグの内側にオリジナルタグを記述します。

 

 

 

サイトタイトルやカテゴリーなど見出しタイトル以外の場所にもデザインが反映されてしまう場合の対処方法

このような場合は、サイト内部のあちこちにhタグが使われていると考えられます。狙った場所以外もデザインが反映されてしまいますので、CSSにhタグを使わずオリジナルタグを使います。

こちらのサイトのCSSの記述では、h1となっている部分をオリジナルタグにします。

 

 

 

オリジナルタグの使い方

(オリジナルタグの例)

CSSのh1の部分をaaaと書き換えて、HTMLで装飾を反映したい文字を<aaa>ああああああああああああ</aaa>として囲います。

 

WordPressの場合

固定ページや投稿ページから、ビジュアルではなくテキストで<h>タグの内側に記述します。

wordpressでテキスト記述する方法

 

(例)

<h2><aaa>ああああああああああああ</aaa></h2>

 

 

 




よく読まれている記事

wordpress使い方

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です