THE THOR ザ・トール 区切り線を活用する

THE THOR にはプリセットパーツに区切り線が3種類用意されています。

デフォルトの状態ではワードプレス標準の横ラインと差が少ないのでサイトのデザインに合わせカスタマイズして使用します。

現在、当サイトで使用している区切り線は以下のようになっています。
※この記事のカスタマイズとは別になっている場合があります。

実線（に登録してある罫線）

破線（に登録してある罫線）

点線（に登録してある罫線）

THE THOR 区切り線（デフォ）

デフォルトの区切り線は以下のように表示されます。

上から実線、破線、点線となっています。ハッキリ言ってわかりづらいですよね？

ちなみに以下がワードプレス標準の横ラインです。

ほとんど差がありません。

これではせっかく3種類ものプリセットパーツが用意されているの勿体ない。

カスタマイズして使い分けできるようにしましょう！

（というかカスタマイズを前提に用意されてる気がします。）

区切り線のカスタマイズ

3種類の区切り線のクラスは以下の通りです。

• 実線：hr-solid
• 破線：hr-dashed
• 点線：hr-dotted

このクラスを利用して追加cssを使いカスタマイズします。

/* 区切り線カスタマイズ */
.content .hr-solid {
border-top: 2px solid rgba(0,0,0,0.1);
}
.content .hr-dashed {
border-top: 4px dashed rgba(0,0,0,0.1);
}
.content .hr-dotted {
border-top: 8px dotted rgba(0,0,0,0.1);
}

今回は太さの変更のみです。

色を変更する場合はrgba(0,0,0,0.1)の部分の数値を変えてください。最後の0.1は透明度になります。（1で100％表示、0.1で10％表示）

出来上がり↑

以上です。

活用のアイディア

例えば破線や点線は使用しないという場合、全ての区切り線を実線にして3色用意することなどもできます。

区切り線の種類は他にもあります。使わない区切り線を別のパターンに使用するのもありかと思います。

あとがき

区切り線は単調になりがちな記事にアクセントを与えてくれます。

見出しを変えるほどでもないけど内容が少し変化する場所などに挿入する良いと思います。

色なども変えて自分のサイトにあった区切り線にカスタマイズしましょう。

[wpap service=”with” type=”detail” id=”4774189944″ title=”たった1日で基本が身に付く! HTML&CSS 超入門”]