今回ご紹介するのは賢威7のメインイメージ画像をサイトの横幅いっぱいに広げる方法です。

メイン画像というのはヘッダー画像とは異なり、グローバルメニューの下に表示させる画像のことです。

⇩賢威についての詳しい情報は下記から⇩
賢威公式サイト
 

メイン画像をサイトの横幅いっぱいに表示させよう！

今回は賢威7のクール版を使って説明していきます。

メイン画像は基本的にコンテンツの幅と同じサイズになっています。

今回設定する方法は両端の余白まで広げる方法になります。

ですので、このメイン画像の幅分がすべてピンクになります。

やり方はとても簡単で以下のコードをbase.cssに追記していきます。

.main-image-in {

width: 100%;

}

たったこれだけで大丈夫です。

どんな感じになるかというと

THE・ピンクになりましたね！

サイトを広くみせたい時などに有効なので必要に応じてやってみてください。

トレンドサイトなどはあまりメイン画像を設定する必要もなく、ヘッダーがあればいいので、メインサイト(情報発信)とかにはいいかもしれません。

⇒賢威7カスタマイズ大図鑑へ戻る