悩んでいる男性SWELLのメインビジュアルを変更したいんだけど、メインビジュアルの設定方法について教えて。
今回はメインビジュアルの設定について画像付きで詳しく説明しています。
- メインビジュアルの表示設定
- 画像にエフェクトをつける
- 画像をスライドさせる
メインビジュアルでは、フィルター処理、アニメーション、動画の設置などが設定できます。
キャッチーなビジュアルでユーザの目を引きましょう。
SWELLでは「テーマカスタマイザー」と呼ばれる、設定の変更をプレビュー画面で確認しながらカスタマイズ出来る機能があります。
画面左側の設定を変更すると、変更内容が右側にプレビューとして表示されます。
この機能を使って、変更を確認しながら基本設定を進めましょう。
「テーマカスタマイザー」を利用してスマホ画面をレビューを見ながらチェックしたい場合は、画面左下のコントロールを非表示の横のマークで切り替えられます。
SWELLをまだ導入していない方は以下の記事が参考になります。
メインビジュアルの表示設定
「外観」＞「カスタマイズ」＞「トップページ」＞「メインビジュアル」に進みます。
メインビジュアルの表示内容
まずは、メインビジュアルに画像を使うか動画を使うかを選択します。
メインビジュアルを使用しない場合は、表示しないを選択します。
表示設定
続いて表示設定に移ります。
周りに余白をつけるにチェックを入れると、左右に余白が出来ます。
Scrollボタンを表示するにチェックを入れると、メインビジュアル中央下にScrollボタンが表示されます。
ユーザーがクリックすると、メインビジュアルの下まで移動します。
メインビジュアルが大きい場合などに使用します。
メインビジュアルの高さ設定
- 画像・動画サイズのまま
- コンテンツに応じる
- 数値で指定する
- ウィンドウサイズにフィットさせる
の4つから選択します。
自分で指定する場合は、「数値で指定する」を選びます。
数値で指定する場合の単位は、px、vw、vhの3つです
分からない場合は、pxを使用し、数値をずらしてメインビジュアルで確認する作業を繰り返し、ちょうどいい大きさを見つけましょう。
「ウィンドウサイズにフィットさせる」を選択すると、開いている画面ちょうどの大きさでフィットするので、きれいに配置できます。
フィルター処理とオーバーレイカラー設定
メインビジュアルの画像に一工夫加えることもできます。
画像効果はいかの4種類です。
- ブラー
- グレースケール
- ドット
- ブラシ
オーバーレイカラーはメインビジュアルの上から被せてることができます。
例えばセピアにしたい時に赤色で被せると、それらしくなります。
メインビジュアルをスライドさせるスライダー機能
メインビジュアルが画像の場合、5枚まで設定でき、スライダー機能が利用できます。
表示設定
画像を2枚以上セットすると、下記のようなエリアが現れます。
スライドの切り替えアニメーション（フェード／スライド）、表示中の画像のアニメーション（なし／ズームイン／左から右へ）、切り替わる速度や間隔が設定できます。
「ナビゲーション表示の設定」にあるページネーションとは、メインビジュアルが複数ある場合に、下に現れる点のことです。
各スライドの設定
メインビジュアル上にテキストやボタン、ブログパーツを設置することもできます。
上記のように設定すると以下の写真のように表示されます。
以上でメインビジュアルの設定は終わりです。