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

2019 8/24
メインビジュアルの設定方法
記事上のウィジェットエリア

このページではSWELLの「メインビジュアル」機能についての設定方法を解説していきます。

「メインビジュアル」とは、トップページを開いた時に最初に目に飛んでくるエリアのことです。

画像を1枚だけ設定して画面いっぱいに表示させることもできますし、画像スライダーを設置することもできます。
今後のアップデートで、動画も埋め込めるようにしていこうかなと思っています。

目次前広告表示エリア
目次

カスタマイザーの起動

SWELLでは基本的にテーマカスタマイザーから全ての設定を行うことができます。

カスタマイザーの起動方法については以下の記事を参考にして下さい。

あわせて読みたい
【SWELLの設定】「テーマカスタマイザー」の使用方法
【SWELLの設定】「テーマカスタマイザー」の使用方法SWELLの設定やカスタマイズは、ほぼ全て「テーマカスタマイザー」機能で行うことができるように設計しました。「テーマカスタマイザー」機能はリアルタイムで設定が反映...

以下では、カスタマイザー上での操作について説明していきます。

メインビジュアルに関する設定は、[TOP]メインビジュアル設定というメニューから設定できます。

メインビジュアルに「画像スライダー」を使用する

メインビジュアルの表示内容」という項目から、「画像スライダー」を選択します。

メインビジュアル選択
カスタマイザー > [TOP]メインビジュアル設定

各スライドごとの設定

スライドの枚数は最大5枚まで設定できます。

各スライドごとに、

  • PC用画像
  • スマホ用画像
  • タイトル
  • テキスト
  • リンク先URL
  • ボタンテキスト
  • alt属性値

について設定できます。

スライダーごとの設定
カスタマイザー > [TOP]メインビジュアル設定

アップデートによる追加項目

ver.1.2.3より、各スライドごとの設定項目が追加されました。

  • ボタンカラー
  • ボタンタイプ
  • テキストカラー
  • テキスト位置

の4つが追加されています。

ver 1.2.3で追加された項目
ver 1.2.3で追加された項目
  • スライド[1]だけ設定した場合はスライダーとしては機能せず、単純にメインビジュアル画像として利用できます。
  • 「リンク先URLが入力され、かつボタンテキストが空」の場合、画像全体がリンクとなります。

スライダー機能に関する設定

スライダーとしての機能として、

  • スライドエフェクトの選択
  • 左右の矢印ナビゲーションの有無
  • スライダー下のページネーションの有無
  • スライド速度
  • 次にスライドされるまでの間隔

について、カスタマイザー から設定することができます。

画像スライダー設定
カスタマイザー > [TOP]メインビジュアル設定

アップデートによる追加項目

ver. 1.2.3より、表示中のスライド画像をゆっくりズームアップしたり、横に移動させるアニメーションを付け加えることができるようになりました。

スライドの表示中アニメーションの設定
スライドの表示中アニメーションの設定
メインビジュアルの追加機能DEMO

切り替えアニメーションは「フェード」、スライドの表示枚数は「1」にしてお使い下さい。

スライド画像へのフィルター処理設定

SWELLでは、メインビジュアルのスライド画像に対してフィルター効果を加えることができます。

  • ブラー効果
  • グレースケール化
  • ドット加工
  • ブラシ加工

の4種類を用意しております。

メインビジュアル画像フィルター
カスタマイザー > [TOP]メインビジュアル設定

スライド画像の不透明度・背景色の設定

フィルター効果とは別に、スライダー画像の「不透明度」と「背景色」を設定することができます。

これにより、スライダーにカラーオーバーレイを被せたような表現にできます。

不透明度と背景色
カスタマイザー > [TOP]メインビジュアル設定

例えば、背景色を青色にして不透明度を0.5程度まで下げると、以下のような見た目になります。

カラーオーバーレイ効果

スライド画像のサイズ設定

・画像サイズの比率のまま表示する
・高さを直接指定する
・ウィンドウサイズにフィットさせる

の3種類から選択できます。

高さを直接指定する場合、高さは「PC (幅960px以上)」と「 SP(幅960px未満)」で分けて指定できます。

メインビジュアルの高さの設定
カスタマイザー > [TOP]メインビジュアル設定

高さを指定する場合の数値は、単位付きで、かつ半角で入力してください。 pxvw, vhなどが有効です。(%は使えません)

さらに「スライダー周りに余白をつける」にチェックした場合、スライダー画像の周りに均等な余白がつきます。

画面にフィット・余白あり

スライダー上に表示するテキストやボタンを固定する

各スライダーごとにテキストやボタンなどを設定することができることはすでに説明した通りですが、これらのテキストの内容を固定させ、その後ろで画像だけをスライド表示させることが可能です。

テキストの固定表示設定」にチェックをすると、スライド[1]に設定しているタイトル・テキスト・ボタンが固定表示されるようになります。

テキスト固定表示
カスタマイザー > [TOP]メインビジュアル設定
記事下のウィジェットエリア

この記事が気に入ったら
フォローしてね!

目次
目次