整体師がWordPressテーマ作りました

Healerは、スマホ&タブレット対応・SEO対策済みの整体院・サロン専用テーマです。

お客様の声やWeb予約カレンダー表示機能など便利機能が搭載されています。

公式サイト

ブログ記事右端にできる不自然な空白をCSSで修正する

letter-spacing-thumbnail

ブログ記事を作成して公開した文章をチェックすると、まれにテキストの右端が不自然なところで改行されていることはないでしょうか。

letter-spacing-01

例えばこんな感じ。
1行目はまだ目をつぶれるとして4行目の改行があまりにも不自然でかなり気になります。

テキスト右端が不自然に改行する原因

この原因には文字のバイト数が関わってくるのですが、半角文字は1バイト、全角文字は2バイトと換算するとどうしても1文字に満たないため余りがでてしまいます。
1行を端までぴったり納まるように記事を書くことは難しく、半角数字や鍵括弧などを使うと右端に空間がでてしまう傾向が強いようです。

対処法は?

この差をなるべく抑えるためには、CSSを使って文字と文字の間隔をわずかに開けてあげることで空間を生まれにくくすることができます。

このブログでは以下のように設定しています。

[css]
p {
font-size: 16px;
letter-spacing: .1em;
}
[/css]

文字間隔がわずかに広がり、右端の空間が以前に比べて落ち着きました。

ここで重要なプロパティーはletter-spacingです。letter-spacingは文字間隔を変更するためのプロパティーで、emの単位でよく使われます。

emという単位は、設定しているfont-sizeを1と見たときの数字の大きさを表しています。
この場合ですと、一文字16pxですので1.6pxの文字間隔を開けるということになります。

フォントサイズはテーマによって異なるので、数字を少しずつ変えながら微調整をしてもらえればと思います。

letter-spacing-thumbnail
この記事が良かったら、いいねして
最新記事をチェックしてください!

Twitterで

コメントを残す

入力エリアすべてが必須項目です。
メールアドレスが公開されることはありません。