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

シェアする

  • このエントリーをはてなブックマークに追加
  • 5
出典:無印良品 ぬれタオルで簡単におとせるクレヨン 12色より

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

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

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

はじめに

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

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

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

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

「CSS」と「HTMLタグ」

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

CSS

HTMLタグ

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

CSS

HTMLタグ

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

CSS

HTMLタグ

「CSS」解説

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

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

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

30% 100%

こうなります。

20% 100%

こうなります。

70% 70%

こうなります。

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

プラグイン「AddQuicktag」

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

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

「AddQuicktag」

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

ワードプレス(Wordpress)で記事を書くとき、CSSで登録したHTML icon-download タグを毎回使用するたびに記述するのは非常に面倒です。そこで今回は事前に登録したHTMLタ...

さいごに

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

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

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

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

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

スポンサーリンク

シェアする

  • このエントリーをはてなブックマークに追加

フォローする

スポンサーリンク