ブログの文字にマーカーっぽい装飾（ハイライト）を施す方法

いつも大変お世話になっております、そうすけ（@sosuke14jp）です。

前々から気になっていたんですが、ブログで文字の装飾にマーカーで線を引いたようなものを使っている方っていますよね。こんなやつです。実はずっと使ってみたかったんですが、どうすれば使えるのかがよく分からなかったんです。

でも先日CSSを勉強していて「これか？」と試してみたところ、そうすけも無事マーカーを引くことができたので、今回はそのやり方を紹介したいと思います。

マーカーの施し方

マーカーっぽい装飾はCSSを用いて施します。HTMLのテキスト入力画面で以下のとおりに入力すればマーカーを引くことができます。

マーカーを引きたい文章や文字

カラーコードについては、HTMLカラーコードなどで自分好みのものを見つけましょう。例えば次のように入力すると・・・

ライトピンクに染まれ！俺の文字よ！

実際にはこのように表示されます。

　　ライトピンクに染まれ！俺の文字よ！

さらにはこんな感じで入力すると・・・

私は黄色いバナナが大好きです！青いのは硬いし美味しくないから嫌い！

実際にはこのように表示されます。

　　私は黄色いバナナが大好きです！青いのは硬いし美味しくないから嫌い！

とっても簡単ですね(^^)

誰に対してアピールしたいかで装飾を使い分ける

マーカーなんか使わなくても、アピールしたいなら太字（タグやタグ）と斜体（タグやタグ）、それと文字の色を使い分ければ十分じゃない？なんて思う方もいるかと思います。しかし使い分けることにはきちんとした理由があります。

というのも、タグやタグには読者の視覚に対してアピールを行なうのとは別に、もうひとつ意味がある（というか正しくはこっちがメイン）のです。それが検索エンジンへのアピールです。

一般的にタグは「より強調」、タグは「強調」という論理的な意味も含んでおり、これらが使われている部分を検索エンジンは重要な情報として読み取ります。なので、ただ単にちょっと太字でアピールしたい記事のテーマとは関係のないどうでもいい文章なんかにこれらのタグを使ってしまうと、無駄なアピールとなってしまうわけですね。

そしてこれらの論理的強調タグをあまりにも使いすぎると検索エンジンにはあまり好かれません。どれが重要な情報なのか分からなくなってしまうからです。論理的強調タグを使いすぎることで、最悪検索エンジンにスパム扱いされてしまい、大きなペナルティ（検索順位が大幅に下る）を課せられることもあるようです。

まあそうなるとタグやタグなどの視覚的強調タグで装飾すればよいのですが、そうすけのMarsEditではなぜかこれらを入力しても全てタグとタグに置き換えられてしまうんですね。どこかで設定を変更すれば改善できるのかもしれませんが、いかんせんまだ勉強不足で解決方法が発見できておりません（自信満々）

ということで、同じような悩みを抱えている方（もちろんそうでない方も）は装飾にマーカーを使ってみてはどうでしょうか。

そうすけは思った

これで今後も遠慮なく、やたらめったら視覚的なアピールを行なうことができます。レインボーアタック！！！とか出来るわけですね。そうすけブログはピカソ作品のような色合いに生まれ変わります！

まあこれは冗談ですが、視覚的なアピールにも色々と工夫を加えて、より読む人にとって読みやすい文章をかけるように心がけていきたいものです。しかしそれにしても、CSSって本当に便利ですね。そうすけもまだまだ勉強中ですが、まだ詳しく理解されていない方はぜひ時間を作って勉強してみましょう。こちらの書籍がオススメです。