<>

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

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

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

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

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

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

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

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

基本の見出しデザイン

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

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

見出しのカスタマイズに使用するプロパティの解説

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

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

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

border の使いかたについては こちらで詳しくまとめていますので参考にしてみてください!
【囲み枠 – BOX】基本のCSSコードとHTMLの記述のしかた

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

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

背景と同じカラーを選択することで消すという方法もありますが、正式には「 none 」を使用し
border-left:none;といったコードで 必要なCSSに追加指定します。

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

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

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

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

見出しカスタマイズのサンプル画像-leftの白を利用して鋭角なラインにする

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

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

見出しカスタマイズのサンプル画像‐background と見出しの上下にライン

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

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

dashed (破線)や dotted (点線)をつかったライン

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

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

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

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

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

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

見出しカスタマイズのサンプル画像‐蛍光ペンのような太めのラインを指定

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

斜線のライン

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

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

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

見出しに Font Awesome のアイコンを付けてみます。
Font Awesome の利用のしかたは こちら ↓
Font Awesome (フォントオーサム) |無料で使えるアイコンの登録と設定【 WordPress 】
無料で使えるFont Awesome アイコンの基本的な使いかた|WordPress

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

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

見出しカスタマイズのサンプル画像‐アイコンと文字だけのシンプルな見出し

白抜きの文字にしてみる

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

見出しカスタマイズのサンプル画像‐backgroundに色を付けて白抜きの文字にする

白抜きにするときの注意点として 記事のタイトル見出しの " h1 “ で利用した場合、
top や カテゴリのグリッドレイアウトでのページなど背景が白い場面では文字が見えなくなってしまいますのでご注意を!!


合わせて読みたい CSSカスタマイズ ‼
見出しや囲み枠の 角に丸みを付けたいときに使うCSS【 border-radius 】

参考サイト : カラーコードの色見本は WEB色見本 原色大辞典 をいつも参考にさせて頂いています。