Cocoonでメインビジュアルを作る方法【WordPress】

Webサイトには、サイトにアクセスした際に最初に目に入る画像｢メインビジュアル｣というものがあります。

メインビジュアルをキチンと設定しておけば、サイトのクオリティが高く見えたり、サイトの雰囲気を伝えたりと非常に役立つ存在です。

今回は、そんなメインビジュアルをWordPressの人気無料テーマ｢Cocoon｣で実装、カスタムする方法について解説します。

Cocoonテーマ｢アピールエリア｣を設定する

まずはCocoonテーマでのメインビジュアルの設定方法について解説します。

Cocoonテーマでは、｢メインビジュアル｣という設定項目はなく｢アピールエリア｣という項目で設定します。

色々と詳細項目があるので、下記を参考に設定してみてください。

｢アピールエリアの表示｣｢エリア画像｣の二つを設定しておけば最低限OK、
残りは必要に応じて設定してください。

アピールエリアの表示するページはメインビジュアルということを考えるとフロントページのみ表示するのが基本ですが、当サイトのように高さが小さめの細長い画像を使うのであれば全ページ表示でも問題ないでしょう。

CSSで大きさをカスタムする

アピールエリアの設定によって、メインビジュアルのベースができました。
次はCSSを使ってメインビジュアルの大きさを調整していきます。

CSSの設定はWordPressの｢外観｣｢カスタマイズ｣｢追加CSS｣より可能です。

とりあえず、当サイトのCSSはこんな感じ。

.appeal{
 width: 100%;/*横いっぱいに表示*/
 height: calc(100vw * calc(400 / 1920));/*幅に合わせて高さを変更*/
 /*400/1920は画像の比率に合わせて変更*/
 max-height: 400px;/*最大高さ*/
 margin: auto;/*中央揃え*/
 background-size: contain;/*画像全体を表示*/
}

当サイトのメインビジュアルは画像の縦横比を保持しつつ横いっぱいに表示するよう調整しています。

似たようなメインビジュアルにしたいのであれば上記のコードをコピーしてカスタマイズしてみてください。

その他のよくあるパターンとして、画像を画面全体に表示したい場合は下記のようにすると良いでしょう。

.appeal{
 height: 100vh;/*縦画面いっぱいに表示*/
 background-size: cover;/*縦横比を保持して拡大*/
}

画像と画面の比率が違うと画像が見切れてしまうのが難点ですが、画面いっぱいに画像を表示することができるので印象的なメインビジュアルにすることができるカスタマイズです。

サイズはCSS次第で自由自在に設定できるので色々と試してみてください。

メインビジュアル作成のアイデア

最後に｢そもそもメインビジュアルってどんな感じで考えれば良いの？｣という方に向けて、メインビジュアルの種類を紹介します。

色々な方法がありますが、写真かイラストであればフリー素材で探せて実装も比較的簡単なので、迷ったらどちらかを使用しておけば良いでしょう。

写真

比較的簡単に作成できてクオリティも高くできるので一番オススメの方法です。

フリー素材をそのまま使うと素人感が出てしまうので、画像を暗くしたり文字を入れると良いでしょう。

また、フリー素材だと他のサイトと被ってしまう場合もありますが、AI画像や自身で撮った写真を使えばオリジナリティも出せます。

イラスト

サイトにオリジナリティを出したいのであればイラストがオススメです。

写真だとサイトの雰囲気に合うものが見つからなかったりしますが、イラストは内容や雰囲気などをサイトに合わせて用意できます。

ただし作成の手間やスキルを必要とするので写真より作成ハードルは上がります。

自分で描けないけれどイラストが良いという方はイラスト素材を使用するという方法もありますが、イラスト素材はそのままだと使いにくくデザインソフトで調整する必要があるので、やはり多少の手間はかかります。

動画

画像やイラストなどの静止画と比べると伝えられる情報量が格段に多いのが強み。

しかしその分撮影や編集など手間も一番かかる方法なので、動画に関するサイトであったり自分が撮影や編集のスキルを持っていないのであればオススメしません。

3Dグラフィック

立体的で見ているだけで面白いサイトになる。

そもそもコーディングスキルがないと実装できず、さらにカスタマイズなども考えるとかなりコーディングに詳しくないといけないので、動画同様コーディングに関するサイトや元々コーディングスキルを持っていないのであればオススメしません。

ちなみに、僕はモチロンできません！

まとめ

Cocoonテーマでのメインビジュアルの作成方法について解説しました。

アピールエリアならテキストやボタンも簡単に入れられるので、大抵のことは問題なく実装できるはずです。

メインビジュアルはサイトで最初に目に入るものということもあって、キチンと設定すればサイトのクオリティがグッと上がるので、面倒ですがしっかりと考えて作っておきましょう。