【WordPress】yStandardカスタマイズ、レタースペーシングで字間を整える

2019年11月24日

今回は、letter-spacingを使ってテキストの字間を調節してみたいと思います。
使用テーマはyStandardです。

字間を整える

ここに文章

通常のテキストは、文章として読みやすいように字間が調整されています。

ここに文章

letter-spacingを指定することで、一文字一文字の間のスペースを調節できるようになります。
今まで半角や全角のスペースで字間を整えていた人も、このletter-spacingを使うと自由に字間を調節できます。

追加cssにletter-spacing

基本的に文字の装飾はcssで行います。カスタマイズの追加cssにletter-spacing用のクラスを作ります。

.ls {
  letter-spacing: .5em;
}

lsの部分は任意の文字に変更可能です。ここではlsとしました。
letter-spacingは0.05や1.25など結構細かく調整できます。字間が空きすぎると文字として読みにくくなるので、空けすぎには注意が必要です。

設定の仕方です。
見出しなどのブロックに、高度な設定から追加cssクラスに先ほど作ったlsのクラスを追加します。

使用例

TITLE部分を見てください。
上が通常の字間です。下がletter-spacingを設定したものです。

タイトルや見出しなど注意を引きたい部分では、ちょっとだけ字間を空けてゆったりさせると効果的だと思います。反対に、通常の文章では字間が空いていると読みづらいのでletter-spacingは設定しない方が無難です。

殊更強調したい言葉に字間を空けると、「さらに」というより「さ・ら・に」という感じになり、一語一語を強く印象づけます。

ただ、PCのように幅が十分な場合はいいのですが、モバイル端末のように画面幅が狭いと改行しているように見えるので、やはり字間の空けすぎは要注意です。

いかがだったでしょうか。
letter-spacingで字間の調節、是非試してみてください。