コピペで出来る!強調したい文字を蛍光ペンでマーカーを引いたようにする方法

ブログの本部で強調したいキーワードや文章がある場合、太字や斜線、下線などを使用します。しかし、デフォルトの状態では少し物足りないと感じる方もいらっっしゃるでしょう。

今回はCSSを少しいじって強調したい文字に蛍光ペンでマーカーを引いたようにする方法をご紹介します。文字や背景の色を変えることもできますよ。


 

本日もiKouya.comをお読みいただきありがとうございます!Kouya(@4_kouya)です。

ブログの本文に強調したいキーワードがある時みなさんはどのように表現しているでしょうか。私は今までデフォルトの太字を使用していたのですが、他の方々のブログを拝見していると強調したいキーワードが蛍光ペンでマーカーが引かれているような表示がされていました。

すごく見やすいと思ったと同時に、この表現方法を取り入れたいと思いましたので今回は簡単に導入方法について解説したいと思います。今回ご紹介しているCSSコードはこちらのサイトを参考にさせていただきました。

 

デフォルトの状態を確認

デフォルトの強調を確認

まずは何もしていない状態を見てみます。この時のCSSコードはこのようになっています。

 

蛍光ペンを引いたようにする方法

蛍光ペンでマーカーを引いたようにする方法をご紹介します。今回はコピペで出来る簡単な方法をご紹介します。今回の方法はstrongのタグを置換する方法です。簡単にできるのでオススメの方法ですね。

ただし、気をつけなければいけないのは全ての強調タグにこの表現が適用されてしまうのでで色合いなどはチェックしてください。

 

CSSコードをいじってみる

それでは背景に色をつけてみましょう。蛍光ペンと言ったら黄色でしょう。

スクリーンショット 2015-12-12 23.34.23

この時のCSSコードはこのようになっています。このCSSコードをstyle.cssに追記すればOKです。

ちなみに数字を変えると線の太さが変わり、色も自由に設定することができます。お好みで調整してみてください。

 

色を変えて自分好みを探そう

このように自由に色を設定することができます。ご自身のブログに合った色を探しましょう。参考までに幾つかご紹介します。個人的にはピンクがいい感じですね。

緑の蛍光ペン

スクリーンショット 2015-12-12 23.37.08

赤の蛍光ペン

スクリーンショット 2015-12-12 23.35.34

ピンクの蛍光ペン

スクリーンショット 2015-12-12 23.34.56

 

強調タグを使ってみる

最後に実際に変更が反映されているかどうか強調タグ<strong>を使ってみてみましょう。強調タグは文字を選択し「B」と書いてある部分をクリックすれば使用することができます。

スクリーンショット 2015-12-12 23.27.12

 

まとめ

以上、コピペで出来る!強調したい文字を蛍光ペンでマーカーを引いたようにする方法のご紹介でした。CSSにコピペで少しいじるだけでデフォルトと違ったオシャレな強調文字を利用することができるのでオススメのカスタマイズですね。参考になれば幸いです。

 

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です