<>

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

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

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

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

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

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

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

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

基本の見出しデザイン

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

斜線のライン

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

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

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

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

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

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

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

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

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

白抜きの文字にしてみる

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

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

注意

この白い文字は " h1 “ で利用する場合、top ページ・カテゴリのページなど
背景が白い場面では文字が見えなくなってしまいますのでご注意を!!


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

カラーコードは WEB色見本 原色大辞典 をいつも参考にさせて頂いています。
良かったら 一度ご覧になってみてください!!