はてなブログで強調表示の表現をCSSカスタマイズしてみます。
はてなブログテーマInnocentの強調表示
普通に使うのはemタグとstrongタグです。この他にmarkタグを使用することもあります。
はてなブログではInnocentというテーマを使っていますが装飾はミニマムです。
emタグは斜体（イタリック体）で表示されるのみです。字が斜めに傾いて表示されます。
斜体（イタリック体）による強調は日本語には合わない
この斜体というのが曲者で、もともと欧米の書体の強調表示が元になっています。
なので日本語の強調表示に斜体を当ててみても今一つ強調しているようには見えません。アルファベットなどの欧米書体の中で使う分には良いのですが…
ですので日本語の強調として使う分にはemタグは太字で表示させてみてはどうかと考えました。そしてこの斜体効果は抑止するCSSカスタマイズを行います。
strongタグは通常太字で表示するブラウザが多いです。こちらは赤太字としてみます。
外部CSSファイルにカスタマイズ内容を記述する
外部CSSファイルを使ってCSSカスタマイズする内容を記述します。
外部ファイルを使ってCSSをあてる方法はこちらの記事をご参照ください。
em {font-weight: 700;font-style: normal}
strong {color: #f00}
mark {
font-weight: 700;
color: #000;
background: #ffff99
}emタグは太字設定とし、更にfont-style: normalの記述により斜体効果は止めます。
strongタグは赤色設定として赤太字表示とします。
markタグは通常ですと背景の蛍光色の黄色が強すぎて読みにくいです。なので背景色を薄い黄色に変更してあります。
文字は赤太字、背景が薄い黄色となります。これでかなり読みやすくなると思います。
CSSカスタマイズを行うことにより、はてなブログテーマInnocentで分かりやすく読みやすい強調表示が可能になりました。
強調表示の使い過ぎに注意
これで気を良くして強調表示を使い過ぎないように注意しましょう。
SEO的にGoogle先生から目をつけられる危険があります。オーバーSEO、過剰SEOです。何事もやり過ぎは禁物です。
emタグもstrongタグも記事内で3つ程度に留めておくのが安心ではないかと思っています。10も20も付けるようなものではないです。
マークダウン記法で書くとアスタリスクをつけるだけで非常に簡単に強調表示ができます。なのであれもこれもとやり過ぎるとあっという間に強調表示の数が増えてしまう危険があります。
強調表示は「ここぞ！」というところにだけ付けるのがお勧めです。
