マーカーを引いたような文字装飾を可能にするCSSの変更はコレだ!

ネット活用術

CSSに変更を加えておき、投稿本文中にあるHTMLコードを指定するだけで、まるでマーカーを引いたような文字装飾を可能にする方法を知りました!

しかし、見出しタグのようにH1~H6など決まった箇所ではなく、今回は自分で任意の文字中に装飾を施すという方法です。

本文中にマーカーを引いたように文字を装飾する

 

見出しタグの指定にCSSを作っておいた場合、それ以降はWordPressのビジュアルエディターから、見出し(1~6)などを指定するだけで勝手に適応されるのですが、今回はそのようにはいきません。

本文中のこの箇所にマーカーを引きたいっといた場合に、テキストエディターに次のHTMLコードを指定します。

コードの中に「任意の文字」とあるところは文字を入れてください。つまりマーカーを引きたいところの文章です。

黄色のマーカー

<span class="marker_yellow">任意の文字</span>

黄緑色のマーカー

<span class="marker_lime">任意の文字</span>

水色のマーカー

<span class="marker_water">任意の文字</span>

桃色のマーカー

<span class="marker_pink">任意の文字</span>

オレンジ色のマーカー

<span class="marker_orange">任意の文字</span>

上記のテキストコードが反映されるためには、事前に元となるCSSの編集をする必要があります。

CSS編集が得意な方は直接、テーマのCSSを編集してください。

CSSへと追記する場合、次のコードをコピーして貼り付けて下さい。

.marker_yellow {
background: linear-gradient(transparent 60%, #ffff66 60%);
}

.marker_lime {
background: linear-gradient(transparent 60%, #66FFCC 60%);
}

.marker_water {
background: linear-gradient(transparent 60%, #66ccff 60%);
}

.marker_pink {
background: linear-gradient(transparent 60%, #ff66ff 60%);
}

.marker_orange {
background: linear-gradient(transparent 60%, #ffa500 60%);
}

最後に

今回はこちらのページを参考にさせていただきました!

蛍光ペン風にテキスト上をマーカーするCSSを設定してみた | IT便利帳
色々なブログを拝見していると、とても気になるの強調サインがあります。それは蛍光ペンのようなマーカーで塗られたような強調サインです。例えば、こんな色。 ずっと気になっていたので、IT便利帳でも設定してみることにしました。 蛍光ペンマーカーを設定(CSS) 蛍光ペンマーカーのCSSは「linear-gradient()属性...

今まで、文字の装飾でアンダーラインなどを引いて目立たせることが出来たらいいなあと思っていたのですが、マーカーを引いたようにできるのはかなり目立ちます。

すごく長い間このような方法がないものかと探していただけに、この投稿にたどり着いた時は本当に嬉しかったです!

やっと見つけたと!そして実際にマーカースタイルで文字が装飾された時には感動しました!

ちょっとした工夫で、強調したいところを強調できるのですが、このマーカースタイルは文字の温かみが損なわれません。

手書きで文章を書いたような印象を読み手に伝えることもできると思います。

上記のページでは、4種類のマーカーを掲載されておりましたが、私はオレンジ色のものも使ってみたいので、少しオリジナルのものを加えています。

orangeというカラーを追加して、合計5色のコードを紹介させて頂いていますのでよろしかったらそちらのコードもお使いいただければと思います。

トップへ戻る