刺繍見出し作成くん

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

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

## 基本

刺繍見出しは文字通り刺繍風の見出しを作るためのものです。刺繍をしたようなラインを使った見出しを作ることができます。デフォルトでは以下のコードが出力されます。

<div style="line-height:1.2;padding:10px;background:#54c0cf;"><div style="color:#ffffff;padding:10px;border:3px dashed #ffffff;font-size:18px;font-weight:bold;text-align:center">見出し</div></div>

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

・line-height：行間

・padding：内余白

・background:背景色

・color: 文字色

・border：枠線

・font-size: 文字サイズ

・font-weight:太字設定

・text-align: 位置ぞろえ

刺繍する場所は上下左右、上下、下が選べます。また位置ぞろえも選べます。ただほとんど選ぶことはないような気もします。

詳細設定を開くと、余白、枠線、行間の変更が可能になります。

## テンプレート

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

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

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

よく使う色の設定を作って保存しておくとよいでしょう。

## コード説明

構造は以下の通りです。

<div>

　<div>見出し</div>

</div>

最初のdivで外側の余白を設定しています。その中のdivで枠線の設定を行っています。border:3px dashedで刺繍したようなラインが引けます。

通常は、box-shadow: プロパティを使って、外側の塗りつぶしを行うのですが、活動報告では使えないので、二重ブロックにして実現しています。

外側のブロックと、内側のブロックの背景色を合わせることがコツです。外側のブロックのpaddingで外幅を決定しています。

刺繍風見出しを作りたいときにご利用してみてください。

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

ということで刺繍見出し作成くんの使い方でした。もしよくわからない点などあれば感想などでお知らせください。