Twenty Seventeen 投稿記事の行間、文字間隔などの調整

WordPressの基本的なカスタマイズで少しハマったので自分の備忘録を書いておきます。2017年現在、WordPressを新規にインストールした時のデフォルトテーマはTwenty Seventeenです。そのTwenty Seventeenの記事の文字の表示に関するカスタマイズです。

文字サイズ、行間、文字間隔などをカスタマイズすることができます。まず、WordPressの管理画面から「外観」⇒「テーマの編集」をクリックして、スタイルシートを開きます。

853行目くらいに

Remove letter-spacing for all non-latin alphabets

「アルファベットではない言語のletter-spacingを機能させない」と書いてあります。このせいで日本語で書いているWordPressの記事の文字間隔が調整できないようになっています。

/* Remove letter-spacing for all non-latin alphabets */

html[lang="ar"] *,
html[lang="ary"] *,
html[lang="azb"] *,
html[lang="haz"] *,
html[lang="ps"] *,
html[lang^="zh-"] *,
html[lang="bg-BG"] *,
html[lang="ru-RU"] *,
html[lang="uk"] *,
html[lang="bn-BD"] *,
html[lang="hi-IN"] *,
html[lang="mr-IN"] *,
html[lang="el"] *,
html[lang="gu-IN"] *,
html[lang="he-IL"] *,
html[lang="ja"] *,  /* この行を削除する */
html[lang="ko-KR"] *,
html[lang="th"] * {
	letter-spacing: 0 !important;
}

そこで　html[lang=”ja”] *,　の行を削除するかコメントアウトして下さい。この行を無効にすれば日本語でも文字間隔（letter-spacing）の調整が出来ます。「ファイルを更新」をクリックしてスタイルシートの更新を行います。

WordPressの管理画面から「外観」⇒「CSSの編集」をクリックして追加CSSを編集します。

/*
ここに独自の CSS を追加することができます。

詳しくは上のヘルプアイコンをクリックしてください。
*/

この記述の下に行間の幅や文字間隔を変更する記述を書きます。例えば、

/*
ここに独自の CSS を追加することができます。

詳しくは上のヘルプアイコンをクリックしてください。
*/
.entry-content {
	line-height: 1.9;
	letter-spacing: 0.03em;
}

記事本文における行間を1.9、文字間隔を0.03emと指定しています。フォントサイズなどの記述も行えます。これらの数値に関して実際に変更してみるとリアルタイムで右側に表示されている記事本文のスタイルが変更されます。ですので、色々と数値を変更してみて自分の気に入った数値を見つけやすいと思います。

以上、自分の備忘録として書きましたが、いつか誰かのお役に立てればいいなと思っています。