Welcart対応テーマ「Twentyfour Seven」のトップイメージ設定方法

「Twentyfour Seven」のトップページのファーストビューは、テーマカスタマイザーから変更でき、「画像」「スライダー」「動画」を設定可能です。
今回は各設定方法についてご紹介します。

Contents

1 「トップ画像」の設定

2 「トップスライダー」の設定

3 「トップ動画」の設定

「トップ画像」の設定

画像1枚をファーストビューに設定したい場合の方法です。

WordPressの管理画面にログインし、「外観＞カスタマイズ＞オンラインショップ設定＞トップページ」と移動します。
「トップ画像」の「画像を選択」をクリック。
ファーストビューで表示したい画像をアップロードし、「画像を選択」をクリック。
「公開」をクリックし設定を保存します。

設定した画像は、ウインドウサイズに合わせ表示されます。
「トップ画像の位置」で画像の位置調整も可能です。また、「トップテキスト」や「トップ画像上コンテンツ」で画像上にテキストやコンテンツを表示することもできます。

「トップスライダー」の設定

複数の画像をファーストビューに設定したい場合の方法です。

WordPressの管理画面にログインし、「外観＞カスタマイズ＞オンラインショップ設定＞トップページ」と移動します。
「スライダーを利用する」をチェック。
「トップ画像2」～「トップ画像4」の設定項目が表示されます。
「トップ画像」から順に「トップ画像2」～「トップ画像4」と画像を設定。
「公開」をクリックし設定を保存します。

スライダー画像は最大4枚まで設定でき、こちらも「トップ画像」と同様、画像上にテキストやコンテンツを表示できます。
4枚より多くスライダー画像を設定したい場合、フックによるカスタマイズが必要になります。

「トップ動画」の設定

動画をファーストビューに設定したい場合の方法です。

WordPressの管理画面にログインし、「外観＞カスタマイズ＞オンラインショップ設定＞トップページ」と移動します。
「トップ動画」の「ファイルを選択」をクリック。
ファーストビューで表示したい動画をアップロードし、「ファイルを選択」をクリック。
「公開」をクリックし設定を保存します。

動画を設定した場合、「トップ画像」や「トップスライダー」より優先して表示されます。
デフォルトでは自動再生されますが、自動再生させたくない場合「トップ動画のポスター」を設定することで動画コントロールが表示され再生ボタンでの「再生」となります。
容量の大きい動画を表示する場合など、サイト表示スピードに大きく影響する場合は設定しましょう。
また、スマホやタブレットのモバイルでは容量の小さい動画を表示したい場合は、「トップ動画（モバイル）」を設定することで表示の切り替えが可能です。