見出しをデザイン!CSSカスタマイズの基本|縦ラインを無くしたり 簡単なコードでのライン作成!
見出し ( サブタイトル ) の左側に 縦のラインが入っていたり 背景に色を付けたりできます。
背景の色・タイトルの文字の色 そして サイドのラインの組み合わせで
何通りにでも デザインを カスタマイズすることができるのです。
基本のコードで作れるラインのCSS
見出しには 大見出し、中見出し、小見出しと 内容の重要度に合わせて使い分ける必要があります。
使い分けするためにも カスタマイズは必要な項目になりますよね。
Webサイトの基本【 hタグ 】記事タイトル / 見出しについてのまとめ 【 SEO対策 】
こちらの ルクセリタステーマでは 見出しの指定を " .post h2 “ としていますが
使用しているテーマによっては " h2 “ など 違うプロパティになる場合もあります。
基本の見出しデザイン
基本的にラインは 見出しも 記事のアンダーラインなどに使用する場合も同じ border というCSSコードを使用します。
ラインを 縦・横・囲み枠にする。また、ラインの幅を変更するなど これだけでも見出しの見た目がずいぶん変わります。
サイトのテーマによっては デフォルトの状態で
border-left や background に カラー指定されているものがあります。
今回使用しいているテーマ Luxeritasも デフォルトの見出しはこんな感じでした。
これを画像下のように文字と縦ラインをカスタマイズした場合のCSSはこちらです。
1 2 3 4 5 6 7 |
/*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 で幅を調整することで 鋭角なラインを表現することができました。
1 2 3 4 5 6 7 8 |
/*left の幅を利用したライン*/ .post h2 { border-left:solid 10px #ffffff; border-bottom:solid 10px #187b99; color:#000000; font-weight:normal; } |
background と見出しの上下にライン
ラインは 四方すべて囲むこともできますし、このように上下に付けることもできます。
このラインを 二重線にすると またさらにイメージが変わります!
1 2 3 4 5 6 7 8 9 10 |
/*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 (点線)をつかったライン
基本のラインを太めの 破線や 点線にしただけの簡単なアレンジです。
1 2 3 4 5 6 7 8 |
/*border-bottom:dashed の指定*/ .post h2 { border-left:none; border-bottom:dashed 10px #fff462; color:#80989b; font-weight:bold; } |
ドットも同じ要領で dashed
部分を dotted
に変更するだけです。
1 2 3 4 5 6 7 8 |
/*border-bottom:dottedの指定*/ .post h2 { border-left:none; border-bottom:dotted 10px #a7d28d; color:#80989b; font-weight:bold; } |
蛍光ペンを引いたようなライン
ちょっとコードが複雑になりますが よりデザイン性が高いラインを作成することができました!
蛍光ペンのような太いライン
先ほどのアンダーラインと違って、文字にラインがかかっています。
このような 蛍光ペンを引いたようなラインは background で作ることができます。
1 2 3 4 5 6 7 8 |
/*蛍光ペンのようなライン*/ .post h2 { border:none; background:linear-gradient(transparent 60%, #fff462 0%); color:#696969; font-weight:normal; } |
斜線のライン
蛍光ペンのコードの上級編 ラインを斜線にします。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
/*見出し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
も合わせて指定していきます。
1 2 3 4 5 6 |
/*ラインの長さと余白の指定*/ .post h2{ display:inline-block; margin:0.8em; } |
margin の幅は好みで調整してください。
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カスタマイズの基本|縦ラインを無くしたり 簡単なコードでのライン作成!でした!
カラーコードは WEB色見本 原色大辞典 をいつも参考にさせて頂いています。
良かったら 一度ご覧になってみてください!!
外観 & CSSカスタマイズdesing,Font Awesome,icon,Luxeritas,見出し
Posted by 45
関連記事
ローカルから 本サーバーへ !! 簡単インストールを使ってサイトを移す方法
XAMPPなどを利用し、ローカル環境でサイト作成をされている方。 本番サイト、レ ...
Luxeritas ( ルクセリタス ) の かんたんバージョンアップ|WordPress
パソコン (OS) やスマホ、それに関連するアプリなど、すべてのコンテンツが 日 ...
Crayon-Syntax-Highlighter のエディタ画面をカスタマイズ【ワードプレス|プラグイン】
Crayon-Syntax-Highlighter は 投稿記事に カスタマイズ ...
カスタム構造を使って最適なパーマリンクを設定【WordPress】
Webサイトの中にある膨大なページ(コンテンツ)をどのようにグループ分けすればい ...
Font Awesome (フォントオーサム) |無料で使えるアイコンの登録と設定【 WordPress 】
Webサイト上に表示する パンくずリンクに使用する ホーム やファイル のアイコ ...
はじめてのWordPress [ 管理画面 ] 各項目の使いかた まとめ|ルクセリタス
WordPressの 管理画面の使いかたについて解説していきます。 こちらの サ ...
Tag
ディスカッション
ピンバック & トラックバック一覧
[…] WordPress-Beginners WordPress【ルクセリタス】見出しラインを無くす方法と 簡単なコードで作る… […]