【 WordPress 】見出しをラインやアイコンでカスタマイズしてみる

見出し (タイトル) のデザインには 背景の色・タイトルの文字の色
そして サイドの縦のライン・アンダーのライン・全体を囲う枠など
組み合わせで何通りにでも作ることができるのです。
見出しのカスタマイズに使用するプロパティの解説

見出しのデザインをサイトのイメージに合わせてカスタマイズしてみましょう。

見出しの左のラインを消したい場合

カスタマイズする前に知っておきたいのが この ラインを消すというコードです。

サイトのテーマによってはデフォルトの状態で border-leftbackground に
カラー指定されているものがあります。
今回使用しいているテーマ  Luxeritas  もデフォルトの見出しはこんな感じでした。
デフォルトの状態の見出しのラインのイメージ図

見出しによって文字だけにしたい場合や 色を付けたくない場合などもあると思います。
背景と同じカラーを選択することで消すという方法もありますが、
正式に使うコードはこちら↓
見出しサイドに色をつけない場合のコードを画像で解説
先ほど 消す と表現しましたが 正確には 使用しない(none) という意味ですね。

border 以外の場面でも none を使用する場面がありますので
覚えておくといいでしょう。

それでは 基本形を使用しながらカスタマイズしていきます。^^

見出しのカスタマイズ基本のコード

基本の見出しカスタマイズのサンプル画像
こちらのサンプルでは  left・bottom・ 背景・文字と文字の太さを指定してみました。
これをベースにカスタマイズしていきます。

注意

こちらのコードでは .post h2 と指定していますが
これは使用しているテーマによっては h2 だけでいい場合もあります。

かんたんなコードだけで作れるラインのCSS

先ほどのデザインをベースに かんたんなコードだけで作れる見出しをごあんないしていきます。

border-left を利用した鋭角なライン

見出しカスタマイズのサンプル画像-leftの白を利用して鋭角なラインにする
さきほどの border-left に none; を付ける方法とは逆で
背景と同色を指定し、px で幅を調整することで
鋭角なラインを表現することができました。

ここでは background :none; というコードを指定してあります。
もともとの background に色の指定がない場合は、この部分を削除してください。

蛍光ペンのような太いライン

見出しカスタマイズのサンプル画像‐蛍光ペンのような太めのラインを指定
先ほどのアンダーラインと違って、文字にラインがかかっています。
このような蛍光ペンを引いたようなラインは background で作ることができます。

background と見出しの上下にライン

見出しカスタマイズのサンプル画像‐background と見出しの上下にライン
ラインは四方すべて囲むこともできますし、このように上下に付けることもできます。

このラインを二重線にすると またイメージが変わりますね。

dashed( 破線 )をつかったライン

見出しカスタマイズのサンプル画像‐波線を使ってステッチのようなラインに
基本のラインを太めの破線にしてみました。

 dotted( 点線 )をつかったライン

見出しカスタマイズのサンプル画像‐太めのドットで可愛いライン
次は 基本のラインを太めの点線にしてみました。

border-left だけのライン

見出しカスタマイズのサンプル画像‐border-left だけの指定
これは とてもシンプルな見出しですね。

 Font Awesome のアイコンを見出しに入れる

見出しに Font Awesome のアイコンを付けてみます。
Font Awesome の利用のしかたは こちら ↓
【WordPress】Font Awesome (フォントオーサム) の設定のしかた
 Font Awesome (フォントオーサム) 基本的な ICON の使い方

シンプルなアイコンの見出し

見出しカスタマイズのサンプル画像‐アイコンと文字だけのシンプルな見出し
シンプルだけど、こんなピンクならとってもかわいいです。

白抜きの文字にしてみる

見出しカスタマイズのサンプル画像‐backgroundに色を付けて白抜きの文字にする
白抜きにすることでイメージがすごく変わりますね。^^

注意

この白い文字は h1 で利用する場合、top ページ・カテゴリのページなど
背景が白い場面では文字が見えなくなってしまいますのでご注意を!!

まとめ

もっと いろいろなコードを使用することによって
おしゃれなデザインの見出しが作れたりしますが、
私は 今回ご紹介したようなシンプルなもので充分なのではないかと考えています。

また、文字(font)を変えるだけでもイメージが全然違ってきます。
色々と試してみてください。

カラーコードは WEB色見本 原色大辞典 さんをいつも参考にさせて頂いています。
良かったら 一度ご覧になってみてください!!