THE THOR にはプリセットパーツに区切り線が3種類用意されています。
デフォルトの状態ではワードプレス標準の横ラインと差が少ないのでサイトのデザインに合わせカスタマイズして使用します。
現在、当サイトで使用している区切り線は以下のようになっています。
※この記事のカスタマイズとは別になっている場合があります。
実線（に登録してある罫線）
破線（に登録してある罫線）
点線（に登録してある罫線）
THE THOR 区切り線（デフォ）
デフォルトの区切り線は以下のように表示されます。
上から実線、破線、点線となっています。ハッキリ言ってわかりづらいですよね？
ちなみに以下がワードプレス標準の横ラインです。
ほとんど差がありません。
これではせっかく3種類ものプリセットパーツが用意されているの勿体ない。
カスタマイズして使い分けできるようにしましょう！
（というかカスタマイズを前提に用意されてる気がします。）
区切り線のカスタマイズ
3種類の区切り線のクラスは以下の通りです。
- 実線：hr-solid
- 破線：hr-dashed
- 点線：hr-dotted
このクラスを利用して追加cssを使いカスタマイズします。
外観 → カスタマイズ → 追加cssに下記コードをコピペ
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％表示）
出来上がり↑
以上です。
点線の点は表示するブラウザによってカタチが変わります。
・バージョンの古いChromeだと四角の点になる。
・AndroidのChromeだと丸の点になる。等々
活用のアイディア
例えば破線や点線は使用しないという場合、全ての区切り線を実線にして3色用意することなどもできます。
区切り線の種類は他にもあります。使わない区切り線を別のパターンに使用するのもありかと思います。
・solid：1本の線
・double：2本の線
・groove：立体的な線（凹）
・ridge：立体的な線（凸）
・dashed：破線
・dotted：点線
あとがき
区切り線は単調になりがちな記事にアクセントを与えてくれます。
見出しを変えるほどでもないけど内容が少し変化する場所などに挿入する良いと思います。
色なども変えて自分のサイトにあった区切り線にカスタマイズしましょう。
