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

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

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

SPONSORED LINK

マーカーの施し方

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

  <span style =“background-color: カラーコード ;”>マーカーを引きたい文章や文字</span>

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

  <span style =“background-color: #FFB6C1;”>ライトピンクに染まれ!俺の文字よ!</span>

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

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

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

  私は<span style=“background-color:#FFFF00;”>黄色いバナナが大好きです!</span><span style=“background-color:#81BEF7;”>青いのは硬いし美味しくないから嫌い!</span>

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

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

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

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

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

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

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

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

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

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

そうすけは思った

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

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

作りながら学ぶ HTML/CSSデザインの教科書 作りながら学ぶ HTML/CSSデザインの教科書高橋 朋代,森 智佳子 SBクリエイティブ 2013-12-17 売り上げランキング : 14159

by ヨメレバ

読みやすく、面白いブログにしていけるよう、これからも邁進していきますのでお楽しみに!

以上、何卒よろしくお願い申し上げます。