「カッコ」や句読点を含む文章の文字詰め用CSS【コピペOK】

自分のブログを読み返していて「カッコ」や句読点が並んだ時の文字の間隔が気になったことってありませんか？

例えばこんな感じ

最初は「webってそういうもんだろう」と思っていたのですが、ちゃんと詰まっているサイトも見かけるし、記事のタイトルでカッコを複数使用した時に（特にスマホで記事一覧を見た時）すごく気になってしまい「文字詰めできるCSS」を調べてみました。

とりあえず見出しなどの目立つ部分で「文字詰め」を試してみたところ、うまくいって嬉しかったのでご紹介しますね。

もし同じように「ずっと気になってた！」って方がいらっしゃれば、ぜひお試しください。

Safari、Firefox、Chromeで反映を確認済です

「カッコ」や「、」「。」も自動で文字詰めできるCSS
試してみた
文字間を調整するCSSで詰まりすぎを解消！

「カッコ」や「、」「。」も自動で文字詰めできるCSS

文字詰めできるCSSのfont-feature-settingsが凄い！日本語フォントこそ指定したい自動カーニング - ICS MEDIA

「ウェブでは文字詰めはできない」と諦めていませんか。美しいタイポグラフィーのためには文字詰めは「当たり前」というデザイナーは多く、DTPやグラフィックデザインの界隈では基礎テクニックの1つとされています。

ふむふむ。なるほど。

んーと、なんか途中からちょっと難しく感じて吸収しきれてないですが、大事なCSSは見逃しておりません。

下記のCSSを追加すると、（カッコ）や「、」「。」が並んでも自動で文字が詰まるんですね。

＼これが文字詰めのCSS、だーー／

font-feature-settings: "palt";

試してみた

当ブログの記事タイトルに反映してみます。

＼カスタマイズが初めての方はチェック／

Cocoonで追加CSSを記述する手順

STEP-1
管理画面から「外観」→「テーマエディター」と開くと、「style.css」の編集画面が開きます
初めて開いた時には「直接編集をおすすめしない」的な警告文が出ると思います。ドキッとしますが「理解しました」をクリックで大丈夫です。
STEP-2
Cocoon Child：スタイルシート（style.css）という編集画面になっていることを確認し、バックアップをとります
この時点でstyle.css（カスタマイズ用CSSを追加する前の状態）を丸ごとコピーし、テキスト系アプリにペーストして保存しておきます。この後のCSSの追記作業によって不具合が起こった場合、保存していたコードを丸ごとコピペすれば元の状態に戻すことが可能です。
STEP-3
カスタマイズ用のCSSを記述します
/*必要ならばここにコードを書く*/ という文言の下に、追加したいCSSを記述します。
カスタマイズ用CSSコードをコピペでOKです

Cocoonの場合、記事タイトルのセレクタは「.article h1」なので、「style.css」に下記CSSを追加しました。

.article h1 {
  color: #40210f; /*文字色*/
  font-size: 24px; /*文字サイズ*/
  font-weight: bold; /*太字*/
  line-height: 1.5; /*行間*/
  font-feature-settings: "palt"; /*自動で文字詰めする*/
}

見事に詰まりました！

おおー！本当に詰まった！当然っちゃ当然ですが、嬉しいです。

ただ個人的な好みの問題だと思うのですが私には少し詰まり過ぎたようにも見えますね。

さらに追加で文字の間隔をあけるコードも足してみましょう。

文字間を調整するCSSで詰まりすぎを解消！

文字詰めを調整するCSS（コピペOK）

 font-feature-settings: "palt"; /*自動で文字詰めする*/
 letter-spacing: 1px; /*文字間を1pxずつあける*/

＼ CSSを1行追加しました／

.article h1 {
  color: #40210f; /*文字色*/
  font-size: 24px; /*文字サイズ*/
  font-weight: bold; /*太字*/
  line-height: 1.5; /*行間*/
  font-feature-settings: "palt"; /*自動で文字詰めする*/
  letter-spacing: 1px; /*文字間を1pxずつあける*/
}

これでどうでしょうか！？

たったらー！！反映された状態