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

Webページの見出し ( サブタイトル )部分の装飾 ( CSS ) として左側に縦のラインが入っていたりしています。

デフォルトではシンプルなデザインと色合いで設定されていますが背景の色・タイトルの文字の色
そしてサイドのラインの組み合わせで何通りにでもデザインをカスタマイズすることができるのです。

もちろん、ラインなどが不要の場合に使用するコードをCSSで指定することでラインを消すこともできますよ。

基本的なラインのCSSカスタマイズのデザインとCSSコードを紹介していきます。

Contents - 目次 -

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

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

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

使い分けするためにもカスタマイズは必要な項目になりますよね。
見出しについての詳しい内容は別記事でまとめています。
Webサイトの基本【 hタグ】記事タイトル / 見出しについてのまとめ【 SEO対策】

基本の見出しデザイン

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

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

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

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

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

.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;といったコードで必要なCSSに追加指定します。

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

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

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

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

さきほどの border-left に none; を付ける方法とは逆で背景と同色を指定し、
px で幅を調整することで鋭角なラインを表現することができました。

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

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

見出しのCSS – 鋭角なラインと上下のラインCSSコード

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

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

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

.post h2 {

border-left:solid 10px #ffffff;

border-bottom:solid 10px #187b99;

color:#000000;

font-weight:normal;

}

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

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

dashed (破線)・ dotted (点線)のCSSコード

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

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

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

.post h2 {

border-left:none;

border-bottom:dashed 10px #fff462;

color:#80989b;

font-weight:bold;

}

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

.post h2 {

border-left:none;

border-bottom:dotted 10px #a7d28d;

color:#80989b;

font-weight:bold;

}

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

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

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

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

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

斜線のライン

蛍光ペンのコードの上級編ラインを斜線にします。
文字幅にだけラインを指定した場合、不自然な余白が出来てしまいましたので margin も合わせて指定していきます。

蛍光ペンと斜線のラインCSSコード

/*蛍光ペンのようなライン- Yellow*/
.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;
}

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

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

.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;

}

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

.post h2{

display:inline-block;

margin:0.8em;

}

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