僕ちょっと思ったんですけども。
そういえば、強調する手段として太字の<b>をよく使いますよね…？ねえ？
マーカーにしてもそうなのですが、強調したくてマーカー使いますよね？
あとは、文字サイズを大きくして強調して見せるとか。
人それぞれに強調のセンスってあると思います。面白おかしく絶妙な強調の見せ方をする人もいますよね。
そういうのは見ていて羨ましいと素直に思います。
ただし、僕はそれらを見ていて一つの罠に掛かっているところを発見したりします。
重要性を示すタグ<strong>が使われていない
ああ、なんかそんなのあったな、くらいの気持ちで構わないと思うんですよ。ただし、使うか使わないかってなると、その<b>の類で囲って強調している文字の部分ってのは、実はただの気分のノリで強調したい文字ではなくて記事にとって重要なところなんじゃないの？なんて場合、見た目だけの変化を付けるマーカーや太字を使うのではなく、<strong>で囲ってあげたらグッと記事の中身も変わるのでは？と、思うのです。
つまり、使った方が良い。
<strong>を見落とす罠がある
文字にマーカーの類、いわゆる文字を強調させるための見た目を変えたい時にとても便利なのが、そこらの類を紹介している支援サイト、コピペOKのコピペサイトだ。そのコピペサイトに記載していないパターンもあるのだけど、注意書きとして記しているところもある。
<strong>もちゃんと使ってくださいね。 なんて書いているところはちゃんとある。
見落としたり忘れたりと、なんだかんだあるのは仕方がない。
しかし、記事の評価を詰めようとしている時に、強調する表現方法の中身を使い分けることが出来たら、ひょっとしたら微量でも違いが出てくるかもしれない。
<strong>の使い分けは簡単
たとえば、よく見るのが<span>を使ったマーカー。<span class="sample01"></span>の様にsample01に色を指示してると思う。
.sample01 {
background: linear-gradient(transparent 75%, #66ccff 75%);
}
この<span class="sample01"></span>を<strong class="sample01"></strong>
に変更してあげるだけで、普段使っている文字の強調を、より重要性の高い文字に変えてあげることが出来る。
しかし、ひとつの記事に多く使いすぎると、良くはない。とも言われている。一つの記事に3か所前後と考えて、どの文字列に重要性を持たせるかを考えて使ってほしい（なんてことが、どこかのサイトに書いてあった）
これが使えれば間違いなしの強調タグ5選
普通に使って太字になる<strong>をベースにこれさえあれば、あとは使う本人のカスタマイズ次第って感じのコードを紹介したい。強調・重要性を持たせたいマーカー
パーセントを示す数値の2か所は基本同じ設定。数値を低くするとマーカーの厚みは太くなる。
色の種類はWEB色見本 原色大辞典 - HTMLカラーコードなんかを参考に。
.sample01 {
background: linear-gradient(transparent 75%, #66ccff 75%);
}
<span class="sample01"></span>をそのまま使うと細字になるのだけど、strongに変えると太字になる。
spanのまま、ただの強調として使いたい尚且つ太字にしたい場合はfont-weight: bold;を追加する。
.sample02 {
background: linear-gradient(transparent 75%, #66ccff 75%);
font-weight: bold;
}
マーカーで文字を覆いたい場合は以下の通り。
これも太字にしたい場合は下記のコードにfont-weight: bold;を追加する。
.sample03 {
background-color: #66ccff;
font-weight: bold;
}
マーカーをしながら文字の色を変える事も当然できる。
.sample04 {
background: linear-gradient(transparent 75%, #66ccff 75%);
color: #ff0000;
}
下線を使った強調もできる。
.sample05 {
border-bottom: 1px solid #ff3333;
font-weight: bold;
}
まとめ
ずらっと見ての通り、強調させたい為の装飾方法として使う<span class="~~のspanの部分をstrongに書き換えてあげると良いだけ。これだけ。これまでただ使っていた人も、これからコピペサイトを経て使う人も、必要な部分はspanをsrtongに変えて重要性のある文字列をGoogleにアピールすると良いと思います。
