WordPress【ルクセリタス】見出しラインを無くす方法と 簡単なコードで作る見出しラインのCSS
見出し (サブタイトル)の左側に 縦のラインが入っていたり 背景に色がついていたり
デザインを設定することで サイト全体のイメージを変えることが出来ます。
背景の色・タイトルの文字の色 そして サイドのラインの組み合わせで
何通りにでも デザインを カスタマイズすることができるのです。
こちらの 見出しのイメージ画像では 簡単なコードだけで 見出しを3パターン作ってみました。
また、それぞれの場所を示すコードを表示してみました。
ラインを 縦・横・囲み枠にする。また、ラインの幅を変更するなど これだけでも見出しの見た目がずいぶん変わります。
見出しの左のラインを消したい!!
サイトのテーマによっては デフォルトの状態で
border-left や background に カラー指定されているものがあります。
今回使用しいているテーマ Luxeritasも デフォルトの見出しはこんな感じでした。
見出しによって文字だけにしたい場合や 色を付けたくない場合などもあると思います。
背景と同じカラーを選択することで消すという方法もありますが、
正式にはこちら↓
先ほど 消す と表現しましたが 正確には 使用しない(none) という意味ですね。
背景も同様で デフォルトで背景指定されている場合などは
background:none;というコードをCSSに追加することで 背景色を無くすことが出来ます。
かんたんなコードだけで作れるラインのCSS
基本の見出しデザインをベースに かんたんなコードだけで作れる見出し案をいくつか作ってみました。
コピぺできる CSSコードも参考にしてみてください。
こちらの ルクセリタステーマでは 見出しの指定を " .post h2 “ としていますが
使用しているテーマによっては " h2 “ など 違うプロパティになる場合もあります。
基本の見出しデザイン
基本のデザインでは left・bottom・ 背景・文字と文字の太さを指定してみました。
1 2 3 4 5 6 7 8 9 |
/* hタグの色と線*/ .post h2 { border-left: solid 8px #a4d5bd; border-bottom: solid 3px #a4d5bd; background:#f4f4e6; color:#5c9ea5; font-weight:bold; } |
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 |
/*蛍光ペンのようなライン*/ .post h2 { border:none; background:linear-gradient(transparent 60%, #fff462 0%); color:#696969; 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( 破線 )をつかったライン
基本のラインを太めの破線にしてみました。
1 2 3 4 5 6 7 8 |
/*border-bottom:dashed の指定*/ .post h2 { border-left:solid 0px #fff; border-bottom:dashed 10px #fff462; color:#80989b; font-weight:bold; } |
dotted( 点線 )をつかったライン
次は 基本のラインを太めの点線にしてみました。
1 2 3 4 5 6 7 8 |
/*border-bottom:dottedの指定*/ .post h2 { border-left:solid 0px #fff; border-bottom:dotted 10px #a7d28d; color:#80989b; font-weight:bold; } |
border-left だけのライン
これは とてもシンプルな見出しですね。
1 2 3 4 5 6 7 |
/*border-leftの指定*/ .post h2 { border-left:solid 10px #a4d5bd; color:#80989b; font-weight:bold; } |
Font Awesome のアイコンを見出しに入れる
見出しに Font Awesome のアイコンを付けてみます。
Font Awesome の利用のしかたは こちら ↓
プラグインなし!Font Awesome (フォントオーサム) アイコンを ルクセリタスで使う方法
Font Awesome (フォントオーサム) 無料 icon の基本的な使いかた【ルクセリタス】
シンプルなアイコンの見出し
シンプルだけど、こんなピンクならとってもかわいいです。
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 ページ・カテゴリのページなど
背景が白い場面では文字が見えなくなってしまいますのでご注意を!!
以上、WordPress【ルクセリタス】見出しラインを無くす方法と 簡単なコードで作る見出しラインのCSSでした!
カラーコードは WEB色見本 原色大辞典 をいつも参考にさせて頂いています。
良かったら 一度ご覧になってみてください!!
外観 & CSSカスタマイズdesing,Font Awesome,icon,Luxeritas
Posted by 45
関連記事
Font Awesome (フォントオーサム) 無料 icon の基本的な使いかた【ルクセリタス】
Font Awesome (フォントオーサム) のアイコンは CSSカスタマイズ ...
Adobe Stock の無料素材を使ってみる
Adobe Stock は写真・イラスト・ベクター画像など 膨大な数の 画像など ...
カスタム構造を使って最適なパーマリンクを設定【WordPress】
記事作成を始める前に必要な パーマリンクの設定 をします。 これは 記事ごとのU ...
ローカルから 本サーバーへ !! 簡単インストールを使ってサイトを移す方法
XAMPPなどを利用し、ローカル環境でサイト作成をされている方。 本番サイト、レ ...
【WordPress】グローバルナビゲーションを使ってメニュー作成|Luxeritas( ルクセリタス )
ヘッダーナビ(グローバルナビゲーション)は Webサイトの 主要なコンテンツにア ...
プラグインなし!Font Awesome (フォントオーサム) アイコンを ルクセリタスで使う方法
Webサイトの いろんなところで使用されている アイコン。 ← 例えばこちら 記 ...
Tag
ディスカッション
ピンバック & トラックバック一覧
[…] WordPress-Beginners WordPress【ルクセリタス】見出しラインを無くす方法と 簡単なコードで作る… […]