Lognote

ネット集客に強い整体院サイトを制作

letter-spacing-thumbnail

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

公開日:

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

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の最新ニュース情報を、
いいねしてチェックしてください!

関連記事

comment-coupon-thumbnail

整体院の口コミ促進!コメントをくれた方に電子クーポンを配る方法

先日、WordPressの標準コメント機能を使って、お客様の声を掲載する方法を紹介しました。今回はそのおま...

custom-field-ranking-thumbnail

WordPressのカスタムフィールドを使って商品ランキングを表示する方法

アフィリエイターの間では言わずと知れた人気WordPressテーマ「AFFINGER4」 AFFINGER4で …

wordpress-category-tag-change-thumbnail

WordPressのカテゴリー⇔タグを変換して訪問者に親切なブログ作りをしよう

ブログ訪問者はサイドバーなどに設置されたカテゴリーから「Wordpressの記事数が多いから参考になる記事があ …

advanced-code-editor-thumbnail

テーマ編集で行数を表示するWordPressプラグイン「Advanced Code Editor」

WordPress内でテーマを編集するとき行数表示がなくて不便だなと感じることはないでしょうか。今日はそんな悩 …

mb-substr-wordpress-thumbnail

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

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

コメントを入力

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

トラックバックURL

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


Lognote
2017/9/12
ご報告いただきありがとうございます! それは知りませんでした! メーカーの違いとかもあるのでしょう...
通りすがり
2017/9/12
比較的新しいカメラではサムネイル見れないらしいですよ。 うちもコーデック入れましたが2016年発売カ...
Lognote
2017/9/05
>> 堀田様 お役に立てて何よりです! 他に良い予約プラグインが出てくれればいいんですけ...
堀田
2017/9/05
ありがとうございました。 PHPを7 にしたらエラー吐き出して、有料版は PHP7 対応なんで有料...
Lognote
2017/8/16
>> たろ様 子テーマのコピー方法を省略しておりました。 解説記事を書きましたので、よろ...
たろ
2017/7/31
子テーマにコピーするの所がわかりにくい