WordPressを始めたはいいけど、
文字に下線マーカーを引きたいけど、どう作るの？
CSSはよくわからないから、コピペなどで、手軽に下線マーカーを作成する方法はあるの？
そんな疑問をお持ちのWordPress初心者の方は多いのではないでしょうか？
今回は、
について紹介します。
CSSを編集することなく、エディタに貼り付けコピーで完成できます。
かわいい蛍光マーカーですし、手軽に作成したい人にはオススメですよ。
WordPress下線マーカーを引く方法
一般に、WordPressで下線マーカーを引く方法は主に次の3つです。
(1) CSSを編集して下線マーカーを作成する（難しい）
(2) WordPressテーマに元々備わっている下線マーカーを作成する（楽）
(3) テキストエディタにHTMLコードを張り付けて下線マーカーを作成する（とても簡単）
(1)ができれば、自分の好きなように下線マーカーを作成することができますが、下線マーカーを作る際にCSSを編集する必要があるため、難易度は高いかもしれません。
(2)はとても簡単です。
ただし、デフォルトのスタイルしかないので、それ以外の下線マーカーを引くことはできません。
そこで、今回紹介したいのは、(3)のテキストエディタにHTMLコードを貼り付けて下線マーカーを作成する方法です！
この記事で紹介しているコードをコピーして貼り付けるだけなので、簡単ですよ♪
ぜひ、チャレンジして素敵な装飾デザインを探してみてください。
下線蛍光マーカー（細め）
(1) ピンク
ここに文字を入れてね
<span style=”background:linear-gradient(to bottom, rgba(255,153,204,0) 20%, #ff99cc 100%);”>ここに文字を入れてね</span>
(2) 紫色
ここに文字を入れてね
<span style=”background:linear-gradient(to bottom, rgba(161,91,227,0) 60%, #a15be3 100%);”>ここに文字を入れてね</span>
(3) 水色
ここに文字を入れてね
<span style=”background:linear-gradient(to bottom, rgba(255,153,204,0) 20%, #ff99cc 100%);”>ここに文字を入れてね</span>
(4) 緑色
ここに文字を入れてね
<span style=”background: linear-gradient(to bottom, rgba(0,255,0,0) 60%, #00ff00 100%);”>ここに文字を入れてね</span>
(5) 黄色
ここに文字を入れてね
<span style=“background:linear-gradient(to bottom, rgba(255,255,0,0) 60%, #ffff00 100%);”>ここに文字を入れてね</span>
(6) オレンジ色
ここに文字を入れてね
<span style=“background:linear-gradient(to bottom, rgba(255,165,0,0) 60%, #ffa500 100%);”>ここに文字を入れてね</span>
(7) 赤色
ここに文字を入れてね
<span style=“background:linear-gradient(to bottom, rgba(255,0,0,0) 60%, #ff0000 100%);”>ここに文字を入れてね</span>
クレヨン風マーカー
(1) ピンク色
ここに文字を入れてね
<span style=”box-shadow: 0px -6px 5px -3px rgba(242,163,202,0.6) inset,0px 8px 4px -2px #fcc2cc;”>ここに文字を入れてね</span>
(2) 紫色
ここに文字を入れてね
<span style=”box-shadow: 0px -6px 5px -3px rgba(182,91,227,0.6) inset,0px 8px 4px -2px #cc9fe3;”>ここに文字を入れてね</span>
(3) 水色
ここに文字を入れてね
<span style=”box-shadow: 0px -6px 5px -3px rgba(128,255,255,0.6) inset,0px 8px 4px -2px #b3ffff;”>ここに文字を入れてね</span>
(4) 緑色
ここに文字を入れてね
<span style=”box-shadow: 0px -6px 5px -3px rgba(51,255,51,0.6) inset,0px 8px 4px -2px #99ff99;”>ここに文字を入れてね</span>
(5) 黄色
ここに文字を入れてね
<span style=”box-shadow: 0px -6px 5px -3px rgba(255,255,51,0.6) inset,0px 8px 4px -2px #ffff80;”>ここに文字を入れてね</span>
(6) オレンジ色
ここに文字を入れてね
<span style=”box-shadow: 0px -6px 5px -3px rgba(255,175,26,0.6) inset,0px 8px 4px -2px #ffd280;”>ここに文字を入れてね</span>
(7) 赤色
ここに文字を入れてね
<span style=”box-shadow: 0px -6px 5px -3px rgba(255,51,51,0.6) inset,0px 8px 4px -2px #ff9999;”>ここに文字を入れてね</span>
まとめ
以上、WordPressで下線マーカーを引く方法を紹介しました。
何も装飾がないデザインのサイトよりも、下線マーカーを引くことで、自然と読者が見やすいサイトを作ることができます。
ただし、下線マーカーは、あくまで強調するための手段です。
下線マーカーの引きすぎにはご注意を。
