今回はトップページのトップ画像の変更方法をお伝えします。
目次
トップ画像の変更方法（Cocoon）
画像サイズ
サンプルサイトの画像サイズは「横1,260×縦400px」で作成しています。
基本的に好きなサイズで大丈夫ですが、横は小さいサイズだと画像が荒くなってしまいます。
そのため少なくとも横幅1,200px以上の画像をおすすめします。
画像の縦幅と横幅はあとで使用するので必ず控えておいてください。
画像サイズの調べ方は次の手順で確認できます。
画像についての注意点
スパソコンでうまく表示されても、スマホで見ると橋が切れる場合があります。
文字を入れたり、装飾をする際には、両端に余裕を持たせて画像を作るようにしてください。
変更手順
手順①：管理画面からCocoon設定を開く
WordPress管理画面左の[Cocoon設定]➤[Cocoon設定]をクリック。
手順②：アピールエリアを選択
手順③：変更する画像を選択して保存
画像を選択したら、下にスクロールして【変更をまとめて保存】をクリック。
手順⑤：テーマファイルエディタを開く
WordPress管理画面左の【外観】→【テーマファイルエディター】をクリック。
画面右が画像のように【Cocoon Child 】、【スタイルシート】になっていることを確認。
それ以外になっている場合は、必ず【Cocoon Child 】、【スタイルシート】を選択してください。
手順⑥：スタイルシートの編集
こちらはCSSというプログラムを触ることになります。
関係のない部分を触ると、他に影響を及ぼしてしまうので、必ず次の部分以外は触らないでください。
下にスクロールして【アピールエリアのサイズ設定】を探してください。
画像の赤枠部分の数字を今回使用する画像のサイズに変更します。
左が画像の縦幅で右が画像の横幅です。
変更ができたら、下にスクロールして【ファイルを更新】をクリックして完了です。
問題なく表示されているか確認を忘れずにおこなってください。
