【SWELL】メインビジュアルの設定方法

今回はメインビジュアルの設定について画像付きで詳しく説明しています。

メインビジュアルでは、フィルター処理、アニメーション、動画の設置などが設定できます。

キャッチーなビジュアルでユーザの目を引きましょう。

メインビジュアルの表示設定

「外観」＞「カスタマイズ」＞「トップページ」＞「メインビジュアル」に進みます。

メインビジュアルの表示内容

まずは、メインビジュアルに画像を使うか動画を使うかを選択します。

メインビジュアルを使用しない場合は、表示しないを選択します。

表示設定

続いて表示設定に移ります。

周りに余白をつけるにチェックを入れると、左右に余白が出来ます。

Scrollボタンを表示するにチェックを入れると、メインビジュアル中央下にScrollボタンが表示されます。

ユーザーがクリックすると、メインビジュアルの下まで移動します。

メインビジュアルが大きい場合などに使用します。

メインビジュアルの高さ設定

の4つから選択します。

自分で指定する場合は、「数値で指定する」を選びます。

数値で指定する場合の単位は、px、vw、vhの3つです

分からない場合は、pxを使用し、数値をずらしてメインビジュアルで確認する作業を繰り返し、ちょうどいい大きさを見つけましょう。

「ウィンドウサイズにフィットさせる」を選択すると、開いている画面ちょうどの大きさでフィットするので、きれいに配置できます。

フィルター処理とオーバーレイカラー設定

メインビジュアルの画像に一工夫加えることもできます。

画像効果はいかの4種類です。

オーバーレイカラーはメインビジュアルの上から被せてることができます。

例えばセピアにしたい時に赤色で被せると、それらしくなります。

メインビジュアルをスライドさせるスライダー機能

メインビジュアルが画像の場合、5枚まで設定でき、スライダー機能が利用できます。

表示設定

画像を2枚以上セットすると、下記のようなエリアが現れます。

スライドの切り替えアニメーション（フェード／スライド）、表示中の画像のアニメーション（なし／ズームイン／左から右へ）、切り替わる速度や間隔が設定できます。

「ナビゲーション表示の設定」にあるページネーションとは、メインビジュアルが複数ある場合に、下に現れる点のことです。

各スライドの設定

メインビジュアル上にテキストやボタン、ブログパーツを設置することもできます。

上記のように設定すると以下の写真のように表示されます。

画像を動画にすると、「■ 動画の設定」という設定エリアが出現します。

以上でメインビジュアルの設定は終わりです。

その他、SWELLの初期設定は以下にまとめてありますので、あわせてどうぞ。