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

関連記事

Instagramの埋め込みが表示されないバグは「@マークでTwitterの自動リンクを作る」のコードが原因だった

WordPressではfunctions.phpにコードを追加することでさまざまな便利な機能を使えるようになり …

Font Awesomeを導入してWordPressで最も簡単にアイコンフォントを使う方法

WordPressに簡単にアイコンフォントを導入できる「Font Awesome」のご紹介です。 目次1 Fo …

ボタンじゃないSNSのシェア数だけを表示する【WordPress】

ブログをやるうえで、記事をバズらせるというのは一つの夢でもあります。 こちらのサイトによると、バズるブログの6 …

salon-for-wordpress-theme-healer-thumbnail

整体院・サロン専用WordPressテーマ「Healer」をリリースしました

このたび、整体院・サロン向けWordPressテーマを制作しました。テーマ名は「Healer(ヒーラー)」とい …

WordPressで記事ごとに閲覧回数を表示する方法

「自分のブログもそこそこ読まれるようになってきたなー」 そんなとき、どれくらい読まれているのか訪問者に見せたく …


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)

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

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