子テーマのカスタマイズ（アイコン・ロゴ・アイキャッチ）

ここからは行った変更を書いていきます。

サイトアイコンとサイトロゴの設定

サイトの「カスタマイズ」→「サイト基本情報」からサイトアイコンを設定できます。
サイトアイコンはブラウザーのタブやブックマークバー、WordPress モバイルアプリで表示されます。

サイトアイコンを設定するとブラウザのタブが以下のようになります。

「カスタマイズ」→「LIghtningデザイン設定」からサイトのヘッダーロゴ画像を設定できます。
シンプルな文字だけだったのをデザインされた画像にすることができます。

以下が設定前と設定後です。

検索フォームは特に必要を感じなかったのでメニューやヴィジェットに追加するのをやめました。

アイキャッチの設定

本番サイトでは記事のアイキャッチは160px×120pxですが、Lightningのデフォルトは150px×150pxの正方形です。
この表示サイズを大きくしてみます。

ダッシュボードの「設定」→「メディア」でサムネイルのサイズを入力して「設定を保存」します。

ダッシュボードの「プラグイン」→「新規追加」から「Regenerate Thumbnails」を検索してインストールし、有効化します。
設定を変えても過去の画像のサイズは変化しないので、このプラグインでサイズを変更します。

ダッシュボードの「ツール」→「Regenerate Thumbnails」より、すべての画像を再生成する「」をクリックします。

画像が多ければ多いほど時間がかかるので待ちます。

実行後は使わないのでこのプラグインを削除しても大丈夫です。

次にCSSのカスタマイズをします。

子テーマに以下のコードを追加します。

.media .postList_thumbnail{
    width: 100%!important;
    padding-right:0px!important;
}
@media (max-width: 480px){
    .media .postList_thumbnail{
    width: 100% !important;
    padding-right:0px!important;

}
}

これで記事一覧ページを見るとアイキャッチのサイズが変わっているはずです。

自分のテストサイトはこのように変わりました。
以下の画像はテストサイトのトップから同じ記事のアイキャッチ部分を切り抜いたもので、左が変更前、右が変更後です。

サイトロゴの大きさ変更

サイトロゴの初期設定は280px X 60pxとなっており、少し小さく感じます。
CSSの設定を変えることにより設定サイズを大きくすることが可能になります。

今回は子テーマのstyle.cssに書き加えることによりサイズを変更します。

.navbar-brand img {
max-height: ロゴの高さ;
max-width: ロゴの横幅;
}

自分の場合は子テーマフォルダ内のSCSSファイルに上のコードを書き加え、プラグインのページで再コンパイルしてCSSファイルにコードを適用しました。
そのあと大きめにリサイズしたサイトロゴ画像を設定しなおすとこうなりました。

だいぶサイトロゴのサイズが大きくなりました。

トップに戻るボタンについてはそんなに長い記事を書けないことに気づいたので特に気にしないことにしました。