見出しをデザイン!CSSカスタマイズの基本|縦ラインを無くしたり 簡単なコードでのライン作成!
Webページの見出し ( サブタイトル )部分の装飾 ( CSS ) として 左側に縦のラインが入っていたりしています。
デフォルトではシンプルなデザインと色合いで設定されていますが 背景の色・タイトルの文字の色
そして サイドのラインの組み合わせで何通りにでも デザインを カスタマイズすることができるのです。
もちろん、ラインなどが不要の場合に使用するコードをCSSで指定することでラインを消すこともできますよ。
基本的なラインのCSSカスタマイズ のデザインとCSSコードを紹介していきます。
基本のコードで作れるラインのCSS
見出しには 大見出し、中見出し、小見出しと 内容の重要度に合わせて使い分ける必要があります。
使い分けするためにも カスタマイズは必要な項目になりますよね。
見出しについての詳しい内容は別記事でまとめています。
Webサイトの基本【 hタグ 】記事タイトル / 見出しについてのまとめ 【 SEO対策 】
基本の見出しデザイン
基本的にラインは 見出しも 記事のアンダーラインなどに使用する場合も同じ border というCSSコードを使用します。
ラインを 縦・横・囲み枠にする。また、ラインの幅を変更するなど これだけでも見出しの見た目がずいぶん変わります。
サイトのテーマによっては デフォルトの状態で border-left や background に カラー指定されているものがあり
今回使用しいているテーマ Luxeritasも デフォルトの見出しはこんな感じでした。
これを画像下のように文字と縦ラインをカスタマイズした場合のCSSはこちらです。
1 2 3 4 5 6 |
.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コード
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
/*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コード
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
/*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コード
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
/*蛍光ペンのようなライン- 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
シンプルなアイコンの見出し
シンプルだけど、こんなピンクならとってもかわいいです。
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 や カテゴリのグリッドレイアウトでのページなど背景が白い場面では文字が見えなくなってしまいますのでご注意を!!
合わせて読みたい CSSカスタマイズ ‼
見出しや囲み枠の 角に丸みを付けたいときに使うCSS【 border-radius 】
参考サイト : カラーコードの色見本は WEB色見本 原色大辞典 をいつも参考にさせて頂いています。
ディスカッション
ピンバック & トラックバック一覧
[…] WordPress-Beginners WordPress【ルクセリタス】見出しラインを無くす方法と 簡単なコードで作る… […]