育休男児

1年間育児休暇を取得した男の奮闘記。これからの働き方、DIY、ロードバイクなどの情報も。

カスタマイズ

[CSS]文字にマーカーでなぞったような装飾を施すスタイルシート

更新日:

なべこう(@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

by ヨメレバ

赤間 公太郎,原 一宣。 エムディエヌコーポレーション(MdN) 2013-10-18
売り上げランキング : 2063

by ヨメレバ


-カスタマイズ
-

Copyright© 育休男児 , 2017 AllRights Reserved.