【2023年最新】Wordpressで蛍光マーカーを引く方法を解説
WordPressでサイトやブログを運営していく中で、読者に注目して欲しい
箇所に「太文字、下線、色文字、背景色」を付けるのは王道的な方法です。
しかし、その優劣の度合いによって使い分けたい時は蛍光マーカーが便利です。
背景色なら強く強調しすぎなので、色使いを抑えたい時に私は活用しています。
私も導入時に、色々なサイトを拝見して試行錯誤を繰り返しました…
というのも、「WordpressのVer」なのか「テーマ互換性の問題」なのかが
分からないのですが、うまく反映されないのです。
そんな私でもできた蛍光マーカー導入方法を解説していきますよ♪
蛍光マーカーとして今回、紹介している色は３つ「ピンク、水色、黄色」になります。
もちろん、他の色でも自由にカスタマイズ出来ますので、そちらも紹介しています。
導入に必要なプラグイン
これから説明する手順は、２つです。
- プラグイン「AddQuicktag」の導入
- 「AddQuicktag」での各種色の設定
文章と画像でも紹介していますが、▼で一連の手順を動画で紹介ています。
「AddQuicktag」の導入
プラグインの新規追加を選択した後に、検索欄に「AddQuicktag」を入れて
インストール後に有効を選択します。
有効した後に、左側メニューの設定から「AddQuicktag」を選択します。
「AddQuicktag」での各色設定
設定するべき箇所は全部で４箇所になります。
①任意の名前（色などの名前で付けると良いでしょう）
②アイコン選択（特に選ばなくても良い）
③開始タグと終了タグをそれぞれ入れる
④一番右端にチェック入れる（全チェック入れます）
②にあたりますアイコンは、アイコンを選ぶと▼のように
色々なアイコンが選択できます。任意のアイコンを選んでください。
開始タグと終了タグをそれぞれ入力します。
ピンクマーカー開始タグ
<span style="background:linear-gradient(to bottom, rgba(255,153,204,0) 20%, #ff99cc 100%);">終了タグ（全色共通）
</span>水色マーカー開始タグ
<span style="background:linear-gradient(to bottom, rgba(128,255,255,0) 20%, #80ffff 100%);">黄色マーカー開始タグ
<span style="background:linear-gradient(to bottom, rgba(255,255,102,0) 20%, #ffff66 100%);">最後に一番右端のチェックを入れる事で全チェックが入るようになります。
その状態にして「変更を保存」ボタンを選択します。
私の環境だけの問題かもしれませんが、一度で保存されない場合があります。
その時には、もう一度4つの項目がきちんと入っているか確認して保存をかけましょう。
使い方ですが、記事投稿の画面にいきましたら投稿ツールに
「Quicktags」という項目が追加されています。
任意の文字列を選んで、「Quicktags」から所定のマーカーを選べばokです。
そのような場合には、開始タグ
<span style=”background:linear-gradient(to bottom, rgba(255,153,204,0) 20%, #ff99cc 100%);”>
「#ff99cc」という文字列を「原色大辞典」に基づいて変更すればokです。