テキストに下線の代わりにアンダーマーカーを引く方法

下線マーカー(アンダーマーカー)の設定方法

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) ご覧のような設定画面が表示されます。赤い枠の中で必要な設定を入力していきます。

 

(6) 必要な入力項目を設定します。

  1. ボタン名:AddQuicktagを利用する時の表示名です。わかり易い名前をつけておきます。
  2. ダッシュアイコン:指定を省略してもいい項目です。指定する場合は、好きなアイコンを選択して下さい。
  3. ラベル名:任意の好きな名前をつけてください。ボタン名を英語にして、あまり長くない名前を付ければいいでしょう。
  4. 開始タグ:『<span class="marker-yellow">ここに文字を入力</span>』を設定する場合、開始タグに該当するのは、<span class="marker-yellow">ここに文字を入力の部分です。
  5. 終了タグ:『<span class="marker-yellow">ここに文字を入力</span>』を設定する場合、終了タグに該当するのは、</span>の部分なので、</span>を入力します。
  6. アクセスキー:設定不要です。何もしなくてOKです。
  7. 順番:指定を省略してもいい項目です。つける場合は、単純に1から順番に付けておけばOKです。
  8. 利用設定:一番右端に✔を入れます。全てが指定されますので、当面はこれでOK。
  9. 「変更を保存」ボタンをクリックしてOKです。
スポンサーリンク

下線マーカー(アンダーマーカー)の利用方法

ビジュアルモードでの入力

ビジュアルモードでは、登録したものを「プルダウンメニュー」で選択して入力します。

ビジュアルモードで入力した場合は、開始タグと終了タグが同時に記述されますので、文章を変更するだけになります。

 

テキストモードでの入力

テキストモードの入力では、プルダウンメニューではなく、直接ボタンを選択して入力します。

また、ボタンを選択して入力されるのは「開始タグ」だけで、必要な文章に変更した後に、再度、同じボタンをクリックすると「終了タグ」が入るようになります。

画像をご覧いただければわかるように、終了タグ待ちの状態である場合は、ボタンの先頭に「/」が入っています。

「トマトレッド下線マーカー」であれば、「/トマトレッド下線マーカー」になっていることがわかります。

スポンサーリンク

この記事が気に入ったら
フォローしよう

最新情報をお届けします

おすすめの記事