初心者向け!WordPressで蛍光マーカー・アンダーラインを引く方法(CSS)と反映されない場合の処置(コピペOK)

PROGRAMMING

こんなかんじで←マーカーを引く方法を紹介しています。
それと合わせて、その時の僕が陥った「反映されない!」場合の対応方法も書いていきます。

一般的なアンダーラインといえば、アンダーライン←これですが
ちょっとシンプルすぎるなーっと思ったので、マーカーで引いた感じのアンダーラインを引けるように設定してみました。

使えるとオシャレ&分かりやすさが増すので是非使ってみてください!

スポンサードサーチ

蛍光ペン風のアンダーラインを使えるようにするには

蛍光ペン風のアンダーラインを引くには基本的にはたった1つの設定だけでOKです。

①CSSの設定
CSS(Cascading Style Sheets)は簡単にいうと、「記事の中で『marker_yellow』って書いたらこの色のアンダーラインをこの色で引いてね」という意味です。

②AddQuickTagに追加←やっておくと楽
記事の中に毎回「marker_yellow」って打っていたら大変ですよね?ボタン一つで簡単に入力できる設定がプラグインのAddQuickTagです。

コピぺOK!蛍光ペン風アンダーラインのCSS

サンプルを4色用意してみました。

水色のライン
緑色のライン
ピンク色のライン
黄色のライン


.marker_blue {
background: linear-gradient(transparent 55%, #d6e4ed 55%);
}
.marker_green {
background: linear-gradient(transparent 55%, #b8f2b7 55%);
}
.marker_pink {
background: linear-gradient(transparent 55%, #fdd5c9 55%);
} .marker_yellow {
background: linear-gradient(transparent 55%, #fffb93 55%);
}

↑コピペ使ってCSSに使ってください!

WordPressをお使いの方は
【外観】→【テーマエディター】→【style.css】の一番下に追加


上記でうまくできない場合は、【外観】→【カスタマイズ】→【追加CSS】に追加

スポンサードサーチ

蛍光ペン風アンダーラインの使い方

記事の中に、このようにすれば反映されます。

<span class="marker_yellow">黄色のライン</span>

黄色のライン

ビジュアルではなくテキストモードで書いてみてください。

毎回この<span class=”marker_blue”>◯◯◯</span>タグを入力が面倒なのでぼくの場合はAddQuickTagを使っています。

AddQuickTagの使い方


【設定】→【AddQuickTag】

このように入力すると

っと表示されるので、入力の時に便利です!

スポンサードサーチ

CSSに入力してるのにマーカーが反映されない場合

僕がこの現象におちいりいろいろ探してみると、AddQuickTagの記載が間違っていました。
<span class=”marker_blue”></span>の「 " 」」が「 ” 」になっていました😱
これほんと分かりにくい。
自分でコード書く場合はいいですが、どこかからのソースをコピペするときはご注意ください!