WordPress初心者で文字の下に下線マーカーをひく方法がわからず困っている方、多いようですね。
そんな方のために、こちらの記事ではWordPress初心者が苦手なCSS（スタイルシート）を使わずに
コピペだけでできる可愛い下線蛍光マーカーの設定方法をどこよりも簡単に図解付きで解説していきます。
参考にしていただけると幸いです。
目次
【ワードプレス】CSSをいじらずに下線マーカーを引く方法はある？
「下線 マーカー 引く方法 」
こんなヤツ⤴
文字下線マーカー簡単と検索してもどこのサイトにもでてくるのがCSS（スタイルシート）とHTMLをいじる方法ばかり・・・💦
WordPress初心者にとってCSSをいじるのってめちゃくちゃ不安がありますよね。
WordPressコピペだけで使える蛍光ペンマーカー
例↓
コピーはココ⤴のところをクリック。
これでコピーは完了です☺
その他にコピーのやり方はいろいろあります。自分に合ったコピーの仕方をしてもいいねっ♪
■キーボードのコントロール（CTRL)ボタンとCでコピー。
貼り付け（ペースト）は右クリックの貼り付けからもできるけど
コントロール（CTRL)とVでもできるんだよ。
ワードプレスに行ったら先ほどコピーしたのを記事に貼り付けます。
例：
わ～い♪下線マーカーできたよー
「ここに文字をいれてね」の部分を消して
入れたい文字を入れればOKです♪
ワードプレスのテキストというのはここです。
↓
ピンクの蛍光ペンマーカー
細め ピンク蛍光マーカー
|
1 |
<span style="background:linear-gradient(to bottom, rgba(255,153,204,0) 60%, #ff99cc 60%);">ここに文字を入れてね</span> |
太め ピンク蛍光マーカー
|
1 |
<span style="background:linear-gradient(to bottom, rgba(255,153,204,0) 20%, #ff99cc 100%);">ここに文字を入れてね</span> |
ピンク クレヨン風マーカー
|
1 |
<span style="box-shadow: 0px -6px 5px -3px rgba(242,163,202,0.6) inset,0px 8px 4px -2px #fcc2cc;">ここに文字を入れてね</span> |
ピンク 色鉛筆風マーカー
|
1 |
<span style="box-shadow: 0px -6px 4px -4px rgba(254,182,195,0.8) inset,0px 7px 5px -8px #feb6c3;">ここに文字を入れてね</span> |
水色の蛍光ペンマーカー
細め 水色蛍光マーカー</span >
|
1 |
<span style="background:linear-gradient(to bottom, rgba(128,255,255,0) 60%, #80ffff 60%);">ここに文字を入れてね</span > |
太め 水色蛍光マーカー
|
1 |
<span style="background:linear-gradient(to bottom, rgba(128,255,255,0) 20%, #80ffff 100%);">ここに文字を入れてね</span> |
水色 クレヨン風マーカー
|
1 |
<span style="box-shadow: 0px -6px 5px -3px rgba(209,251,251,0.6) inset,0px 8px 4px -2px #d1fbfb;">ここに文字を入れてね</span> |
水色 色鉛筆風マーカー
|
1 |
<span style="box-shadow: 0px -6px 5px -3px rgba(158,251,251,0.8) inset,0px 7px 5px -8px #9efbfb;">ここに文字を入れてね</span> |
黄色の蛍光ペンマーカー
細め 黄色蛍光マーカー</span >
|
1 |
<span style="background:linear-gradient(to bottom, rgba(255,255,102,0) 60%, #ffff66 60%);">ここに文字を入れてね</span > |
太め 黄色蛍光マーカー
|
1 |
<span style="background:linear-gradient(to bottom, rgba(255,255,102,0) 20%, #ffff66 100%);">ここに文字を入れてね</span> |
黄色 クレヨン風マーカー
|
1 |
<span style="box-shadow: 0px -6px 5px -3px rgba(240,250,79,0.6) inset,0px 8px 4px -2px #ffff66">ここに文字を入れてね</span> |
黄色 色鉛筆風マーカー
|
1 |
<span style="box-shadow: 0px -6px 5px -3px rgba(240,250,79,0.8) inset,0px 7px 5px -8px #ffff66">ここに文字を入れてね</span> |
グリーンの蛍光ペンマーカー
細め グリーン蛍光マーカー</span >
|
1 |
<span style="background:linear-gradient(to bottom, rgba(102,238,102,0) 60%, #66ee66 60%);">ここに文字を入れてね</span > |
太め グリーン蛍光マーカー
|
1 |
<span style="background:linear-gradient(to bottom, rgba(102,238,102,0) 20%, #66ee66 100%);">ここに文字を入れてね</span> |
グリーン クレヨン風マーカー
|
1 |
<span style="box-shadow: 0px -6px 5px -3px rgba(225,251,209,0.6) inset,0px 8px 4px -2px #66ee66">ここに文字を入れてね</span> |
グリーン 色鉛筆風マーカー
|
1 |
<span style="box-shadow: 0px -6px 5px -3px rgba(117,249,154,0.8) inset,0px 7px 5px -8px #66ee66">ここに文字を入れてね</span> |
文字アンダーライン【自分好みの好きな色で作る方法】
好きな下線の色がなかった場合には
自分好みの色でアンダーラインを作ることもできます♪
作り方は簡単😊
カラーコードはこちらの原色大辞典にあります♪
毎回コピぺはめんどくさい。一発で呼び出せる方法は？
下線マーカーを引く時に毎回コピペするの
めんどくさいですよね。
そこで便利なのがワードプレスプラグインの「AddQuicktag」（アドクイックタグ）です。
「AddQuicktag」を入れておけばボタンひとつで呼び出すことができます。
まだ導入していない方は
ダッシュボード→プラグイン→新規追加→右側にあるプラグインを検索のところにAddQuicktagと入力→今すぐインストール→有効化
の順に設定していきます。
有効化したらダッシュボードにある
設定→AddQuicktagを開きます。
では左から順に解説していきます。
順番は初めて使うので1でOKです。
最後に変更を保存を忘れずにクリックしてくださいね！
これでボタンひとつで簡単に
アンダーラインマーカーを呼び出すことができます😊
テキスト投稿画面の上に
先ほど入力したラベル名があれば成功です♪
まとめ
CSSを使わずに文字に下線蛍光マーカーを引く方法をご紹介しました。
可愛いアンダーラインを使うことでブログを書くのが楽しみになりますよね💕
アンダーラインは目立たせたい文章を強調することによりSEO効果も期待できるんです♪
くれぐれもごちゃごちゃ色を使いすぎないように気をつけてくださいね😊
いつもアンダーラインどうやるのか分からず、羨ましがっているばかりでしたが、
この記事を読んだら、すぐに出来ましたー
まじありがとうございます！助かりました！
感動！！わかりやすいです！ありがとうございます
わかりやすい説明ありがとうございます！活用させていただきます！
シェアさせていただきました(^^)
いろいろなサイト様を巡りたくさん試したのですが
全くうまくいかず絶望を感じていました(´；ω；`)
こちらの記事の方法だと一発でできました(TT)大感謝です！
今後も活用させてください！ありがとうございます！！
原色大辞典を見て色味を変更したいと思い、#以下を入力しましたが、色味が変更できません！何故でしょうか？？
上記コピーして#の所を色変更したくてもできません！回答お願いします。
匿名さま
コメントありがとうございます。
原色大辞典の色味に変更できないとのことでしたが、＃以降のコードを全く同じ位置に貼りつけされていますでしょうか。
微妙なズレがあると変更できないようです。
あと、最後の ” の部分は残していらっやいますでしょうか。
こちらで確認したところ変更できましたので再度変更してみてください。
すっごくわかりやすかったです！
パニパニさんありがとう！！！
パニパニ様
ありがとうございます。上手くいきました！とてもわかり易い解説でした！！