WordPressで蛍光マーカーのような下線を引く方法をわかりやすく説明

WordPress使ってブログを書いているときに強調したい部分を、蛍光マーカーのように下線（アンダーライン）をひきたいときってありますよね？ 例はこちら　→　ブログで強調したいことを下線マーカーをひいて強調したい 太字や文字をハイライトするのは簡単に設定できたのに、下線をひくためにはCSSとかHTMLとかいう言葉がでてきて「難しい！」と感じるのは私だけではないはず、、。 ちなみにCSSとHTMLとは超簡単に説明するとこんな感じです。 ということで、これらをつかって実際にどのように蛍光マーカーのような下線をひけるのかわかりやすく紹介します。 こちらで紹介している方法を参考にする前に、知っておいてほしいのが、使っているワードプレスの「テーマ」によってすでにこの機能が備わっている場合があるということです。例えば最近の、ワードプレスのテーマ「COCOON」はすでにそういった機能が備わっているようです。 ちなみに、わたしがブログ運営に使っている「Stinger Plus2」「Stork」には備わってなかったのでこちらで紹介している方法で設定しました。 あなたのテーマにない場合は以下のステップを参考にしてください。

蛍光マーカーのような下線を引く方法

ステップにわけてわかりやすく解説していきます。

ステップ１　CSSを子テーマに追加する

まずは下線マーカーをひくためにCSSを子テーマに追加します。 ①ワードプレス管理画面の「外観」→「カスタマイズ」を選択 ②カスタマイズ画面がひらいたらスクロールしていちばんしたにある「追加CSS」を選択 ③追加CSS画面にCSSコードをコピーして貼り付けします。貼り付けたら「公開」を選択 以下のコードが黄色マーカーのCSSコードです＊他の色や線の太さを変える方法はのちほど説明します。

.yellow-marker {
background: linear-gradient(transparent 60%, #FFFF99 50%);
}

これでCSSの設定はOKです。

ステップ2　プラグインAddQuicktagをワードプレスにインストール

つぎに下線マーカーをひきたい文章をハイライトして、クリックするだけで下線マーカーがひけるようになるための設定をします。 そのためには、まずプラグイン「AddQuicktag」をインストールする必要があるのでそちらを解説します。 ①ワードプレス管理画面の「プラグイン」→「新規追加」を選択 ②「キーワード」に「AddQuicktag」と入力しAddQuicktagがでたら「今すぐインストール」を選択 ③インストールされたら「有効化」をクリック

ステップ３　HTMLをAddQuicktagに登録する

引き続き、下線マーカを引きたい場所をクリックするだけでできるための設定です。 ①インストールしたプラグインAddQuicktagの設定をします。ワードプレス管理画面の「外観」→「プラグイン」→「インストール済みプラグイン」をひらき「AddQuicktag」の「設定」をクリックします。 ②タグの設定をしていきます。以下の５つを設定すればOK ボタン名：黄色マーカー（自分が分かりやすい名前をつける） 開始タグ：<span class=“yellow-marker”> 終了タグ：</span> 順番：Quicktagを挿入する際に表示される順番をきめることができます ビジュアルエディター：すべてにチェック（一番右にチェックをいれるとすべてにチェックがはいる） ③「変更を保存」をクリック

ステップ４　Quicktagを使って蛍光マーカーのような下線をひく

以上で準備ができたので、実際に蛍光マーカーをひいてみましょう ①ワードプレス編集画面の「投稿」→「新規追加」をひらきます ②「ビジュアル」と「テキスト」入力がありますが、まずはビジュアルに文書を入力 例）わたしはチョコレートがすきです この分の「チョコレート」に下線を引きたい場合はクリックしてハイライトしましょう。 ③ハイライトした状態で「Quicktag」をクリックすると、先ほど設定したボタン名「黄色マーカー」をクリック ⓸ビジュアル画面ではなにも変わりませんので、テキスト画面に移動すると以下のように表示されています。 わたしは<span class=”marker-yellow”>チョコレート</span>が好きです ⑤どんなふうに見えるのか確認したい場合は「プレビュー」ボタンをクリック 以上が、蛍光マーカーのような下線を引く方法の手順です！

いろんな色や太さの蛍光マーカーのような下線をひく

ここからは、違う色や違う太さのマーカーを設定したい場合の説明です。 ①ステップ１で使ったCSSコードのなかにはそれぞれ、透明度、色、線の太さを設定するコードが入っています。 .yellow-marker {background: linear–gradient(transparent 60%, #FFFF99 50%);} これらを変えることで、透明度や色、線の太さを変えられます。 お好みの色はこちらのチャートで選んでください→原色大辞典 yellow-markerの部分は色に合わせて変更し、その際はステップ３のHTMLの開始タグ：<span class=“yellow-marker“>のほうも同じように変えましょう。

おわりに

蛍光マーカーのような下線を引く方法をわかりやすく説明させていただきました。 ブログ記事に下線を引いたり、太字にしたり、ハイライトを入れたりすることで文章がわかりやすく見やすくなりますね。 ただ、こういった装飾を使いすぎると逆によみづらくなったりもするので、必要最小限におさえるよう気をつけてくさい！ こちらの記事もおすすめです！ 商品リンク作成【ポチップ】の使い方をわかりやすく図解で紹介！ プラグインRinkerがみつからない？【図解でわかりやすく】設定する方法を紹介 WordPressで表作成【初心者向け図解付】TablePressの使い方と実例紹介 楽天広告がスマホ画面からはみでる？！簡単に解決できる方法