<>

WordPress【ルクセリタス】見出しラインを無くす方法と 簡単なコードで作る見出しラインのCSS

見出し (サブタイトル)の左側に 縦のラインが入っていたり 背景に色がついていたり
デザインを設定することで サイト全体のイメージを変えることが出来ます。

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

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

こちらの 見出しのイメージ画像では 簡単なコードだけで 見出しを3パターン作ってみました。
また、それぞれの場所を示すコードを表示してみました。

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

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

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

見出しによって文字だけにしたい場合や 色を付けたくない場合などもあると思います。
背景と同じカラーを選択することで消すという方法もありますが、
正式にはこちら↓
見出しサイドに色をつけない場合のコードを画像で解説
先ほど 消す と表現しましたが 正確には 使用しない(none) という意味ですね。

背景の場合も同じ!!

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

かんたんなコードだけで作れるラインのCSS

基本の見出しデザインをベースに かんたんなコードだけで作れる見出し案をいくつか作ってみました。
コピぺできる CSSコードも参考にしてみてください。

注意

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

基本の見出しデザイン

基本の見出しカスタマイズのサンプル画像
基本のデザインでは left・bottom・ 背景・文字と文字の太さを指定してみました。

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

見出しカスタマイズのサンプル画像-leftの白を利用して鋭角なラインにする
さきほどの border-left に none; を付ける方法とは逆で
背景と同色を指定し、px で幅を調整することで 鋭角なラインを表現することができました。

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

見出しカスタマイズのサンプル画像‐蛍光ペンのような太めのラインを指定
先ほどのアンダーラインと違って、文字にラインがかかっています。
このような 蛍光ペンを引いたようなラインは background で作ることができます。

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

見出しカスタマイズのサンプル画像‐background と見出しの上下にライン
ラインは 四方すべて囲むこともできますし、このように上下に付けることもできます。
このラインを 二重線にすると またさらにイメージが変わります!

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

見出しカスタマイズのサンプル画像‐波線を使ってステッチのようなラインに
基本のラインを太めの破線にしてみました。

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

見出しカスタマイズのサンプル画像‐太めのドットで可愛いライン
次は 基本のラインを太めの点線にしてみました。

border-left だけのライン

見出しカスタマイズのサンプル画像‐border-left だけの指定
これは とてもシンプルな見出しですね。

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

見出しに Font Awesome のアイコンを付けてみます。
Font Awesome の利用のしかたは こちら ↓
プラグインなし!Font Awesome (フォントオーサム) アイコンを ルクセリタスで使う方法
Font Awesome (フォントオーサム) 無料 icon の基本的な使いかた【ルクセリタス】

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

見出しカスタマイズのサンプル画像‐アイコンと文字だけのシンプルな見出し
シンプルだけど、こんなピンクならとってもかわいいです。

白抜きの文字にしてみる

見出しカスタマイズのサンプル画像‐backgroundに色を付けて白抜きの文字にする
白抜きにすることでイメージがすごく変わりますね !

注意

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


以上、WordPress【ルクセリタス】見出しラインを無くす方法と 簡単なコードで作る見出しラインのCSSでした!

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