Switchで画像スライダーを表示する|Switchカスタマイズ
Switchで画像スライダーを表示する|Switchカスタマイズ
Switchのヘッダーコンテンツは

  • 画像スライダー
  • 動画
  • YouTube

の3つの設定が可能です。

今回は、この内の画像スライダーの設定方法を解説します。

Switch 画像スライダーの設定方法

WordPress管理画面の左メニュー から
TCDテーマトップページ』という順にクリックします。

『TCDテーマ→トップページ』という順にクリック

『TCDテーマ→トップページ』という順にクリック

すると、「 ヘッダーコンテンツ設定」が表示されます。

「ヘッダーコンテンツのタイプ」から、今回設定する『画像スライダー』を選択し、『設定を保存』をクリックします。

『画像スライダー』を選択し、『設定を保存』をクリック

『画像スライダー』を選択し、『設定を保存』をクリック

画像を選択する

スライダー画像は最大5枚まで設定が可能です。

 静止画として使用したい場合は1枚だけの設定にしておけばOKです。

すぐ下の画面に 「画像スライダーの設定」 が表示されているので、画像を設定していきましょう。

画像スライダーの設定メニュー

画像スライダーの設定メニュー

表示される画像順にアイテム1~5と個別の設定が可能です。

画像スライダー アイテムの設定メニュー

画像スライダー アイテムの設定メニュー

画像サイズはキレイに表示させるために、推奨サイズに設定しておきましょう。

  • PC用の推奨サイズ
    横1450px、縦815px
  • スマホ用の推奨サイズ
    横820px、縦787px

「背景画像のアニメーションタイプ」や「背景画像に重ねる色・透明度」など、まずはデフォルトの状態で設定してみます。

背景画像のアニメーションタイプ・背景画像に重ねる色・透明度の設定メニュー

背景画像のアニメーションタイプ・背景画像に重ねる色・透明度の設定メニュー

キャッチフレーズの設定

「キャッチフレーズ」は背景画像の真ん中から、一文字ずつ打ちこまれて表示されるので、印象付けたいセリフなどを入れるとグッと魅力的になります。

キャッチフレーズの設定メニュー

キャッチフレーズの設定メニュー

今回は「SWITCH cafe」と入力してみました。

設定を保存』をクリックして完了です。

静止画として使用したい場合はこれで終了です。

スライダー表示したい場合は、同じ作業を表示したい画像の枚数分繰り返します。

画像スライダー設定後

画像スライダー設定後

ヘッダー画像のカスタマイズができました。

アイテム1~5で設定した画像が順番にスライド表示されます。

背景画像に重ねる色と透明度の設定

キャッチフレーズが背景と同色で見えにくい場合などは 「背景画像に重ねる色」や「透明度」 を変更してみましょう。

背景画像に重ねる色・透明度の設定メニュー

背景画像に重ねる色・透明度の設定メニュー

例えば、

  • 「背景画像に重ねる色」を黒→青
  • 「背景画像に重ねる色の透明度」0.3→0.6
  • 「フォントサイズ」40→70

に変更してみます。

背景画像に重ねる色・透明度変更後の画像スライダー

背景画像に重ねる色・透明度変更後の画像スライダー

画像の色が暗くなり、キャッチフレーズが見やすくなりました。

このように画像と文字のバランスを、試行錯誤しながら決めていきます。

まとめ

今回は、Switchのヘッダーコンテンツの画像スライダー設定方法を解説しました。

サイトの顔であるヘッダーコンテンツはとても重要なので、ぜひ自分好みにカスタマイズしてみてください。

  • Switch公式紹介サイトはこちら Switch

スポンサーリンク

スポンサーリンク

おすすめの記事