WordPress 見出し装飾の基本

a-01

テーマが変われば、見出しの記述も変わるが、基本的な書き方は変わらないので、簡単な見出しの装飾方法を説明して行きます。

CSSの記述は変わらない

<h1>の大見出しはタイトルに使うので、基本的には、<h2>からとなります。

私の場合は、<h2><h3>ばかり使ってます。( ̄д ̄)

基本的に以下の4つを覚えておけば、簡単な見出しの装飾は直ぐに作れます。

スポンサーリンク

基本的な見出しの装飾

「border-top」上に線を入れる。
「border-bottom」下に線を入れる。
「border-left」左側に線を入れる。
「border-right」右側に線を入れる。

実際の基本的な書き方を上げるとこの様になります。

solid=1本の実線 #000000=黒

と言う訳で、これは各箇所に黒色で1pxの1本の実線を引きますと言う記述です。

ここで他の線の種類も挙げておきますね。

 dotted  点線
 dashed  破線
 double  2本の実線
 groove  立体的に窪んだ線
 ridge  立体的に隆起した線
 inset  全体が窪んだ様な感じ
 outset  全体が隆起した様な感じ

これを踏まえた上で、私の場合の<h2>見出しを見てみましょう。

私の場合は、青色で左に7pxの縦線と下に1pxの破線を入れている事が分かります。後はフォントサイズを22pxの太線、「margin」「padding」で位置調整を行っています。

.entry-contentで記事のみに反映

これは、テーマによっては異なるかも知れませんが、殆どのテーマは【.entry-content】を頭につける事により、記事内でのみ反映される様になります。

ウィジェットのみに反映

これは、テーマによっていろいろです。大体は<h3>タグを使用しているとは思いますが、クラスは著者により異なるので、調べなくてはなりません。

調べ方は、style.cssのウィジェット部分を調べればいいのですが、ブラウザ上でウィジェット部分を右クリックをして「要素を検証」で調べると速いかも知れません。分からなければ、「Ctrt+F」で「.widget」とか打ち込んでそれらしいものを見つけて、子テーマで変更して確認してください。

ちなみに【ColorMag】の場合は、幾つかあるんですけど

「.widget」「#secondary .widget-title」ここら辺がサイドバーです。この様にフッターも変更したい場合は、同じ要領で変更してください。

スポンサーリンク

シェアする

フォローする

スポンサーリンク