SWELLのメインビジュアルが「なんか、きたない…」と思ったことはないですか？
モニターサイズに合わせてつくっていても、設定によっては、画像がきたなくみえてしまうことがあります。
どうすれば、きれいなメインビジュアルになるのか、この記事ではその解決策を詳しく紹介します。
メインビジュアルがきたなくなってしまう原因
メインビジュアルがきたなくなってしまう（画質が劣化する）原因は、作成した画像サイズと、表示設定が違うためです。
特に、SWELLでは「画像の高さが重要」で、横幅をモニターサイズで作っていても、高さが足りないと劣化してしまいます。
以下から順番に説明していきます。
SWELLのメインビジュアル（背景画像）について
SWELLのメインビジュアルは、「外観」＞「カスタマイズ」＞「トップページ」＞「メインビジュアル」で設定できます。
メインビジュアル（背景画像）も同じ場所の「各スライドの設定」で変更可能です。
また、スマホ用背景画像、テキスト（メイン・サブ）、ブログパーツなども設定できます。
メインビジュアルの高さ設定
メインビジュアルの高さ設定は、下記の4つから選択できます。
- 画像・動画サイズのまま
例えば、画像の高さが500pxの場合、メインビジュアルの高さは500pxになります。 - コンテンツに応じる
メインビジュアルの中にブログパーツなどを指定している場合は、その高さを含めた高さになります。 - 数値で指定する
自分で高さを指定します。 - ウィンドウサイズにフィットさせる
ブラウザのサイズに合わせて、高さが調整されます。
メインビジュアルの高さを「数値で指定する」にした場合
メインビジュアルの高さ設定の初期値は「数値で指定する」が設定されていると思います。
この高さと同じ画像サイズを作成すれば、きれいな背景画像を表示できます。
もし、この表示サイズよりも小さいサイズの画像を使うと、画像が引き延ばされて汚くなってしまいます（ジャギってしまう）。
「vw」と「vh」
高さを数値で指定する場合、メインビジュアルの高さ（PC）には「vw（ビューポート幅）」、メインビジュアルの高さ（SP）には「vh（ビューポート高さ）」が書かれていると思います。
vw（ビューポート幅）とは、「画面の横幅」のことです。例えば、「50vw」は画面の横幅の50％を使うという意味になります。
vh（ビューポート高さ）とは、「画面の高さ（縦の長さ）」のことです。例えば、「100vh」と書くと、画面の高さの100％を使うという意味になります。
SWELLではメインビジュアルの高さをvwやvhを使って設定でき、仮に「メインビジュアルの高さ（PC）」に「30vw」と指定すると、画面の横幅30％を「画面の高さ」に指定できます。
上記の例を分かりやすく言うと、画面の幅が1980pxのモニターであれば、その30％の594pxがメインビジュアルの高さになります。
「数値で指定」を使った場合は、モニターの横幅と、指定する高さを十分に満たす画像を作成しましょう。また、場合によっては、スマホ用の画像を別途作成した方がいいです。
モニターの高さが800pxで、画像の高さが500pxしかないものを使った場合、メインビジュアルの高さを100vhに指定すると、画像が引き延ばされて汚くなってしまいます。
メインビジュアルの高さを「画像・動画サイズのまま」にした場合
画像の高さを固定してしまえば、画像が汚くなることはありません。
ですが、この場合はパソコン表示の時はいいのですが、スマホ表示の時におかしくなる可能性があります。
スマホ表示の時は、パソコンの画像がそのまま縮小されるだけなので、背景画像の高さが小さくなってしまいます。
そのため、サイズのままを使うならスマホ用の縦長画像を別途作成して使うようにしましょう。
以下は、パソコン画像をそのまま使ったダメな例です。
ブログパーツを使った時の注意点
僕の場合は、ブログパーツを使ってメインビジュアルの上に、さらにキャッチコピーや訴求画像を配置することが多いのですが、注意点が一つあります。
それは、パソコンとスマホで表示が違ってくることです。つまり、パソコンの場合は横長、スマホは縦長ということです。
ブログパーツを使った時のおすすめ設定
ブログパーツを使う時は、横長、縦長の違いに対応するため、以下の設定がおすすめです。
画像を2枚作成しないといけないのですが、CSSを調整する必要がありません。
ブログパーツを作成してからPC用メインビジュアルを作成し、それをスマホに流用するやり方です。
画像作成の手間をさけるため、パソコンもスマホも同じ画像を使いたいところですが、基本的には画像をそれぞれ作った方がきれいになります。
強引にCSSを使う場合の設定サンプル
画像を2枚も作るのが面倒な場合は、メインビジュアルの高さ設定を「数値で指定」にすることもできます。
高さを調整するだけで、うまくいく場合とうまくいかない場合があり、後者の場合はCSSを使って修正するしかありません。
以下はブログパーツで2列のカラムを利用し、左にテキスト、右に画像を配置して、画像一枚にした時のサンプル設定です。
背景画像のサイズは1792 x 612 ピクセルで、表示設定は以下のように設定しました。
このままだと、画像の高さが足りずに画像がきたなくなってしまうので、CSSで高さをautoに指定したり、左側のテキストのサイズ調整を行ったりしています。
これでパソコン表示では画像がきれいになり、以下のような見た目にできました。
なお、パソコン表示の場合はきれいですが、スマホ表示にするとテキストが大きすぎて全部表示できなかったり、右画像が大きすぎて表示がおかしくなったりしたため、CSSでスマホ用の調整も行っています。
調整した結果、それほど違和感がなくなりました。ただし、テキストは絶対に「画像」にした方が見栄えがいいです（下記の画像はテキストですがあくまでサンプルです）。
スマホ表示の場合は画像が荒くなってしまうので、面倒でなければスマホ用に画像作成した方がいいです。
参考までに利用したCSSをのせておきます。
.c-filterLayer:after, .c-filterLayer:before, .c-filterLayer__img {
height:auto;
top:15%;
}
.top-text-size {
font-size:48px;
}
@media not all and (min-width: 960px) {
.c-filterLayer:after, .c-filterLayer:before, .c-filterLayer__img {
height:100%;
}
.top-text-size {
font-size:20px;
}
.p-mainVisual__textLayer .wp-block-image img {
max-width: 50%;
}
}まとめ
SWELLのメインビジュアルをきれいに表示させるためには、メインビジュアルで設定する高さ以上のサイズで、画像を作成することです。もし、難しい場合は「カスタマイズ」で画像サイズに合わせて高さを調整しましょう。
適切な画像サイズを準備しないと、画質が劣化する可能性があります。また、面倒ですが、スマホ用背景画像は別で用意した方が、きれいに表示できるのでおすすめです。
さらに、ブログパーツを使う場合は、PCとスマホの表示差に注意が必要で、場合によっては、CSSでの調整も必要になります。