letter-spacing-thumbnail

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

公開日:

Pocket

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

letter-spacing-01

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

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

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

対処法は?

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

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

p {
    font-size: 16px;
    letter-spacing: .1em;
}

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

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

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

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

以上、「ブログ記事右端にできる不自然な空白をCSSで修正する」という記事をお届けしました。

それでは、また。

-WordPress
-

この記事のタイトルとURLをコピーする
ブログ記事右端にできる不自然な空白をCSSで修正する
この記事はいかがでしたでしょうか。
是非Lognoteの最新ニュース情報を、
いいねしてチェックしてください!

関連記事

child-theme-copy-thumbnail

WordPressの親テーマのファイルを子テーマにコピーする方法

サーバー上のファイルにアクセスするFTPソフト「FFFTP」の設定方法と使い方を解説します。WordPressはサ...

mb-substr-wordpress-thumbnail

WordPressの抜粋表示には「mb_substr」ではなく「the_excerpt」を使った方がいい理由

最近、SEO的に画像にaltとキャプションを入れるのも無視はできないという記事を読み、わたしも実践するようにな …

xserver-morisawa-thumbnail

超美麗!無料で日本語のWebフォントが使えるエックスサーバーの新機能が凄すぎた!

エックスサーバーに日本語Webフォントのモリサワを無料で導入できる新機能が追加されました。モリサワと...

custom-field-affiliate-banner-thumbnail

カスタムフィールドで記事毎にアフィリエイト広告を貼り替える方法

Amazonアソシエイトやアフィリエイト広告は記事にマッチしなければクリック率は上がりません。この記事...

cannot-modify-header-information-thumbnail

WordPressで”Cannot modify header information”の警告が出たときの解決方法

WordPressで"Cannot modify header information"の警告が出たときの解決方法を紹介します。


コメントを入力

日本語が含まれない投稿は無視されます。(スパム対策)

トラックバックURL

管理人のヤマカワです
山形在住、整体院「癒眠」院長
3級ウェブデザイン技能士

にほんブログ村 ブログブログ ブログノウハウへ

ヤマカワ
2017/8/16
子テーマのコピー方法はカスタマイズの基本ですので省略してしまいました。 新しく別ページで解説記事を...
たろ
2017/7/31
子テーマにコピーするの所がわかりにくい
ヤマカワ
2017/7/25
キャッシュの削除は試されましたでしょうか。 それでも反映されないようでしたら、!important...
haruboshi
2017/7/24
全く反映されません。