【 WordPress 】見出しをラインやアイコンでカスタマイズしてみる
見出し (タイトル) のデザインには 背景の色・タイトルの文字の色
そして サイドの縦のライン・アンダーのライン・全体を囲う枠など
組み合わせで何通りにでも作ることができるのです。
見出しのデザインをサイトのイメージに合わせてカスタマイズしてみましょう。
見出しの左のラインを消したい場合
カスタマイズする前に知っておきたいのが この ラインを消すというコードです。
サイトのテーマによってはデフォルトの状態で border-left や background に
カラー指定されているものがあります。
今回使用しいているテーマ Luxeritas もデフォルトの見出しはこんな感じでした。
見出しによって文字だけにしたい場合や 色を付けたくない場合などもあると思います。
背景と同じカラーを選択することで消すという方法もありますが、
正式に使うコードはこちら↓
先ほど 消す と表現しましたが 正確には 使用しない(none) という意味ですね。
border 以外の場面でも none を使用する場面がありますので
覚えておくといいでしょう。
それでは 基本形を使用しながらカスタマイズしていきます。^^
見出しのカスタマイズ基本のコード
こちらのサンプルでは left・bottom・ 背景・文字と文字の太さを指定してみました。
これをベースにカスタマイズしていきます。
|
1 2 3 4 5 6 7 8 9 |
/* hタグの色と線*/ .post h2 { border-left: solid 8px #a4d5bd; border-bottom:solid 3px #a4d5bd; background:#f4f4e6; color:#5c9ea5; font-weight:bold; } |
こちらのコードでは .post h2 と指定していますが
これは使用しているテーマによっては h2 だけでいい場合もあります。
かんたんなコードだけで作れるラインのCSS
先ほどのデザインをベースに かんたんなコードだけで作れる見出しをごあんないしていきます。
border-left を利用した鋭角なライン
さきほどの border-left に none; を付ける方法とは逆で
背景と同色を指定し、px で幅を調整することで
鋭角なラインを表現することができました。
|
1 2 3 4 5 6 7 8 9 |
/*left の幅を利用したライン*/ .post h2 { border-left:solid 10px #ffffff; border-bottom:solid 10px #187b99; background:none; color:#000000; font-weight:normal; } |
ここでは background :none; というコードを指定してあります。
もともとの background に色の指定がない場合は、この部分を削除してください。
蛍光ペンのような太いライン
先ほどのアンダーラインと違って、文字にラインがかかっています。
このような蛍光ペンを引いたようなラインは background で作ることができます。
|
1 2 3 4 5 6 7 8 |
/*蛍光ペンのようなライン*/ .post h2 { border:none; background:linear-gradient(transparent 60%, #fff462 0%); color:#696969; font-weight:normal; } |
background と見出しの上下にライン
ラインは四方すべて囲むこともできますし、このように上下に付けることもできます。
|
1 2 3 4 5 6 7 8 9 10 |
/*topとbackground のライン指定*/ .post h2 { border-left:none; border-bottom:solid 2px #a4d5bd; border-top:solid 2px #a4d5bd; background:#fafad2; color:#a4d5bd; font-weight:bold; } |
このラインを二重線にすると またイメージが変わりますね。
dashed（ 破線 ）をつかったライン
基本のラインを太めの破線にしてみました。
|
1 2 3 4 5 6 7 8 9 |
/*border-bottom:dashed の指定*/ .post h2 { border-left:solid 0px #fff; border-bottom:dashed 10px #fff462; background:none; color:#80989b; font-weight:bold; } |
dotted（ 点線 ）をつかったライン
次は 基本のラインを太めの点線にしてみました。
|
1 2 3 4 5 6 7 8 9 |
/*border-bottom:dottedの指定*/ .post h2 { border-left:solid 0px #fff; border-bottom:dotted 10px #a7d28d; background:none; color:#80989b; font-weight:bold; } |
border-left だけのライン
これは とてもシンプルな見出しですね。
|
1 2 3 4 5 6 7 8 9 |
/*border-leftの指定*/ .post h2 { border-bottom:none; border-left:solid 10px #a4d5bd; background:none; color:#80989b; font-weight:bold; } |
Font Awesome のアイコンを見出しに入れる
見出しに Font Awesome のアイコンを付けてみます。
Font Awesome の利用のしかたは こちら ↓
【WordPress】Font Awesome (フォントオーサム) の設定のしかた
Font Awesome (フォントオーサム) 基本的な ICON の使い方
シンプルなアイコンの見出し
シンプルだけど、こんなピンクならとってもかわいいです。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
/*FontAwesomeアイコンの指定*/ .post h2 { border:none; background:none; font-weight:bold; color:#db7093; } h2:before { font-family: FontAwesome; content: "\f138";/*ユニコード*/ font-size: 1em;/*サイズ*/ left: 10;/*アイコンの位置*/ top: 0;/*アイコンの位置*/ padding-right : 15px;/*文字との隙間*/ padding-left:0em; color: #db7093; /*アイコン色*/ } |
白抜きの文字にしてみる
白抜きにすることでイメージがすごく変わりますね。^^
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
/*FontAwesomeアイコンの指定*/ .post h2 { border:none; background:#bbe2f1; font-weight:bold; color:#ffffff; } h2:before { font-family: FontAwesome; content: "\f14a";/*ユニコード*/ font-size: 1em;/*サイズ*/ left: 10;/*アイコンの位置*/ top: 0;/*アイコンの位置*/ padding-right : 15px;/*文字との隙間*/ padding-left:0em; color: #ffffff; /*アイコン色*/ } |
この白い文字は h1 で利用する場合、top ページ・カテゴリのページなど
背景が白い場面では文字が見えなくなってしまいますのでご注意を！！
まとめ
もっと いろいろなコードを使用することによって
おしゃれなデザインの見出しが作れたりしますが、
私は 今回ご紹介したようなシンプルなもので充分なのではないかと考えています。
また、文字（font）を変えるだけでもイメージが全然違ってきます。
色々と試してみてください。
カラーコードは WEB色見本 原色大辞典 さんをいつも参考にさせて頂いています。
良かったら 一度ご覧になってみてください！！