下線マーカー(アンダーマーカー)の設定方法
TinyMCE Advanced(Classic Editor)のプラグインを入れると、背景色を選んでマーカーをひくことができますが、今回は、下線のようなマーカー、仮にアンダーマーカー(Under Marker)とでも呼んだらいいのでしょうか?
これを引く方法について投稿しておきます。
個人的な意見ですが、背景に色を付けた普通のマーカーより目立つような気がしますし、投稿記事の文章にメリハリをつけるという意味でも、使ってみてはいかがでしょうか?
5色をご用意しました。こんな、マーカーです。
CSSを追加する
(1) ダッシュボードから、外観>カスタマイズを選択する。
(2) 追加CSSを選択する。
(3) 下記のCSSをそのまま全てコピーする。予め、メモ帳等に貼り付けておいてもいいでしょう。ご自分でマーカーのカラーを変えたい場合は、カラーコードを変えるだけでOKです。(※カラーコードの参考)
(4) 追加CSSの欄に、そのまま貼り付けて、公開ボタンをクリックする。
プラグイン「AddQuicktag」設定する。
黄色のアンダーマーカーを引くには、『<span class="marker-yellow">ここに文字を入力</span>』と、キーボードで直に入力してもいいのですが、そんなまどろっこしいことはできませんので、「AddQuicktag」というプラグインを使うことにします。
登録するのは、次の5つです。
(1) ダッシュボードのプラグインから、「新規追加」を選ぶ。
※既にAddQuicktagをインストールしてお使いの方は、この画面からAddQuicktagの設定を表示させて、(6)へ。
(2) キーワードに「AddQuicktag」と入れて、検索すれば見つかりますので、「今すぐインストール」をクリックして下さい。
(3) インストールが終わったら、「有効化」ボタンをクリックします。
(4) 有効化が終わると、プラグイン一覧の画面に変わりますので、「設定」をクリックします。
(5) ご覧のような設定画面が表示されます。赤い枠の中で必要な設定を入力していきます。
- ボタン名:AddQuicktagを利用する時の表示名です。わかり易い名前をつけておきます。
- ダッシュアイコン:指定を省略してもいい項目です。指定する場合は、好きなアイコンを選択して下さい。
- ラベル名:任意の好きな名前をつけてください。ボタン名を英語にして、あまり長くない名前を付ければいいでしょう。
- 開始タグ:『<span class="marker-yellow">ここに文字を入力</span>』を設定する場合、開始タグに該当するのは、『<span class="marker-yellow">ここに文字を入力』の部分です。
- 終了タグ:『<span class="marker-yellow">ここに文字を入力</span>』を設定する場合、終了タグに該当するのは、『</span>』の部分なので、</span>を入力します。
- アクセスキー:設定不要です。何もしなくてOKです。
- 順番:指定を省略してもいい項目です。つける場合は、単純に1から順番に付けておけばOKです。
- 利用設定:一番右端に✔を入れます。全てが指定されますので、当面はこれでOK。
- 「変更を保存」ボタンをクリックしてOKです。
下線マーカー(アンダーマーカー)の利用方法
ビジュアルモードでの入力
ビジュアルモードでは、登録したものを「プルダウンメニュー」で選択して入力します。
ビジュアルモードで入力した場合は、開始タグと終了タグが同時に記述されますので、文章を変更するだけになります。
テキストモードでの入力
テキストモードの入力では、プルダウンメニューではなく、直接ボタンを選択して入力します。
また、ボタンを選択して入力されるのは「開始タグ」だけで、必要な文章に変更した後に、再度、同じボタンをクリックすると「終了タグ」が入るようになります。
画像をご覧いただければわかるように、終了タグ待ちの状態である場合は、ボタンの先頭に「/」が入っています。
「トマトレッド下線マーカー」であれば、「/トマトレッド下線マーカー」になっていることがわかります。