2019年9月16日

「エディタにボタンを追加」で参考にさせていただいた
ウィンドミルさんのAddQuicktagの設定と使い方

私的に必要なものを２つ修正を加えながら実装してみました

まずは見出しの装飾、デフォルトでの見出し文字のイメージを確認

例1. h1 の場合の Title

例2. h2 の場合の Title

例3. h3 の場合の Title

この見出し1～6がそれぞれh1～h6になってます

h2 h3 を直接カスタマイズすると
以下の画像のような影響が出てしまいます
h2やh3は区別するためのclass名が必要ですね

とか

比較するとh4は記事本文の文字サイズと一緒になってしまうので本来ならh2にしたいところですがh4で指定しました

1.見出し文字をさらに強調する縦ラインと背景色（これです）

他にもいろいろとカラーを使用しているのであえてグレーにしました

h4 {background: #f5f5f5;padding: 0.3em;border-left: solid 6px #696969;}

2.蛍光ペンのようなマーカーで文字を強調

ADDQuicktagに追記
ボタン名：太マーカー
開始タグ：<span class="marker-bold">　終了タグ：</span>
ボタン名：細マーカー（文字の下の方にライン）
開始タグ：<span class="marker-fine">　終了タグ：</span>

CSSに追記（色を好みに変更）

.marker-bold{ background: linear-gradient(transparent 0, #fffacd 0); } /* 太マーカー */ .marker-fine{ background: linear-gradient(transparent 60%, #fffacd 60%); } /* 細マーカー */

ADDQuicktag本当に便利です

まだまだありますが欲張らずにこの辺で　h2 h3 で出来る方法が見つかったら追記しようと思います

————追記———————————–
邪道と思われる方法で「見出し」カスタマイズ解決です

いろいろ検索してみたけど同じ症状か反映されないかの結論に達し素人ならではの発想で無理矢理解決
このあと何処にどんな影響が出てくるのかが懸念されますが背に腹は代えられぬ

↑↑このテーマではh1～h6は何も指定されていないので
追加CSS追記でそのまま使用していたh5タグを改良することにしました

h5 {background: #f5f5f5;padding: 0.3em;border-left: solid 6px #696969;font-size: 2.0rem;}

ホントに成功したのかな？

h5を文字サイズと背景色を加えて左ラインの見出しにてみた

ちゃんと見出しh2程度の文字の大きさになってるでしょ

これって、Qicktugに登録しなくても「段落」のh5で反映されちゃった

ブロックエディタの「見出し」での表示と同じってことだよね？？？(x_x；)

な～にやってんだか