WordPress【ルクセリタス】見出しラインを無くす方法と 簡単なコードで作る見出しラインのCSS
見出し (サブタイトル)の左側に 縦のラインが入っていたり 背景に色がついていたり
デザインを設定することで サイト全体のイメージを変えることが出来ます。
背景の色・タイトルの文字の色 そして サイドのラインの組み合わせで
何通りにでも デザインを カスタマイズすることができるのです。
こちらの 見出しのイメージ画像では 簡単なコードだけで 見出しを3パターン作ってみました。
また、それぞれの場所を示すコードを表示してみました。
ラインを 縦・横・囲み枠にする。また、ラインの幅を変更するなど これだけでも見出しの見た目がずいぶん変わります。
見出しの左のラインを消したい！！
サイトのテーマによっては デフォルトの状態で
border-left や background に カラー指定されているものがあります。
今回使用しいているテーマ Luxeritasも デフォルトの見出しはこんな感じでした。
見出しによって文字だけにしたい場合や 色を付けたくない場合などもあると思います。
背景と同じカラーを選択することで消すという方法もありますが、
正式にはこちら↓
先ほど 消す と表現しましたが 正確には 使用しない(none) という意味ですね。
背景も同様で デフォルトで背景指定されている場合などは
background:none;というコードをCSSに追加することで 背景色を無くすことが出来ます。
かんたんなコードだけで作れるラインのCSS
基本の見出しデザインをベースに かんたんなコードだけで作れる見出し案をいくつか作ってみました。
コピぺできる CSSコードも参考にしてみてください。
こちらの ルクセリタステーマでは 見出しの指定を " .post h2 “ としていますが
使用しているテーマによっては " h2 “ など 違うプロパティになる場合もあります。
基本の見出しデザイン
基本のデザインでは 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; } |
border-left を利用した鋭角なライン
さきほどの border-left に none; を付ける方法とは逆で
背景と同色を指定し、px で幅を調整することで 鋭角なラインを表現することができました。
|
1 2 3 4 5 6 7 8 |
/*left の幅を利用したライン*/ .post h2 { border-left:solid 10px #ffffff; border-bottom:solid 10px #187b99; color:#000000; font-weight:normal; } |
蛍光ペンのような太いライン
先ほどのアンダーラインと違って、文字にラインがかかっています。
このような 蛍光ペンを引いたようなラインは 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 |
/*border-bottom:dashed の指定*/ .post h2 { border-left:solid 0px #fff; border-bottom:dashed 10px #fff462; color:#80989b; font-weight:bold; } |
dotted（ 点線 ）をつかったライン
次は 基本のラインを太めの点線にしてみました。
|
1 2 3 4 5 6 7 8 |
/*border-bottom:dottedの指定*/ .post h2 { border-left:solid 0px #fff; border-bottom:dotted 10px #a7d28d; color:#80989b; font-weight:bold; } |
border-left だけのライン
これは とてもシンプルな見出しですね。
|
1 2 3 4 5 6 7 |
/*border-leftの指定*/ .post h2 { border-left:solid 10px #a4d5bd; color:#80989b; font-weight:bold; } |
Font Awesome のアイコンを見出しに入れる
見出しに Font Awesome のアイコンを付けてみます。
Font Awesome の利用のしかたは こちら ↓
プラグインなし！Font Awesome (ﾌｫﾝﾄｵｰｻﾑ) アイコンを ルクセリタスで使う方法
Font Awesome (フォントオーサム) 無料 icon の基本的な使いかた【ルクセリタス】
シンプルなアイコンの見出し
シンプルだけど、こんなピンクならとってもかわいいです。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
/*FontAwesomeアイコンの指定*/ .post h2 { border: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 ページ・カテゴリのページなど
背景が白い場面では文字が見えなくなってしまいますのでご注意を！！
以上、WordPress【ルクセリタス】見出しラインを無くす方法と 簡単なコードで作る見出しラインのCSSでした！
カラーコードは WEB色見本 原色大辞典 をいつも参考にさせて頂いています。
良かったら 一度ご覧になってみてください！！