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の文字間隔を開けるということになります。

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

-WordPress
-

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

関連記事

share-count-display-thumbnail

WordPressの記事トップにSNSのシェア数を表示する

ブログをやるうえで、記事をバズらせるというのは一つの夢でもあります。 こちらのサイトによると、バズるブログの60%はファーストビュー(ページを開いたとき最初に目 …

custom-field-ranking-thumbnail

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

アフィリエイターの間では言わずと知れた人気WordPressテーマ「AFFINGER4」 AFFINGER4で特に便利な機能といえば「ランキング表示機能」ですよ …

mts-simple-booking-c-fatal-error-thumbnail

「MTS Simple Booking-C」のフェイタルエラー解決方法

Web予約カレンダーを設置するプラグイン「MTS Simple Booking-C」にフェイタルエラーが出てしまいました。 まず、このように管理画面の一番上に一 …

404-top-redirect-thumbnail

404エラーページへのアクセスを処理する最も簡単な方法

ブログをある程度長くやっていると、どうしても納得がいかなかったり、いろんな理由で記事を削除してしまったという経験は誰しもあるかと思います。 しかし、ネット上には …

stinger6-logo-use-google-web-fonts-thumbnail

WordPressの英字フォントをGoogle Web Fontsに変更してかっこよくカスタマイズする方法

以前書いた記事で「Noto Sans Japanese」というフォントを使ってきましたが、これは日本語専用のフォントなので英字には反映されません。 コードはたっ …


コメントをどうぞ

lognote
2017/5/09
コメントありがとうございます。 本当にそうですよね。 通販サイトは、相手の顔が見えない分信頼第一で成り立っているので、Amazonにはマーケットプレイスの管理をしっかりやっていただきたいで...
匿名探偵
2017/5/09
ここ最近のamazonはちょっとヤバいですね。 4,5000円が相場で微小の変動しかしていなかった市場に、今年度に入って急に1000円切った値で断続的に出品するなど、異常な出品者が様々な商品に出没し...

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