WordPress CSS クレヨンマーカーの下線をつけられるカスタマイズ！

WordPress(ワードプレス)のブログで、クレヨンのようなマーカー下線をご覧になった事はありませんか？こんなのや、こんなのや、こんなのです。

これを非常に簡単なCSSカスタマイズとHTMLタグでのご紹介です。面倒なHTMLタグも登録してエディタボタン化までご紹介させて頂く、至れり尽くせりな内容です！

クレヨンマーカー下線 ＆ 網掛け

はじめに

ブログのエディタでは、テキストを様々なツールで付加する事が出来ます。太線だったり、下線だったり、テキスト色変更したり、打ち消し線を入れたり。

ブログの見た目にこだわりが出れば、ブログ自体の構成も自然と中級者のように見られ、印象はぐっと良くなるかと思います。

そこで、今回ご紹介するのが、表題の　クレヨンマーカー下線です。

※PCサイト＆AMPではないモバイルページ有効。AMP（Accelerated Mobile Pages）では非対応。

「ＣＳＳ」と「ＨＴＭＬタグ」

クレヨンマーカー下線　ピンク色

ＣＳＳ

.crayon-pink {

background: linear-gradient(transparent 50%, #FF69B4 70%);

}

ＨＴＭＬタグ

<span class=”crayon-pink”>テキスト</span>

クレヨンマーカー下線　イエロー色

ＣＳＳ

.crayon-yellow {

background: linear-gradient(transparent 50%, #FFFF00 70%);

}

ＨＴＭＬタグ

<span class=”crayon-yellow”>テキスト</span>

クレヨンマーカー下線　ブルー色

ＣＳＳ

.crayon-blue {

background: linear-gradient(transparent 50%, #4169E1 70%);

}

ＨＴＭＬタグ

<span class=”crayon-blue”>テキスト</span>

「ＣＳＳ」解説

カラーコードの後の50％の部分がクレヨンマーカー下線の割合％です。

linear-gradient(transparent がグラデーションの割合です。

グラデーションパターン例

30％　100％

.crayon-pink2 {

background: linear-gradient(transparent 30%, #FF69B4 100%);

}

こうなります。

20％　100％

.crayon-blue2 {

background: linear-gradient(transparent 20%, #4169E1 100%);

}

こうなります。

70％　70％

.crayon-yellow2 {

background: linear-gradient(transparent 70%, #FFFF00 70%);

}

こうなります。

カラーコードと、ともにお好みで調整して使用して下さい。

プラグイン「AddQuicktag」

そして実際使用していくとなると、使うたびに、毎回使用するたびに記述するのは非常に面倒です。

そこで、前回記事にさせて頂いた事前に登録したHTMLタグのボタンをエディタに設置出来るという大変便利なプラグイン

「AddQuicktag」

こちらをご紹介しますので、是非効率よく便利にご使用下さい。

さいごに

これで見た目がより上がり、ブログテキストの表現する引き出しがまた一つ増えたかと思います。

もちろん、どのようにどんな場面で使うかは皆さまのセンス次第になります。

私はあまりセンスには自信がありません?

これを読んで下さった方々は私以上にセンス良く使って下さる事を願います。

今回も少しでも皆様のお役に立てれば幸いです。