ブログ運営が楽しくなる、CSSで蛍光ペン風のデザインを取り入れる方法。

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2017-01-08-14-39-26

こんにちは。本ブログをはじめ、2016年〜2017年は公私ともにいくつかのブログを運営する機会に恵まれ、「文章を書く」ということの楽しさを実感している宮田でございます。

本日はブログの文字装飾の一つとして、蛍光ペン風のCSSデザインを加えるという編集を行いましたので、方法をこちらに備忘録として書き残しておきたいと思います。

今回は、こちらの記事を参考にさせていただきました。↓↓
IT便利帳(2014)『蛍光ペン風にテキスト上をマーカーするCSSを設定してみた』(http://itbenricho.com/highlighter-marker-css.html

<スポンサードリンク>

蛍光ペンがあるとこんな感じ

まずは蛍光ペン装飾を導入するとどんな感じになるのか?を試しに書いてみたいと思います。

蛍光ペンなし

僕の好きな料理は出し巻き卵とスクランブルエッグ、オムライス、親子丼です。つまりは卵を使った料理が大好きです。

蛍光ペンあり

僕の好きな料理は出し巻き卵とスクランブルエッグ、オムライス、親子丼です。つまりは卵を使った料理が大好きです。

といった感じで、文章の中で特に伝えたい部分を強調させることができますね。(例題のセンスのなさはご愛嬌ということで←。)

その他、文字カラーと組み合わせてこんな感じで蛍光ペンを使っても良いですね。ポイントを主張したい時に使えそうです。

ポイント! 今日のポイントは◯◯〜△△です。テストに出るので覚えておくように!

みたいな感じですね。ノートや手帳で蛍光ペンを使っている人は、普段アナログで使用している方法をブログなどのオンラインコンテンツに持ち込むイメージです。

蛍光ペンを取り入れるためのhtmlとcssの編集方法

ではこの蛍光マーカーを実際にWordPressなどのブログで使用する方法について書いていきたいと思います。実際には文字を入力している時に使用するhtmlと、装飾をほどこすcssの2つをいじります。

html

htmlで文章を入力している際、以下のようなタグで囲みます。

css

スタイルシートに下記のcssを追加します。

出力

ここに蛍光ペンの装飾を施します。

基本的にコピペでいけるので簡単ですね。蛍光ペン風のデザインを取り入れてみたい方はぜひ試してみてください。

<スポンサードリンク>

その他の色味

蛍光ペンには黄色の他にもいろいろと色味がありますよね。ブログに蛍光ペンを導入する際も、複数のバリエーションを追記することができます。

の「#ffff66」の部分がカラーコードなので、こちらを編集します。

例えば赤色の「#F7819F」を入れてみるとこんな感じです。

カラーバリエーションについてはこちらのウェブページが参考になります。↓↓
HTML color codes 『HTMLカラーコード』(http://html-color-codes.info/japanese/

<スポンサードリンク>

おわりに

以上、ブログ運営が楽しくなる、CSSで蛍光ペン風のデザインを取り入れる方法。についてでした。いかがでしたでしょうか。

自分のブログに蛍光ペンが入ると、それだけ文章を書くのがより楽しくなったりします。無料かつコピペだけで編集可能ですので、よければぜひぜひ試してみてください。

それでは、本日もここまでお読みいただきありがとうございました。

Share on FacebookTweet about this on Twitter

<スポンサードリンク>

この記事を書いた人
MIYALOG編集部
こころの元気をチャージする。20代のジレンマに立ち向かう、元気が出るライフハックブログ『MIYALOG』の編集部です。現在、ライター様、寄稿ライター様を募集しています。
合わせて読みたい記事

ABOUTこの記事をかいた人

MIYALOG編集部

こころの元気をチャージする。20代のジレンマに立ち向かう、元気が出るライフハックブログ『MIYALOG』の編集部です。現在、ライター様、寄稿ライター様を募集しています。