2023年9月30日WordPressテーマ「Cocoon」のヘッダー下(アピールエリア)に画像を配置する方法を解説します。ヘッダー下に大きめの画像を配置するとインパクトのあるトップページができます。画像を配置する方法1アピールエリアを利用する2ウィジェットを利用するこの2つの方法について解説します。「Cocoon」のヘッダー下にスライドショーを設置する方法はこちらの記事をご覧ください。WordPressテーマ「Cocoon」のトップページにスライドショーを設置する方法を解説します。「MetaSlider」というプラグインを使用します。完成のイメージCcoonのオフィシャルサイトです。ヘッダー周りはこのような配置になっています。Cocoonインストール直後はこのような感じ(グローバルメニューは分かりやすくするため青色にしています。)メニュー下に画像を配置するとこのような感じになります。(メニューは「センターロゴ(デフォルト)」です。)※メニューの設定は「Cocoon設定」>「ヘッダー」>「ヘッダーレイアウト」メニューを「センターロゴ(トップメニュー)」にしました。グローバルメニューが一番上に配置されています。ヘッダー下に画像を配置する方法ヘッダー下に画像を配置する方法は以下の2通りです。12どちらの方法も「トップページのみ」など、配置場所を選ぶことができます。アピールエリアを利用する通常は画像やテキスト、ボタン、リンクなどを配置して使います。今回は画像のみで使います。ウィジェットを利用するウィジェット(コンテンツ上部)を使います。アピールエリアアピールエリアに画像を配置する手順です。画像の用意トップページの全幅をカバーできる画像を用意します。Redux」(Chromの拡張機能)を使って、画面の端から端を測ってみると、1349pxありました。それ以上の大きさの画像(1400×522px)を用意しました。小さな画像だと全幅に拡大され、粗くなってしまうので大きめの画像を用意しましょう。サイト幅の設定まず、「Cocoon設定」>「全体」を開きます。真ん中当たりにある「サイトの均一化」の「サイト幅を揃える」のチェックを外します。これは、ヘッダー下の画像は全幅で表示するので、コンテンツ幅(メインカラムとサイドバー)外側の領域も使うためです。参考までに「サイト幅を揃える」にチェックを入れ、サイト全体の幅をコンテンツ幅に揃えた例です。チェックを入れた場合は、コンテンツ幅の外側は余白となります。どちらにするかはお好みで。「アピールエリア」を開きます。その他の項目は空欄にします。CSSで余白を調整トップページヘッダー下に画像が表示されました。左右は全幅で表示されましたが、画像の下が切れて高さが小さくなっています。このままでもいい感じですが、以下のCSSを子テーマに追加して調整します。画像の幅と高さの比率を保つようにしています。横)の数値は比率を計算するためのものです。画像のサイズに合わせて入れます。この例は、画像が1400×522pxなので、以下コードのように縦が503だと上下が少し切れる形になります。縦522とすると全体が入ります。1400));}スマホではこのように表示されました。画像サイズの比率もPCと同じく保たれています。ウィジェットを使うウィジェットを使って画像を配置する手順です。ここでは、アピールエリアの解説と同じサイズの画像を使います。サイト幅の設定アピールエリアの場合と同様、「Cocoon設定」>「全体」>「サイト幅の均一化」で「サイト幅を揃える」のチェックを外します。ウィジェットに画像を追加ウィジェットの「画像」を「コンテンツ上部」に挿入します。「ウィジェットの表示」で画像の表示場所を選びます。今回はトップページのみで表示させます。「チェック・入力したページで表示」で、「トップページのみ」にチェック。CSSで余白を調整トップページヘッダー下に画像が配置されました。画像の周りに余白があります。(見やすくするために背景を黄色にしてあります。)余白を消すために以下のコードを子テーマのCSSに追加します。100%;}/*メニューとコンテンツ上部の画像の余白調整*/#content-top{margin-top:0px;}余白がなくなり、左右いっぱいに表示されました。スマホではこのように表示されました。まとめCocoonのオリジナル機能のアピールエリアは、今回のようにヘッダー画像として活用できるほか、特定のページへの誘導や、商品等の訴求など様々な目的に利用できます。ウィジェットの活用方法も多様なので、上手く活用すると、ブログ運営がより楽しくなると思います。・買い切り、複数サイトで利用できる当サイトもCocoonから乗り換えました。詳細記事公式サイトCocoonよかったらシェアしてね!URLをコピーしました!URLをコピーしました!tsutchii(ツッチー)WordPressやブログに関する情報、中高年の学びや副業などについて書いています。管理人は、子供の英語教育のため、7年前、家族でフィリピンのセブに移住した引きこもり系おじさんです。これまで、ローカル紙記者、住宅会社や病院の広報、WEB担当、介護助手といった仕事をしてきました。今はNPO法人のサイト運営などネットで仕事をしながら、場所にとらわれずに生活していける働き方を模索しています。