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

シェアする

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

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

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

はじめに

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

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

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

「CSS」と「HTMLタグ」

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

CSS

HTMLタグ

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

CSS

HTMLタグ

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

CSS

HTMLタグ

「CSS」解説

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

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

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

30% 100%

こうなります。

20% 100%

こうなります。

70% 70%

こうなります。

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

プラグイン「AddQuicktag」

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

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

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

便利すぎ!HTMLタグを登録したボタンをエディタに設置出来るプラグイン「AddQuicktag」
CSSで登録したHTMLタグを、毎回使用するたびに記述するのは非常に面倒です。そこで今回は事前に登録したHTMLタグのボタンをエディタに設置出来るという大変便利なプラグ...

さいごに

これで見た目がより上がり、ブログテキストの表現する引き出しがまた一つ増えたかと思います。もちろん、どのようにどんな場面で使うかは皆さまのセンス次第になります。

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

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

合わせて読みたい。

WordPress CSS 壁紙を背景に簡単カスタマイズ!
WordPress CSSで、全ての背景を壁紙にする簡単カスタマイズをご紹介します。はじめにこのブログのテーマは「Simplicity」で作成しているのですが、「Simplicity」で背景...
コピペで簡単設置!アドセンス等広告上スポンサーリンク!
Googleアドセンス等の広告上に、表示されている『スポンサーリンク』はアドセンスに限らず広告を表示させるにあたって必ず表示させる義務があります。その『スポンサー...
Googleアドセンス ページ単位の広告の紹介 5分で設定!
Googleアドセンス で広告を出されている方でGoogle Adsenseホームに、ページ単位の広告の紹介が表示されているかと思います。モバイル用のアドセンス広告なのですが、そ...
WordPress CSS ヘッダー領域にウィジェットを5分でカスタマイズ設置!
WordPress CSSで、ヘッダー領域にウィジェットを設置出来ない、テーマにウィジェットエリアを、5分で簡単設置出来るようにするカスタマイズをご紹介します。はじめにこ...
WordPress CSSカスタマイズ 回転するサムネイル画像3種
WordPress CSSで、このブログで使用している回転するサムネイル画像3種類のカスタマイズをご紹介します。コピペしてすぐ使用して頂けます。CSSカスタマイズ各回転サ...
WordPressブログカードと、TOC目次を1分で中央寄せに。
WordPressの、ブログカード(テーマ「Simplicity」の場合)と、プラグインTable of Contents Plusの目次タイトルを簡単に1分で中央寄せるカスタマイズです。CSSカス...
アドセンス他広告プライバシーポリシー『ブログ用テンプレ』
Googleアドセンス広告を貼り付けてブログ及びサイトを運営していくには、プライバシーポリシーの設置が必要となってきます。今回は「なまたまご情報局」で設置したもの...
便利すぎ!HTMLタグを登録したボタンをエディタに設置出来るプラグイン「AddQuicktag」
CSSで登録したHTMLタグを、毎回使用するたびに記述するのは非常に面倒です。そこで今回は事前に登録したHTMLタグのボタンをエディタに設置出来るという大変便利なプラグ...
便利すぎ!リンク切れエラーをお知らせしてくれるプラグイン「Broken Link Checker」
ブログを初めて記事をどんどん重ねていくと、過去の記事でリンク切れを起こす事が頻繁に出てきます。通常ならこのリンク切れは全く気が付かないままですが、切れたリン...
目次を自動で生成するプラグイン「Table of Contents Plus」
色々なブログを見られている皆様は、ブログの見出し前に、階層構造になっている上に各見出しをクリックしたら、その対応する見出しへジャンプする大変便利な機能を持っ...
WordPressでグローバルメニューにFontアイコンを設置するプラグイン
この『なまたまご情報局』のグローバルメニューにfontのアイコンが設置されているのにお気付きでしたでしょうか?固定メニューへのアイコン設置は、固定メニューのタイ...
WordPressお問い合わせページを5分で作成。
WordPressでお問い合わせページをプラグイン、Contact Form 7、で5分で作成してしまうという記事です。  Contact Form 7ブログを作成したら、固定ページにお問い合わせ...
WordPressで広告を任意に設置するプラグイン
WordPressでアフィリエイトを、記事だけに設置して、固定ページ内には設置したくない、もしくはその逆とか任意に設置を指定出来るプラグイン、Widget Logicを記事にした...

スポンサーリンク

シェアする

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

フォローする


スポンサーリンク

トップへ戻る