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

2018.10.092019.05.09

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

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

クレヨンマーカー下線＆網掛け
はじめに

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

無印良品ぬれタオルで簡単におとせるクレヨン　１２色より" data-medium-file="https://i0.wp.com/favorite-fashion.com/wp-content/uploads/2018/10/4934761797236_1260.jpg?fit=400%2C400&ssl=1" data-large-file="https://i0.wp.com/favorite-fashion.com/wp-content/uploads/2018/10/4934761797236_1260.jpg?fit=800%2C800&ssl=1" class="size-full wp-image-22563" src="https://i0.wp.com/favorite-fashion.com/wp-content/uploads/2018/10/4934761797236_1260.jpg?resize=800%2C800&ssl=1" alt="" width="800" height="800" srcset="https://i0.wp.com/favorite-fashion.com/wp-content/uploads/2018/10/4934761797236_1260.jpg?w=800&ssl=1 800w, https://i0.wp.com/favorite-fashion.com/wp-content/uploads/2018/10/4934761797236_1260.jpg?resize=150%2C150&ssl=1 150w, https://i0.wp.com/favorite-fashion.com/wp-content/uploads/2018/10/4934761797236_1260.jpg?resize=400%2C400&ssl=1 400w, https://i0.wp.com/favorite-fashion.com/wp-content/uploads/2018/10/4934761797236_1260.jpg?resize=768%2C768&ssl=1 768w, https://i0.wp.com/favorite-fashion.com/wp-content/uploads/2018/10/4934761797236_1260.jpg?resize=100%2C100&ssl=1 100w, https://i0.wp.com/favorite-fashion.com/wp-content/uploads/2018/10/4934761797236_1260.jpg?resize=320%2C320&ssl=1 320w" sizes="(max-width: 800px) 100vw, 800px" />

出典:無印良品ぬれタオルで簡単におとせるクレヨン　１２色より

はじめに

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

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

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

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

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

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

ＣＳＳ

.crayon-pink {
background: linear-gradient(transparent 50%, #FF69B4 70%);
}

ＨＴＭＬタグ

テキスト

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

ＣＳＳ

.crayon-yellow {
background: linear-gradient(transparent 50%, #FFFF00 70%);
}

ＨＴＭＬタグ

テキスト

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

ＣＳＳ

.crayon-blue {
background: linear-gradient(transparent 50%, #4169E1 70%);
}

ＨＴＭＬタグ

テキスト

「ＣＳＳ」解説

カラーコードの後の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」

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

好きなことだけ通信

HTMLタグを登録したボタンをエディタに設置出来るプラグイン「AddQuicktag」

ワードプレス(Wordpress)で記事を書くとき、CSSで登録したHTML icon-download タグを毎回使用するたびに記述するのは非常に面倒です。そこで今回は事前に登録したHTMLタグのボタンをエディタに設置出来るという大変便利なプラグイン「AddQuicktag」を紹介します。AddQuicktagはじめに記事を書いていく上で、文章内容だけではなく見た目にも、ある程度凝った作りにしていきたいですが、あまりに手間がかかってしまいスピードが落ちては効率が悪いだけでなくフラストレーションも溜まります。この大変便利なプラグイン「AddQuicktag」は...