マーカー見出し作成くん

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

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

## 基本

マーカー見出しは文字通りマーカーで線を引いたような見出しを作るためのものです。シンプルながら目を引く見出しを作成できます。デフォルトでは以下のコードが出力されます。

<div style="color:#000000;font-size:18px;line-height:1;font-weight:bold;">マーカー<div style="margin-top:-9px;background:#ffff00;font-size:9px;">　</div></div>

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

・color: 文字色

・font-size: 文字サイズ

・line-height：行間

・font-weight:太字設定

・background:背景色

・margin：外余白

構造としてはシンプルでマーカー本文用の文字とマーカー用のブロックを並べてマイナスmarginを設定しているだけです。

マーカー割合を上げるとマーカーの面積が増えます。50%だと1行の半分の太さになります。全体にマーカーを引きたいときは100％にしてみるといいでしょう（ただこれだと背景色を設定すればいいだけですが……）

## テンプレート

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

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

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

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

## コード説明

以下のコードでマーカーを引いています。

<div style="margin-top:-9px;background:#ffff00;font-size:9px;">　</div>

全角スペースが入っているのはそれがないと背景色がつかないので入れています。消さないようにしてください。区切り線と同じような実装のしかたです。

本来であればこんな実装の仕方はしなくて

background:linear-gradient(transparent 60%, #ff6 60%);

のようにグラデーションを指定すればいいだけです。transparentは透過色でその割合でマーカーの太さを制御します。

ただ小説家になろうでは対応していないのでこういった実装をしています。

注意点としては折り返ししたときに一番下だけにマーカーが引かれます。マーカー本文は短めにするといいかと思います。

マーカー見出しを作りたいときにご利用してみてください。

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

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