なべこう(@fukujion)です。 今回は、ブログ本文中の文字にまるでマーカーでなぞったような装飾を施す方法をご紹介します。
ちょうどこんな感じです。
スタイルシートに記述
まずはスタイルシート、WordPressならstyle.cssに以下の文字を打ち込みます。
.mk-yellow{color:#101010;background-color:#fafa4c;text-shadow:none!important}
.mk-green{color:#101010;background-color:#8cd965;text-shadow:none!important}
.mk-darkblue{color:#ffffff;background-color:#0b69db;text-shadow:none!important}
.mk-blue{color:#ffffff;background-color:#087FC4;text-shadow:none!important}
.mk-lightblue{color:#101010;background-color:#aee2fc;text-shadow:none!important}
.mk-red{color:#ffffff;background-color:#fda2a2;text-shadow:none!important}
.mk-orange{color:#101010;background-color:#f7a74b;text-shadow:none!important}
.mk-pink{color:#101010;background-color:#fdc2d6;text-shadow:none!important}
黄、緑、ダークブルー、青、水色、赤、オレンジ、ピンクを用意しました。
スタイルを呼び出す
適応したスタイルを呼び出すには、マーカーでなぞりたい文字を
<span class="mk-pink">マーカーでなぞりたい文字</span>
で囲みます。””の中の文字はそれぞれマーカーの色に対応していて、「mk-pink」ならピンク、「mk-yellow」ならイエローになります。
この文字は任意なので、スタイルシートの方で.の後ろを好きに変えてもらってかまいません。
ぜひ、おためしください。
 |
北川 貴清,窪木 博士,KLEE Atelier*Spoon,小浜 愛香,佐々木 恵,棧敷 友香子,錦織 幸知,前川 昌幸,山川 祐一郎 エムディエヌコーポレーション（MdN） 2013-11-20 売り上げランキング : 12982
|
 |
赤間 公太郎,原 一宣。 エムディエヌコーポレーション（MdN） 2013-10-18 売り上げランキング : 2063
|
