ブロック一覧
このセクションではタイトル・プロモボックス・スリックスライダー・スライド (スリックスライダー) などのコンテンツブロックを追加することができます。それぞれのブロックの機能を見てみましょう。
コレクションページヘディング → ブロックを追加
タイトル
このブロックでは、どのコレクションにどのようなタイトルを表示させるかを決めることができます。"コレクション"では、コレクションを選択できます。
コレクションを追加、編集する方法については、こちらをご覧ください。
タイトルに関する設定を行います。"デスクトップでのタイトル"と"モバイルでのタイトル"の2つのドロップダウンリストがありますので、
"タイトルのみ"
"タイトルと説明"
"説明のみ"
"無効"
の中から選択してください。
プロモボックス
一般設定
このセクションでは、バナーを作成するコレクションを"コレクション"で選択し、URLを追加して、バナーをクリックされたときにリンクさせるページを設定することができます。リストから希望のページを選択するか、このリストにないページの場合はURLを貼り付けてください。
画像
バナーをより魅力的にするために、バナー用の画像を追加することができます。
デスクトップ版とモバイル版の両方に画像を追加することができ、それぞれ異なる画像、異なるサイズにすることができます。
| 画面サイズ | 推奨サイズ |
|---|---|
デスクトップ | 1440x550ピクセル |
モバイル | 540x550ピクセル |
また画像のサイズは目盛りで調整することも可能です。
モバイル版では、"モバイルでの 画像位置の調整"を0〜100%で設定することもできます。50%は中央、0%は左より、100%は右よりを意味します。
のちに出てくる「レイアウト -> 高さ｣の設定箇所で "画像の高さに合わせる"を選択すると設定が無効になります。
また、画像マスクを追加してその不透明度を "画像マスクの透明度"で 0.1 から 1.0 の範囲で選択することができます。イメージマスクは、イメージの上に置くことができるカラーカバーのようなもので、ある程度の不透明度がある場合は特定の色合いを与え、不透明度のレベルが最大の場合は色で完全に覆うことができます。
テキスト
ここでは、プロモボックスに表示するバナーのテキスト内容をカスタマイズすることができます。
追加できるテキストは3つです。要素を隠したい場合はテキストやボタンの入力欄を空欄にし、改行には「<br>」を使用します。
テキストコンテンツのスタイルは "カラースタイル"で変更することができ、8つのスタイルから1つ選択することができます。
ボタン #1 - #2
プロモボックス内の各バナーには、カスタマイズ可能なボタンを2つ追加することができます。ボタンには、"ボタンテキスト"・"ボタンURL"・"ボタンスタイル"3つのカスタマイズオプションがあります。
ボタンテキストには、ボタンのタイトルを書くことができます。例えば、「Shop now」、「More」などです。\
ボタン URLでは、ボタンをクリックされたときにリンクさせるリンクを挿入できます。
ボタンスタイルでは、ドロップダウンリストからボタンのスタイルを選択することができます。
リスト
バナー用のリストコンテンツを持つページを追加するには、「ページを選択」を押して、リストから選択します。リストコンテンツはShopifyの管理画面→ページで作成することができます。
カスタム HTML
このオプションを使用すると、 プロモボックス内のテキストコンテンツ全体をページコンテンツに置き換えることができます。
ページの追加と編集の方法は、こちらをご覧ください。
ビデオ
ページに動画を掲載したい場合は、こちらのプロモボックスに動画を追加することができます。 YouTubeやVimeoであれば、"Youtube もしくは Vimeo のビデオの URL"にリンクをするだけで設定可能です。
ビデオのソースがこれらと異なる場合は、Shopify 管理画面-> 設定 ->ファイル で動画をアップロードし、そのURLをコピーして"ビデオ URL"に貼り付けてください。
また、"ビデオの自動再生"や"ビデオコントール表示"などのオプションを有効にしたり無効にしたりすることで、ビデオに自動再生やコントロールを持たせるかどうかを決定することができます。
レイアウト
"レイアウト" では、プロモボックスコンテンツを表示させるビューを表示ドロップダウンの"デスクトップとモバイル"・"デスクトップのみ"・"モバイルのみ"の中から決定することもできます。
プロモボックス内のテキストのレイアウトの種類を選択することができます。 『MISEル』テーマには、多くの種類のレイアウトがありますので、その中からストアに最適なものを選んでください。
コンテンツの位置
"コンテンツの位置(デスクトップ)"と"コンテンツの水平調整"を選択することができます。テキストを左側または右側に配置し、コンテナにテキストを含めるには、オプション"コンテナを加える"を有効にしてください。このオプションは、タイプ #1 v1(画像上にテキスト)とビルダーセクションで設定した"コンテンツ幅"が"全幅" の場合にのみ機能します。
コンテンツ幅
"コンテンツ幅"の変更は0〜100%の範囲で可能です。テキストの幅も "テキスト最大幅"の目盛りで0〜1000pxまで設定でき、0は自動サイズ、1000pxは幅の100%に相当します。
画像の高さ
画像の"高さ" は、ドロップダウンリストのオプションを選択するか、"高さの最小値"は0～1000pxの範囲で変更することができます。
コラムのサイズ
"コラムのサイズ" は、あなたのストアに最適なものを、ドロップダウンリストから選択してください。
レイアウト
アニメーション
プロモボックスのバナー内の画像のアニメーション、位置、不透明度を調整することができます。
画像パララックス
ここでは、"画像パララックス"オプションが設定でき、パララックス効果の種類を選択するか、無効にするかを選べます。ブロックの高さが自動適応モードでない場合、視差効果の強さは選択された高さに応じて調整されることに注意してください。高さが画像に対して大きすぎる場合、視差効果は最小限か、まったく表示されなくなることがあります。
ホバー時の画像移動方向設定
マウスカーソルを乗せたときに画像をアニメーションさせるには、"ホバー時の画像移動方向設定"でオプションを選択してください。画像の位置は、"画像の初期位置設定"で設定することもできます。
画像の透明化
プロモボックスのバナー画像に不透明度を持たせるかどうか決めることができます。"画像の透明化" のドロップダウンリストでは、"初期"、"ホバー時"、"初期&ホバー"、"無効"から選択できます。
テキストのアニメーション
"テキストのアニメーション"のドロップダウンリストで、テキストにつけるアニメーションオプションを選択することができます。このオプションは、 レイアウトの タイプ #1 v1(画像上にテキスト)のみで利用可能です。
"タイトル"と"プロモボックス"のブロックを追加すると、このようなコレクションページができあがります。
カラー
ここでは、プロモボックス内のテキストと背景の色設定をカスタマイズすることができます。"テキスト背景"は下記のレイアウトでのみ利用可能です。
"タイプ #1 背景画像付 v1-v4"
"タイプ #3 (リボンボタン)"
"タイプ #4 (アニメーション付リボンボタン)"
"カーテン背景"項目は下記のみ利用可能です。
"タイプ #1 カーテン付 v1-v3"
テキスト#1～#3の色を変更してみました。以下がストアでの表示例です。
テキスト#1～#3の色を変更してみました。以下がストアでの表示例です。
スリックスライダー
"スリックスライダー" は、コレクションページに画像をスライダーとして追加し、アニメーションのような演出を可能にするコンテンツブロックです。
スライダーが変化する時間間隔を設定することなどもできます。まず"スリックスライダー"というブロックを追加し、さらに"スライド (スリックスライダー) ブロック"というブロックを追加します。
そこでスライダー用の画像を選択したり、カスタマイズしたりすることができます。"スライド (スリックスライダー) ブロック"の数は、スライドさせたい枚数分追加してください。
一般設定
"コレクション"で、スリックスライダーを構成するためのコレクションを選択してください。
コレクションを追加、編集する方法については、こちらをご覧ください。
レイアウト
ここでは、"高さ"のドロップダウンリストから、画像の高さを選択することができます。"高さの最小値"は、0～1000pxの範囲で設定可能です。 コラムのサイズは、ドロップダウンリスト"コラムのサイズ"から選ぶことができます。
スライダーの切り替えに便利な矢印表示またはブレット表示の選択肢があります。これらは、どちらか一方、両方あり、両方なしの選択肢があります。
"速さ(秒)"は2秒から15秒の間でスライダーが次のスライダーに変わる時間間隔を設定することができます。
スライド (スリックスライダー) ブロック
コンテンツブロック"スリックスライダー"を追加した後、"スライド (スリックスライダー) ブロック"を追加し、さらなるカスタマイズを加えることができます。
一般設定
このセクションでは、スライダーがクリックされたときにリダイレクトさせるページのURLを追加することができます。ドロップダウンリストからページを選択するか、希望のページがこのリストになければリンクを貼り付けることもできます。
画像
ここでデスクトップ版とモバイル版の両方に画像を追加することができ、それぞれ異なる画像、異なるサイズに設定可能です。
| 画面サイズ | 推奨サイズ |
|---|---|
デスクトップ | 1440x550ピクセル |
モバイル | 540x550ピクセル |
モバイル用の画像サイズは、"モバイル画像サイズ"の目盛りで200～2000ピクセルの範囲で変更可能です。
モバイル版では、画像位置を"モバイルイメージの調整(水平軸)"の目盛りを用いて0～100%の間で設定することもできます。50%は中央、0%は左寄せ、100%は右寄せを意味します。 レイアウト→高さ で"画像に応じる"を選択すると設定を無効にすることもできます。\
"画像マスク"を追加し、その不透明度を"画像マスクの透明度"目盛りで0.1～1.0まで選択することができます。画像マスクは、画像にかぶせるカラーカバーのようなもので、ある程度の不透明度があれば特定の色調に、不透明度が最大であれば完全に色で覆われます。
テキスト
ここでは、スライドのテキストコンテンツをカスタマイズすることができます。追加できるテキスト行は3行です。
要素を隠したい場合はテキストやボタンの入力欄を空欄にし、改行には「<br>」を使用します。
テキストコンテンツのスタイルは "カラースタイル"で変更することができ、8つのスタイルから1つ選択することができます。
ボタン #1 - #2
スリックスライダーには、カスタマイズ可能なボタンを2つ追加することができます。ボタンには、3つのカスタマイズオプションがあります。ボタンテキスト、ボタン URL、ボタンスタイルです。
ボタンテキストには、ボタンのタイトルを書くことができます。例えば、「Shop now」、「More」などです。
ボタン URLでは、ボタンをクリックされたときにリダイレクトさせるリンクを挿入します。
ボタンスタイルでは、ドロップダウンリストからボタンのスタイルを選択することができます。
カスタム HTML
このオプションを使用すると、スリックスライダー内のテキストコンテンツ全体をページコンテンツに置き換えることができます。
ページの追加と編集の方法は、こちらをご覧ください。
ビデオ
ページに動画を掲載したい場合は、こちらのレボリューションスライダーに動画を追加することができます。YouTubeやVimeoであれば、"Youtube もしくは Vimeo のビデオの URL"にリンクをするだけで設定可能です。
ビデオのソースがこれらと異なる場合は、Shopify 管理画面-> 設定 ->ファイル で動画をアップロードし、そのURLをコピーして"ビデオ URL"に貼り付けてください。
"ビデオの自動再生"や"ビデオコントール表示"などのオプションを有効にしたり無効にしたりすることで、ビデオに自動再生やコントロールを持たせるかどうかを決定することができます。
レイアウト
ここでは、スライド上のテキストのレイアウトの種類を選択することができます。 『MISEル』テーマには、多くの種類のレイアウトがありますので、その中からストアに最適なものを選んでください。
"コンテンツの位置(デスクトップ)"と "コンテンツの水平調整"を選択することができます。テキストを左側または右側に配置し、コンテナにテキストを含める必要がある場合は、オプション"コンテナを加える"を有効にしてください。このオプションは、タイプ #1 v1(画像上にテキスト)と、ビルダーセクションで設定した"コンテンツ幅"が"全幅" の場合にのみ機能します。
"コンテンツ幅"の変更は0〜100%の範囲で可能です。テキストの幅も "テキスト最大幅"の目盛りで0〜1000pxまで設定でき、0は自動サイズ、1000pxは幅の100%に相当します。
アニメーション
このセクションでは、テキストアニメーションに関する設定が可能です。 "テキストのアニメーション"のドロップダウンリストから、テキストアニメーションのオプションを選択してください。このオプションは レイアウト タイプ #1 (画像上にテキスト)のみで利用可能です。
カラー
ここではスライダー内のテキストと背景の色設定のカスタマイズができます。 "テキスト背景"には下記のレイアウトが適用できます。
"タイプ #1 背景画像付 v1-v4"
"タイプ #3 (リボンボタン)"
"タイプ #4 (アニメーション付リボンボタン)"
"カーテン背景"に項目は下記のカスタマイズ可能です。
"タイプ #1 カーテン付 v1-v3"
Last updated
