【Cocoon】ヘッダーの下にウィンドウ幅いっぱいで画像を表示する

Cocoon

当サイトのトップページ(ホーム)上部にある画像のように、ウィンドウ幅いっぱいで画像を表示する方法です。

アピールエリアを使って画像を表示する

記事の一番上に画像を貼っても、ウィンドウ幅いっぱいに画像を表示させることはできません。コンテンツ領域の子要素になるので、これをはみ出して表示させるのは無理があります。

なにかいい方法はないか探していたところ、Cocoon公式のトップページのヘッダー下部にウィンドウ幅いっぱいで画像が表示されているではないですか。これはいいなと思って何を使っているのか調べたところ、アピールエリアを使って画像を表示しているというのがわかりました。

アピールエリアとは、ヘッダー下の目立つ位置で、訴えたい事柄や、誘導したいページなどをアピールするためのもので(公式より)、上記したようにCocoon公式のトップページでも使われています。

画像のみを表示するというのは、アピールエリア本来の使い方ではないのかもしれないですが、これがもっとも簡単そうだったので、今回はこれでウィンドウ幅いっぱいで画像を表示してみます。

アピールエリアを使うには、Cocoon設定の「アピールエリア」で設定を行います。今回は画像だけを表示したいので以下の箇所を設定します。設定前に下記を参照して画像を用意しておいてください。

  • アピールエリアの表示
    画像を表示したいページを指定します
  • 高さ
    画像が見える高さを指定します(画像の高さと同じに
  • エリア画像
    表示したい画像を指定します
  • エリア背景色
    必要ない場合もあるので、とりあえずは、そのままか、適当に。後から変更しても問題ありません。

今回は画像を表示させるだけなので、「エリア背景色」より下の設定はなにも入力せず、そのままで結構です。

画像を用意する

用意する画像ですが、アピールエリアの高さは、200px以上と決まっているので、画像もそれにあわせたものを用意します。画像の幅は、想定されるウィンドウ幅より大きいものがいいのですが、大きな画像を用意するのが難しい場合は、画像の両端が背景色に馴染むものか、画像を横に並べたときに違和感のでないものを用意します。ちなみに、当サイトトップページで使用した画像サイズは、横1244px・縦208pxです。

CSSでカスタマイズする

画像を用意してアピールエリアの設定を行ったら、該当するページを開いてアピールエリアが表示されたか確認してください。もし、表示されていない場合は設定をもう一度見直してください。

CSSでカスタマイズする前に、アピールエリアがウィンドウ幅によってどのように変化するかを確認しておきます。

アピールエリアが表示されているページでブラウザの幅を変えてみてください。
ウィンドウ幅が変化するとそれに合わせてアピールエリアとその背景画像のサイズが変わって行くのがわかるかと思います。

今回はアピールエリアのカスタマイズを次のようにCSSで行います

  • アピールエリアのコンテンツエリアを非表示に
  • アピールエリアの高さを固定
  • アピールエリアの背景画像サイズをオリジナルサイズで固定
  • 背景画像が小さいときは横に並べる

CSSを書く場所ですが、当サイトではトップページのみこの方法で画像を表示しているので、トップページの「カスタムCSS」に書いています。
複数のページで表示する場合は、「style.css」に記述します。

まず、アピールエリアのコンテンツを表示するための半透明の白いボックスを非表示にします。

.appeal-content{
  display:none;
}

 

アピールエリアは、ブラウザのウィンドウ幅によって高さが変わるので、これを固定します。#appealのブロックを追加してください。min-height:は、アピールエリア設定の「高さ」と同じ値にしてください。

/* アピールエリア(追加) */
#appeal{
  min-height:208px;
}
.appeal-content{
  display:none;
}

アピールエリアに貼った画像は、基本的にウィンドウ幅100%で表示されます。これだとウィンドウの幅によって画像サイズが変わるので、画像をオリジナルサイズのまま表示するようにします。

/* アピールエリア */
#appeal{
  min-height:208px;
  background-size:auto auto; /*追加*/
}
.appeal-content{
  display:none;
}

 

画像幅がウィンドウ幅より小さいと画像の両端に空ができます。このような場合に同じ画像を横にならべてごまかすようにします。画像を横に並べて表示する場合は以下のように追加

/* アピールエリア */
#appeal{
  min-height:208px;
  background-size:auto auto;
  background-repeat: repeat-x;  /*追加*/
}
.appeal-content{
  display:none;
}

 

画像を横に並べる設定を行わない場合は、アピールエリアの背景色を画像に合うものに変更します。背景色の変更は、Cocoon設定→アピールエリアで設定するか、以下のように追加します。

/* アピールエリア */
#appeal{
  min-height:208px;
  background-size:auto auto;
  background-color:#2e2e2e;  /*追加*/
}
.appeal-content{
  display:none;
}

 

カスタマイズが終了したら、アピールエリアを貼ったページを開いて、画像が表示されているか、ブラウザのウィンドウ幅をいろいろ変えて表示がおかしくならないかなど確認してください。

以上ウィンドウ幅いっぱいに画像を表示する方法を書いてみましたが、思いついてとりあえずやってみたことなので、これが最善の方法なのかどうかはわかりません。もっと良い方法、まちがっている箇所などありましたら、ご指摘いただけるとありがたいです。

コメント

  1. Misa より:

    質問失礼いたします。

    アピールエリア画像のオリジナルサイズ固定のCSSを使用させていただきました。
    PCでは固定サイズで表示されましたが、モバイルから見るとその画像の一部が拡大されて表示されていました。
    モバイルで拡大せずに画像を表示させたい場合のCSSをもしご存知であれば教えていただきたいです。

    よろしくお願いいたします。

    • nigemizu より:

      モバイルで画像の一部が拡大されるとのことですが、

      画像の一部というのは画像を並べたときのつなぎ目あたりですか?
      または、画像自体が拡大されて粗くなったとか?
      画像の表示領域が大きくなったとか?

      この辺を詳しくお願いします。こちらで症状を再現できればなんとかなると思うのですが、こちらでは再現できませんでした。あと使用した画像のサイズも教えてください。