はてなブログの太字の両端に微小な空白(スペース)を入れて読みやすくする

ブログの文面について、太字の両端にこのように微小な空白(スペース)を入れると、文字の密集度が低くなって読みやすいという情報を得ました。

このとき「ひとつひとつの太字の両端に半角スペースを追加していく」という方法はオススメしません。
ものすごい手間ですし、その割に追加の漏れも発生しうるなど、非生産的だからです。

そうではなく、全ての太字の両端に一発で空白を入れたり、後で幅を一括変更できたら便利だと思いませんか？
CSSに数行を加えるだけで簡単にできるのでオススメです。
特に「はてなブログ」向けにはサンプルコードを用意したので参考にしてみてください。

ということで今回は、CSSを使って太字の両端に一括で空白を入れる方法をご紹介します。

結論からすると、次のようなCSSを追加します。
はてなブログの場合はデザインCSSに次のCSSを貼り付ければOKです。

b::before {
  content: '\00a0';
}
b::after {
  content: '\00a0'
}

上記の\00a0は、レイアウト調整用の空白で、いわゆるHTMLの を意味します。
 以外を使いたい場合は、下表を参考に置き換えてみてください。

また、上記のコードですと<b>タグ全てに適用されます。
本文以外の太字のレイアウトも崩れてしまうなど不都合が発生するようでしたら、本文向けに太字用のCSSクラスを設定するなどお試しください。
(CSSクラスについては本記事では割愛します。)

今回は、CSSを使って太字の両端に一括で空白を入れる方法をご紹介しました。
うまく設定できましたでしょうか？

わりと汎用的でシンプルな設定なのですが、意外とニッチなニーズなのかピタッとくる記事が見つからず、今回自分で書きました。

ブログだけでなくサイト作成での記事レイアウト微調整にも使えます。

皆さんのお役にたてば嬉しいです。

intellista