子テーマのカスタマイズ(記事の見た目)

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

文字サイズに関しては多少大きくなったものの、特に問題はなく読みやすくなったため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;
}

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

フォントの変更結果

画像に枠線をつけられるようにする

画像に枠線をつけて目立たせるようにします。
まず子テーマのCSSにこのコードを追加しました。

.wp-block-image.waku {
    border: solid 1px #808080; 
    box-shadow: 0px 0px 5px #808080;
}

これで記事の編集時に画像に追加クラスとして「waku」を設定すると画像に枠線と影が追加されます。

サイドバーの修正

記事ページのサイドバーに何も設定しないとデフォルトのものが表示されてしまうので、トップページと同じものを設定します。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です