WordPress【ルクセリタス】見出しラインを無くす方法と簡単なコードで作る見出しラインのCSS

見出し (サブタイトル)の左側に縦のラインが入っていたり背景に色がついていたり
デザインを設定することでサイト全体のイメージを変えることが出来ます。

背景の色・タイトルの文字の色そしてサイドのラインの組み合わせで
何通りにでもデザインをカスタマイズすることができるのです。

こちらの見出しのイメージ画像では簡単なコードだけで見出しを3パターン作ってみました。
また、それぞれの場所を示すコードを表示してみました。

ラインを縦・横・囲み枠にする。また、ラインの幅を変更するなどこれだけでも見出しの見た目がずいぶん変わります。

contents - 目次 -

1. 見出しの左のラインを消したい！！
2. かんたんなコードだけで作れるラインのCSS
3. Font Awesome のアイコンを見出しに入れる
- 3.1. シンプルなアイコンの見出し
- 3.2. 白抜きの文字にしてみる

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

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

見出しによって文字だけにしたい場合や色を付けたくない場合などもあると思います。
背景と同じカラーを選択することで消すという方法もありますが、
正式にはこちら↓

先ほど消すと表現しましたが正確には使用しない(none) という意味ですね。

背景の場合も同じ！！

背景も同様でデフォルトで背景指定されている場合などは
background:none;というコードをCSSに追加することで背景色を無くすことが出来ます。

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

基本の見出しデザインをベースにかんたんなコードだけで作れる見出し案をいくつか作ってみました。
コピぺできる CSSコードも参考にしてみてください。

注意

こちらのルクセリタステーマでは見出しの指定を " .post h2 “ としていますが
使用しているテーマによっては " h2 “ など違うプロパティになる場合もあります。

基本の見出しデザイン

基本のデザインでは left・bottom・背景・文字と文字の太さを指定してみました。

/* hタグの色と線*/
.post h2 { 
border-left: solid 8px #a4d5bd;
border-bottom: solid 3px #a4d5bd;
background:#f4f4e6;
color:#5c9ea5;
font-weight:bold; 
}

/* 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 で幅を調整することで鋭角なラインを表現することができました。

/*left の幅を利用したライン*/
.post h2 { 
border-left:solid 10px #ffffff;
border-bottom:solid 10px #187b99;
color:#000000;
font-weight:normal; 
}

/*left の幅を利用したライン*/

.post h2 {

border-left:solid 10px #ffffff;

border-bottom:solid 10px #187b99;

color:#000000;

font-weight:normal;

}

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

先ほどのアンダーラインと違って、文字にラインがかかっています。
このような蛍光ペンを引いたようなラインは background で作ることができます。

/*蛍光ペンのようなライン*/
.post h2 { 
border:none;
background:linear-gradient(transparent 60%, #fff462 0%);
color:#696969;
font-weight:normal; 
}

/*蛍光ペンのようなライン*/

.post h2 {

border:none;

background:linear-gradient(transparent 60%, #fff462 0%);

color:#696969;

font-weight:normal;

}

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

ラインは四方すべて囲むこともできますし、このように上下に付けることもできます。
このラインを二重線にするとまたさらにイメージが変わります！

/*topとbackground のライン指定*/
.post h2 { 
border-left:none;
border-bottom:solid 2px #a4d5bd;
border-top:solid 2px #a4d5bd;
background:#fafad2;
color:#a4d5bd;
font-weight:bold; 
}

/*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（破線）をつかったライン

基本のラインを太めの破線にしてみました。

/*border-bottom:dashed の指定*/
.post h2 { 
border-left:solid 0px #fff;
border-bottom:dashed 10px #fff462;
color:#80989b;
font-weight:bold; 
}

/*border-bottom:dashed の指定*/

.post h2 {

border-left:solid 0px #fff;

border-bottom:dashed 10px #fff462;

color:#80989b;

font-weight:bold;

}

dotted（点線）をつかったライン

次は基本のラインを太めの点線にしてみました。

/*border-bottom:dottedの指定*/
.post h2 { 
border-left:solid 0px #fff;
border-bottom:dotted 10px #a7d28d;
color:#80989b;
font-weight:bold; 
}

/*border-bottom:dottedの指定*/

.post h2 {

border-left:solid 0px #fff;

border-bottom:dotted 10px #a7d28d;

color:#80989b;

font-weight:bold;

}

border-left だけのライン

これはとてもシンプルな見出しですね。

/*border-leftの指定*/
.post h2 { 
border-left:solid 10px #a4d5bd;
color:#80989b;
font-weight:bold; 
}

/*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 の基本的な使いかた【ルクセリタス】

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

シンプルだけど、こんなピンクならとってもかわいいです。

/*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; /*アイコン色*/
}

/*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; /*アイコン色*/

}

白抜きの文字にしてみる

白抜きにすることでイメージがすごく変わりますね !

/*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; /*アイコン色*/
}