広告あり

【Cocoon】「カッコ」や句読点を含む文章の文字詰めをするCSS【カスタマイズ】

文字詰めを調整するCSS
記事内に広告が含まれています

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

例えばこんな感じ
文字詰する前

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

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

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

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

スポンサーリンク

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

ふむふむ。なるほど。

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

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

\ これが文字詰めのCSS、だーー /
font-feature-settings: "palt";

試してみた

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

\ カスタマイズが初めての方はチェック /
  • 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で詰まりすぎを解消!

文字詰めを調整する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ずつあける*/
}

これでどうでしょうか!?

たったらー!!反映された状態
CSSで文字詰めしつつ、少しだけ文字間をあけた場合

おーーー。ほんのちょっとですが、間隔があきました!

私はこっちの方が好みなので、しばらくこれでいきたいと思います。
(そのうちしれっと元に戻したり再調整している可能性はあります)

「もうちょっとだけ間隔あけても良いかな?どうかな?」と悩んだのですが、もし環境によって文字詰めが効かなかった時にパラパラして見えそうなので、微調整にしておきます。

文字の間隔は実際にブラウザで見ながらお好みで設定してみてくださいね!

letter-spacing: 1px; /*文字間*/

赤文字の部分の数値を大きくすると文字の間隔が広がります。
(px以外の単位でも指定可能)

記事タイトル以外にもいろんな部分に指定できるので、興味をもたれた方はお試しください。

私はとりあえず見出しなどの大きな部分、短文でアピールしたい部分にのみ導入しています。

「文字詰めしたいところは決まったけれど、CSSの記述方法がわからない」「まずCSSって何!?セレクタって何!?カスタマイズ怖い!」って方は下記参考記事がとてもわかりやすいです!

\ カスタマイズ初心者さんにおすすめの記事 /

ちょっとしたところも自分好みにできると気持ち良いです

コメント

スポンサーリンク