見出しをデザイン！CSSカスタマイズの基本｜縦ラインを無くしたり簡単なコードでのライン作成！

見出し ( サブタイトル ) の左側に縦のラインが入っていたり背景に色を付けたりできます。

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

contents - 目次 -

1. 基本のコードで作れるラインのCSS
- 1.1. 基本の見出しデザイン
2. 見出しの左のラインを消したい！！
3. かんたんなアレンジで作るライン
4. 蛍光ペンを引いたようなライン
5. Font Awesome のアイコンを見出しに入れる
- 5.1. シンプルなアイコンの見出し
- 5.2. 白抜きの文字にしてみる

基本のコードで作れるラインのCSS

見出しには大見出し、中見出し、小見出しと内容の重要度に合わせて使い分ける必要があります。

使い分けするためにもカスタマイズは必要な項目になりますよね。

見出しについての詳しい内容は別記事でまとめています。
Webサイトの基本【 hタグ】記事タイトル / 見出しについてのまとめ【 SEO対策】

注意

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

基本の見出しデザイン

基本的にラインは見出しも記事のアンダーラインなどに使用する場合も同じ border というCSSコードを使用します。

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

サイトのテーマによってはデフォルトの状態で
border-left や background にカラー指定されているものがあります。

今回使用しいているテーマ Luxeritasもデフォルトの見出しはこんな感じでした。

これを画像下のように文字と縦ラインをカスタマイズした場合のCSSはこちらです。

/*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;

}

border の left , right , top , bottom それぞれに線種・線の幅・色を指定することで
多様なアレンジが可能になります。

border の使いかたについては囲み枠のカスタマイズで詳しくまとめていますので参考にしてみてください！
【囲み枠】BOXの作り方。基本のきほんからの CSSとHTML

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

見出しによって文字だけにしたい場合や色を付けたくない場合などもあると思います。

背景と同じカラーを選択することで消すという方法もありますが、正式には “none" を使用します。

border-left:none; を必要なコードに追加で指定します。

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

かんたんなアレンジで作るライン

基本形をベースに簡単なCSSコードでアレンジしていきます。

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 と見出しの上下にライン

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

/*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 (破線)や dotted (点線)をつかったライン

基本のラインを太めの破線や点線にしただけの簡単なアレンジです。

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

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

.post h2 {

border-left:none;

border-bottom:dashed 10px #fff462;

color:#80989b;

font-weight:bold;

}

ドットも同じ要領で dashed 部分を dotted に変更するだけです。

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

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

.post h2 {

border-left:none;

border-bottom:dotted 10px #a7d28d;

color:#80989b;

font-weight:bold;

}

蛍光ペンを引いたようなライン

ちょっとコードが複雑になりますがよりデザイン性が高いラインを作成することができました！

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

先ほどのアンダーラインと違って、文字にラインがかかっています。
このような蛍光ペンを引いたようなラインは 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;

}

斜線のライン

蛍光ペンのコードの上級編ラインを斜線にします。

/*見出し2に斜線を指定*/
.post h2 {
border-left:none;
background-image:repeating-linear-gradient(-45deg,#db7093,#db7093 2px,transparent 2px,transparent 5px);
}

/*斜線ラインの位置を調整*/
.post h2 {
background-size: 100% 0.4em;
padding-bottom: 0.9em;
background-position: 0 center;
background-repeat:no-repeat;
}

/*見出し2に斜線を指定*/

.post h2 {

border-left:none;

background-image:repeating-linear-gradient(-45deg,#db7093,#db7093 2px,transparent 2px,transparent 5px);

}

/*斜線ラインの位置を調整*/

.post h2 {

background-size: 100% 0.4em;

padding-bottom: 0.9em;

background-position: 0 center;

background-repeat:no-repeat;

}

文字幅だけにラインを指定する

文字幅にだけラインを指定した場合、不自然な余白が出来てしまいましたので
margin も合わせて指定していきます。

/*ラインの長さと余白の指定*/
.post h2{
display:inline-block;
margin:0.8em;
}

/*ラインの長さと余白の指定*/

.post h2{

display:inline-block;

margin:0.8em;

}

margin の幅は好みで調整してください。

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

見出しに Font Awesome のアイコンを付けてみます。
Font Awesome の利用のしかたはこちら ↓
Font Awesome (ﾌｫﾝﾄｵｰｻﾑ) ｜無料で使えるアイコンの登録と設定【 WordPress 】
Font Awesome 無料アイコンでどこまでできる？基本的な使いかたとカスタマイズ｜WordPress

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

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

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