カスタム区切り作成くん

今回はカスタム区切りの使い方とどんなふうにカスタマイズができるか説明していきます。

URL : https://k-editor.com/editor/separator/

## 基本

カスタム区切りは文字通り区切り線を作るためのものです。段落と段落の間に入れるのがいいかと思います。デフォルトでは以下のコードが出力されます。

<div style="margin:1em 0;font-size:16px;line-height:1;text-align:center;"><span style="color:#000000;background:#ffffff;padding:10px;">＋　＋　＋</span><div style="margin-top:-8.5px;border-top:1px solid #000000;"></div></div>

それぞれの意味は以下の通り。

・margin:外余白

・font-size: 文字サイズ

・line-height：行間

・text-align: 位置ぞろえ

・color: 文字色

・background:背景色

・padding：内余白

・border：枠線

詳細設定を開くと、余白、文字サイズ、枠線の種類や幅の変更が可能になります。

## テンプレート

デフォルトの設定としていくつか用意しています。上部にあるテンプレから選択すると開発者が適当に設定したものが選べます。

また、カスタムテンプレートの設定の項目で”この設定を保存する”ボタンを押すと現在設定しているものがブラウザに保存されます。

保存した場合、次に同じページを訪問した時にテンプレの選択肢に表示されます。

よく使う色や区切りの種類を作って保存しておくとよいでしょう。

## コード説明

margin-top:-8.5px;のようにマイナス側の余白を指定してます。

<div>

　<span>＋　＋　＋</span>

　<div></div>

</div>

この構造に対してマイナス側の余白を使うと文字に被るように調整できます。被った文字の背景色を白にすることで文字の部分だけ線が消えます。

マイナス側の余白は他の要素の内側に食い込ませることができます。余白ではなく侵食ですかね。

これもよく使われる手法です。通常では要素同士は被らないように調整されるので被るように調整したい場合に使います。

ただ、ちょっと計算をミスるとずれるのでほどほどにしておいた方が良いでしょう。

単純な区切りでいいのであれば、hrタグを利用することをお勧めします。

<hr>

で区切り線ができます。ただ色合いなどを調整しようとするとちょっと面倒なのでカスタマイズする場合はborderによる区切りにするといいかと思います。

自分用の区切りを作ってみるといいかと思います。

-　-　- ✂切り取り✂ -　-　-

ということでカスタム区切り作成くんの使い方でした。もしよくわからない点などあれば感想などでお知らせください。