トップ画像（1カラムテーマ、2カラムテーマ）
1カラムテーマ 2カラムテーマ
「外観」＞「トップ画像」
サイトのトップページに表示されるメインビジュアル（トップ画像）の設定ができます。
トップ画像とは、トップページの最初の画面に表示される大きい画像エリアのことです。
切り替え間隔
複数のトップ画像を設定した場合に、それぞれの画像が切り替わる時間（秒）を設定できます。初期状態は5秒に設定されています。
トップ画像を追加
初期状態では３つのアニメーションが設定されています。
有効／無効
スイッチアイコンを切り替えることで画像を非表示にすることができます。
トップ画像をすべて削除、または無効化することでトップ画像を非表示にできます。すぐにコンテンツを表示したい場合などにおすすめです。
編集
鉛筆アイコンをクリックすると詳細な設定ができます。
削除
ゴミ箱アイコンをクリックすると画像を削除できます。
トップ画像上の文字
トップ画像上にお好きな文言を設定できます。
見出し文章
- トップ画像上に大きめのサイズで表示されます。
- 制限文字数は30文字です。
説明文
- 「見出し」の下に小さめのサイズで表示されます。
- スマートフォンの場合はスペースの関係で非表示になります。
- 制限文字数は150文字です。
- 改行指定はできません。
文字の大きさ
極小から特大まで選べます。
文字の色
「トップページに出す画像」の色味の反対色となるよう変更してください。入力欄をクリックすると色見本が開きます。
トップ画像の設定
トップ画像には以下の項目を設定することができます。
トップ画像の種類
トップ画像は、
- アニメーション
- 画像アップロード
- YouTube動画
の３つから選択できます。
アニメーション
上部の選択肢から「アニメーション」を選ぶと、用意された５種類のアニメーションから選択ができます。
アニメーションの種類は
- 紙吹雪
- 幾何学模様
- 夜空
- 円
- グラデーション
の５つから選択できます。
また、アニメーションのトップ画像にはリンク先の設定ができます。リンクさせたい先のURLを「リンク先」欄に入力することで、そのトップ画像をクリックしたときにそのページに遷移させることができます。
紙吹雪
カラフルな正多角形が紙吹雪のように舞うアニメーションです。
- 背景色
- 紙吹雪の数
- 多角形の角の数
- 紙吹雪の大きさ
- 落下速度
以上の項目を設定できます。
幾何学模様
複数の幾何学模様が回転しているようなアニメーションです。
- 背景色
- 幾何学模様の数
- 頂点の色
- 速度
以上の項目を設定できます。
夜空
夜空に星が瞬いているようなアニメーションです。
- 背景色
- 星の数
- 点滅速度
以上の項目を設定できます。
円
トップ画像の左下で円が大きくなったり小さくなったりするアニメーションです。
- 色
- 速度
以上の項目を設定できます。
グラデーション
背景色が少しずつ変わっていくようなアニメーションです。
- 色１～４
- 速度
以上の項目を設定できます。
画像アップロード
任意の画像を設定できます。選択肢から「画像」を選択し、任意の画像をアップロードしてください。
画像の明るさを「暗い」「変更無し」「明るい」の３つから選ぶことができます。トップ画像上の文字に白など明るい色を使う場合は背景となる画像を「暗い」に、文字を黒など暗い色にする場合は「明るい」を選ぶと文字が読みやすくなります。
- 【推奨画像サイズ】幅980～1280ピクセル、高さ200～400ピクセル※ブラウザ画面いっぱいの画像にしたい場合は、幅が3000ピクセル〜程度の画像を使ってください
- 複数の画像を設定する場合は、画像のサイズ（幅×高さ）をそろえるときれいです。
サイトで確認を！
画像が大きすぎたり小さすぎたりする場合は、アップロードする画像のサイズを変更して調整をお願いします。
また、画像のトップ画像にはリンク先の設定ができます。リンクさせたい先のURLを「リンク先」欄に入力することで、そのトップ画像をクリックしたときにそのページに遷移させることができます。
YouTube動画
メインビジュアルにYouTube動画を表示することができます。トップ画像の種類から「YouTube動画」を選択し、「YouTube 動画の URL」欄に表示したい動画のURLを入力してください。
YouTube動画の明るさを「暗い」「変更無し」「明るい」の３つから選ぶことができます。トップ画像上の文字に白など明るい色を使う場合は背景となる動画を「暗い」に、文字を黒など暗い色にする場合は「明るい」を選ぶと文字が読みやすくなります。
設定変更後は「変更を保存」をクリックしてください。
コメント