ブログの本文で強調したい部分には <strong>
や <b>
を使いますが、デフォルトのスタイルではただの太字になるだけです。
これだとちょっと味気ないときは、CSS でデザインしてみましょう。
文字や背景の色を変えたり、蛍光ペンでマーカーをひいたような感じにすると、重要なポイントをより一層伝えやすくなりますよ。
強調文字の CSS デザインサンプル
強調の意味を持たせる HTML タグには <strong>
<b>
<em>
があります。
これらは主に検索エンジンに対して重要性を伝えるタグで、見た目だけ強調したいなら <span>
で指定することもできます。
それぞれの使い分け方などは後述します。まずはデザインサンプルをご覧ください。
デフォルトのスタイルは太字
現在使用しているテーマ・テンプレートで特に指定がない場合、<b>
や <strong>
で囲ったテキストはただの太字になります。
重要な部分は太字になります
<strong>重要な部分は太字</strong>になります。
これを基本形としてアレンジしてみましょう。以下、class 名をつけたサンプルをご紹介します。記事内すべての強調文字を変更する場合は、<strong>
に直接指定してください。
border で線を付け加える
まずは border を指定して線をつけるシンプルな装飾から。
「solid」を使ったシンプルな下線の場合、2 px の赤い線にすると以下のようになります。
※ わかりやすくするために左右に余白を設定してあります
重要な部分に赤い下線がつきます。
.sample01 {
border-bottom: 2px solid #ff3333;
margin: auto .4em;
}
「dotted」にすると点線になります。緑色の点線を上下につけてみましょう。
重要な部分の上下に緑の点線がつきます。
.sample02 {
border-top: 2px dotted #66ff66;
border-bottom: 2px dotted #66ff66;
}
「double」は二重線。サンプルでは一括指定していますが、上下左右それぞれ指定することもできます。
重要な部分を紫の二重線で囲みます。
.sample03 {
border: 4px double #9966ff;
}
線の種類や色、大きさを調整していろいろ試してみてください。囲む場合は余白を調整したほうが読みやすいでしょう。
border – CSS: カスケーディングスタイルシート | MDN
background-color で背景色をつける
つづいて、背景色を変更してみます。
よく見るスタイルですが、黄色にすると蛍光ペンでマークしたような感じになります。
重要な部分の背景色を黄色にします。
.sample04 {
background-color: #ffff66;
}
文字色を変えているサイトもよく見ますね。
重要な部分の背景色と文字色を変えてみます。
.sample05 {
background-color: #ffff66;
color: #ff3333;
}
下線までつけてしまうと、「どんだけ強調したいんだよ!」というぐらいきつくなるのであまりおすすめしません。
重要な部分の背景色と文字色を変えて下線をつけてみます。
.sample06 {
background-color: #ffff66;
color: #ff3333;
border-bottom: 2px solid #ff3333;
}
linear-gradient で蛍光ペンぽくする
背景色を黄色にすると蛍光ペンでマークしたような見映えになり、線の太さを変えるとおしゃれ感が増します。
重要な部分を蛍光ペンでマークした感じにします。
.sample07 {
background: linear-gradient(transparent 60%, #ffff66 60%);
}
ピンクバージョンはこちら。
重要な部分を蛍光ペンでマークした感じにします。
.sample08 {
background: linear-gradient(transparent 60%, #ff99ff 60%);
}
数字を変えると線の太さが変わるので、お好みで調整してみてください。
font-size で大きさを変える
強調文字の大きさを変えてみましょう。赤い下線と複合させてみます。
重要な部分の文字を大きくして下線をつけます。
.sample09 {
border-bottom: 2px solid #ff3333;
font-size: 120%;
}
文字を大きくする場合、line-height
が px で固定されていると文字が重なってしまいます。
また、各行にサイズの大きい強調文字が並ぶとガタガタになって読みづらくなるので、多用する場合は注意してください。
transform で文字を斜めにする
テキストを傾けると、かなり目を引きます。
重要な部分の文字を斜めにしてみます。
.sample10 {
transform: rotate(-10deg);
display: inline-block;
}
<strong>
などのインライン要素にそのまま transform
を指定しても斜めになりません。
display:inline-block
を付け加えるのがポイントです。
ただ、角度をつけすぎると読みづらくなって意味がありませんし、余白を調整しないと前後の行にかぶってしまうのが難点。お遊びで使ってみてください。
text-shadow で影をつける
文字にほんのりシャドウをつけると、立体感が出ます。
重要な部分の文字に影をつけてみます。
.sample11 {
text-shadow: 1px 1px 0 rgba(0,0,0,.2);
}
文字色を変えるとこんな感じ。
重要な部分の文字色を変えて影をつけてみます。
.sample12 {
text-shadow: 1px 1px 0 rgba(0,0,0,.1);
color: #ff3333;
}
シャドウの色やぼかし具合を変えるとまた違った印象になりますが、読みやすくするのはけっこうセンスが問われます。
さりげなくつけましょう。
強調文字 strong / b / em の使い分け方と定義
代表的なものをご紹介してきましたが、各パターンを複合させてサイズやカラーを変えると組み合わせは無限とも言えます。
たんにコピペするのではなく、ブログのスタイルとマッチするよう調整してください。統一感がないと読みづらいですからね。
強調をあらわす HTML タグには 3 種類あるのですが、それぞれ微妙に定義が異なります。
強調タグ使い分け表
そこまで厳密に考えなくても良いのですが、表にまとめてみました。
タグ | HTML Living Standard の定義 |
---|---|
b | 他と区別したいテキストに使う。重要性は伝えない。 |
em | 強調したいときに使う。重要性は伝えない。 |
strong | 重要性・深刻性・緊急性を伝える。 |
あまりよくわかりませんね…
<b> と <strong> の使い分け方
HTML4 では、見た目だけ強調したいときは <b>
で囲み、検索エンジンに重要性を伝えたいときに <strong>
で囲む、という感じでした。
個人的に「強調する部分=重要な部分」だと思っているので、<b>
を使うことはありません。記事内で <strong>
を使う回数もかぎられています。
強調したい部分が多すぎると全体的にぼやけてしまうので、セクションごとに「ここがポイントです!」というのを伝えるぐらいがちょうどよいですね。
なお、WordPress で記事を書く場合、「B」で太字にすると <strong>
でマークアップされます(クラシックエディターでもブロックエディターでも同じ)。
<em> は主に英文で使う
<b>
と同じく <em>
も使う機会が少ないかもしれません。
CSS に何も指定していないデフォルトの状態では文字が斜体になるのですが、メイリオなどの日本語フォントは対応していないので注意してください。<em>
で囲んでも見た目に変化がありません。
英文でアクセントをつけたいときに使う、というイメージでよいと思います。
SEO では <strong> と <b> はどちらが有効なのか
強調文字のマークアップは、<strong>
と <b>
のどちらが有効なのか、という点が気になるかもしれません。Google は、どちらもまったく同じように扱う、と明言しています。
Back then, whenever we checked, strong and b were treated the exact same in terms of ranking and scoring and how they’re indexed and all that sort of stuff.
Is there a difference between the “strong” and “b” tags in terms of SEO? – YouTube
HTML の定義においてもそこまで厳密に考える必要はないと思いますので、どちらかで統一しておけばよいでしょう。
<strong>
を多用すれば検索評価が劇的に向上する、なんていうことはないですから、その点だけ誤解しないようにしてください。逆に、使いすぎたからペナルティになる、ということもありません。
ブログ初心者が覚えておきたい HTML タグ一覧と基本的な使い方
まとめ
見出しタグ <h1>
~ <h6>
の CSS サンプルはよく見るのですが、強調タグ <strong>
のサンプルはあまり見かけないので作ってみました。
大切なのは、ブログのイメージに合わせた読みやすい装飾です。人それぞれ何が読みやすいと感じるか違うので正答はありませんが、ここら辺を追究していくのもブログの楽しみ方ではと思います。
読みやすいブログ記事を書くための基本とライティングテクニック