子テーマのカスタマイズ（記事の見た目）

記事の見た目（文字サイズ、文字フォント、ラベル、文字間の縦横、画像の線引き）などを前のデザインを参考にしながら、ライトニングのデザインに合うようにいい感じに調整していきます。

文字サイズに関しては多少大きくなったものの、特に問題はなく読みやすくなったためLightningのデフォルトに合わせます。

フォントを変更する

フォントに関してはメリハリをつけるために記事の見出しには明朝体、本文にはゴシック体を使うことにしました。
その中でもWindowsとMacで見た目を共通にできる「游ゴシック」と「游明朝」を使ってみようと思います。

まず、Lightningのフォントの設定を見てみます。
サイト画面を開いてデベロッパーツールを出して見てみると以下のようになっています。

body {
font-family: メイリオ, Meiryo, “Hiragino Kaku Gothic Pro”, “ヒラギノ角ゴ Pro W3”, “Hiragino Sans”, “Noto Sans JP”, sans-serif;
overflow-wrap: break-word;
}

これはフォントの第一候補が「メイリオ」となっています。
そこで子テーマのCSSにこれのfont-familyの先頭に「”游ゴシック”, YuGothic,」を追加したものを書きます。

Windowsのデフォルトでは游ゴシックはやや細めに設定されているので「font-weight:500」を設定して文字を太くします。

最後にIEで游ゴシックを使うと謎のズレが生まれるようなのでIEがブラウザの時は今まで通りメイリオを使うようにします。
以下が子テーマのCSSに追加したコードです。

body {
font-family: “游ゴシック体”, YuGothic, “游ゴシック”, “Yu Gothic”,メイリオ, Meiryo, “Hiragino Kaku Gothic Pro”, “ヒラギノ角ゴ Pro W3”, “Hiragino Sans”, “Noto Sans JP”, sans-serif !important;
font-weight: 500 !important;
}

/*IE用の記述*/
_:-ms-input-placeholder, :root .tittle {
font-family: Meiryo, sans-serif;
}

次にトップページの記事の見出しと記事ページのタイトルを游明朝にします。
デベロッパーツールで調べたところそれぞれのクラス名が「media-heading.entry-title」、「entry-title」と分かったので以下のように子テーマのCSSにコードを追加します。

.media-heading.entry-title,.entry-title {
font-family: “游明朝” , “Yu Mincho” , “游明朝体” , “YuMincho” ,メイリオ, Meiryo, “Hiragino Kaku Gothic Pro”, “ヒラギノ角ゴ Pro W3”, “Hiragino Sans”, “Noto Sans JP”, sans-serif !important;
font-weight: 700 !important;
}

以下の画像のように見た目が変わりました。