ブロック一覧

より多くの機能を搭載し、閲覧に便利なヘッダーを作るため、様々なコンテンツブロックを追加することができます。表示したい情報とその位置を設定していきましょう。

セクション一覧 -> ヘッダー - ブロックを追加

どのヘッダータイプを選択しても、その内容は『MISEル』テーマではユニークに変更することが可能です。新しいコンテンツを追加する際に、さまざまな動的ブロックを使ってヘッダーのコンテンツを変更することができます。ヘッダーには

タイトル画像
ラベル
アイコン (ファーストレベル)
インフォーメーションライン
メガメニュー
メガメニュープロモボックス
メガメニューブランド
メガメニュープロダクト
メガメニューカスタム HTML
メガメニューサブスクリプション
アドバンスメニュー(4 レベル)

などのいくつかのブロックがあります。

それでは、各コンテンツブロックを深く掘り下げて見ていきましょう。

タイトル画像

"タイトル画像" ブロックは、メガメニューのサブセクションのタイトルに画像を追加することができます。

例えば、メインメニューに「メンズ」という項目があるとします。その上にマウスを置くとメガメニューが表示され、様々なサブセクションやプロモボックスを表示することができます。この例では、服、靴、アクセサリーのサブセクションが表示されています。

サブセクションのタイトルに画像を表示させるには"タイトル画像"というブロックを追加します。このブロックには、最大5項目まで画像を追加することができます。サブセクションが5つ以下の場合、他の項目は空白にしてください。

以下の例ではアイテム#1にタイトル画像を追加するために、"メンズ+服"と入力し、画像#1で画像を選択しています。この画像は100～300pxのサイズスケールで大きさを変更することができます。各サブセクションに3つの画像を追加すると、以下のような表示になります。

ラベル

サブセクションのタイトルの近くに｢新着｣・｢ホット｣・｢セール｣ようなラベルを表示するには、"ラベル"ブロックを追加します。このブロックでは、15項目のラベルを追加することができます。これでも足りない場合は、さらに"ラベル"ブロックを追加することができます。では、このブロックをさらに深く掘り下げてみましょう。

タイプ

"ラベル"ブロックには、3種類のラベルがあります。

｢新着｣
｢ホット｣
｢セール｣の3種類があり、ドロップダウンリストから選択することができます。

それぞれのラベルには、「新着」は青・｢ホット｣はオレンジ・｢セール｣は赤の色が割り当てられています。このリストから任意のラベルを選択すると、このブロックの"アイテム #1 - #15"に追加された各項目の前に表示されます。新しいタイプには、それぞれ新しい"ラベル"ブロックが必要です。

テキスト

タイプで提供されていない別のラベルを商品に表示するには、テキストフィールドにそのラベルの名前を書き込むことができます。選択されている"タイプ"に応じた色を保持したまま、テキストは記入したラベルテキストに変更されます。

（テキストの例）人気商品!

アイテム #1 - #15

これらのフィールドでは、どのタイトルに対してラベルが必要かを記述する必要があります

（記入例）メンズ+シューズ+フラット

例:

ここでは、次のようなラベルを設定します。

プロモーション＋トップス+シャツに対して新着
プロモーション＋トップス+シャツに対してホット
プロモーション＋トップス+コートに対してセール
プロモーション＋グッズ＋ハットに対して｢残りわずか!｣

ここではタイプは"セール"ですが、テキストフィールドに独自のラベルテキスト"残りわずか!"を書いているので、ラベルタイプ"セール"の元の色を保持して、テキストだけが異なっています。

アイコン (ファーストレベル)

各メニューセクションにアイコンをつけたい場合は、"アイコン(ファーストレベル)"ブロックを追加します。アイコンは、水平メニューと縦メニューの両方に追加することができます。アイコンコードはこちらでご確認ください。

縦メニューに対応させる

オプション"縦メニューに対応させる"を有効にすると、アイコンは縦メニューにのみ追加されます。

アイテム #1 - #20

これらのフィールドには、アイコンがどのメニュー項目に必要かを記述します。例：レイアウト・ショップ・ブログなど

アイコン #1 - #20

"アイコン (ファーストレベル)"ブロックには、最大20個のアイコンを追加することができます。足りない場合は、さらに"アイコン (ファーストレベル)"ブロックを追加してください。

縦メニューの項目へのアイコン設定の例:

項目	メニューアイテム名	設定アイコン
アイテム#1	ウィメンズ	icon-theme-050
アイテム#2	メンズ	icon-theme-048
アイテム#3	アクセサリー	icon-theme-101

項目

メニューアイテム名

設定アイコン

アイテム#1

ウィメンズ

icon-theme-050

アイテム#2

メンズ

icon-theme-048

アイテム#3

アクセサリー

icon-theme-101

水平メニューの項目へのアイコン設定の例:

項目	内容	設定アイコン
アイテム#1	メガメニュー	icon-theme-186
アイテム#2	プロモーション	icon-theme-196
アイテム#3	ページ	icon-theme-086

項目

内容

設定アイコン

アイテム#1

メガメニュー

icon-theme-186

アイテム#2

プロモーション

icon-theme-196

アイテム#3

ページ

icon-theme-086

インフォーメーションライン

このブロックは、ヘッダーの最上部に情報を追加することができます。

例えば、「お問い合わせ」「電話番号」などです。"インフォーメーションライン"ブロックは1つのみ追加することができます。

モバイルで表示

モバイル表示でも"インフォーメーションライン"を表示したい場合は、"モバイルで表示"オプションを有効にしてください。

カラースタイル

デスクトップとモバイルの両方で、"インフォーメーションライン"をどのような色調で表示するかを設定することができます。『MISEル』テーマでは、2つのカラースタイルから選択可能です。

透明背景を有効にする

なお、この機能は「ヘッダー」セクションの"透明背景"を有効にした場合にのみ機能します。

このオプションはトップページにのみ適用されます。有効にすると、"インフォーメーションライン"の背景はトップページのヘッダーラインにカーソルを置いたとき、もしくはトップページ以外のページの時に表示されるようになります。

"インフォーメーションライン"の背景は、カラースタイルを選択するか（詳細は上記を参照）、「ヘッダー」セクションに"カラー設定"ブロックを追加することで変更することができます。"インフォーメーションライン"の色を設定する方法については、こちらを参照してください。

ページコンテンツ

ページの内容を追加するには、対象のページを選択する必要があります。ページが選択されていない場合、デフォルトの"Include Header Info Line"ページが使用されます。『MISEル』テーマでは、いくつかのデフォルトページがあり、情報を編集することができます。

Shopify管理画面-> オンラインストア -> ページ の手順でページを探し、編集してください。

ページの追加や編集の方法については、こちらをご覧ください。

情報欄にソーシャルメディアを表示させたい場合は、"SNS を表示"オプションにチェックを入れてから、候補リストからメディアを選択してください。

メディア設定

また、"メディア設定"に並んでいるリストから、"インフォーメーションライン"に表示したいソーシャルメディアを選択することもできます。ソーシャルメディアへのリンクは、カスタマイズのテーマ設定より、 ソーシャルメディア -> SNS の手順でフィールドを探し、入力します。

アナウンスメントバー

アナウンスメントバーはヘッダーの最上部にあり、期間限定セールなどのお知らせを載せるには最適の場所です。一つのみ追加することができます。ページ訪問者が閉じることもできます。

遅らせて表示する

このオプションでバーの出現を遅らせるかどうかを、0〜10秒の範囲で設定することができます。

カラースタイル

このブロックでは、バーのカラースタイルを選択することができます。3種類のスタイルから選択可能です。

透明背景を有効にする

なお、この機能は「ヘッダー」セクションの"透明背景"を有効にした場合にのみ機能します。

このオプションを有効にすると、設定はトップページにのみ適用されます。有効にするとアナウンスメントバーの背景はトップページのヘッダーラインにカーソルを置いたとき、もしくはトップページ以外のページの時に表示されます。アナウンスメントバーの背景は、カラースタイルを選択するか（詳細は上記を参照）、「ヘッダー」セクションに"カラー設定"ブロックを追加することで変更することができます。アナウンスメントバーの色を設定する方法については、こちらを参照してください。

テキスト(もしくはHTML)

新しいテキストやHTMLコンテンツを書くことで、いつでも内容を変更できます。バーの取り外しはいつでも可能です。

メガメニュー

メガメニューブロックは、ドロップダウンメニューセクション内のメニュー項目を整理し、カスタマイズすることができるブロックです。

多機能ブロックであり、プロモボックス・ブランド・商品などのコンテンツを追加することができます。メガメニューブロックで作業を始める前に、Shopify管理画面->メニューで、このメニューセクションに必要なすべてのメニューアイテムをあらかじめ作成しておく必要があります。オンラインストアにメニューアイテムを追加し、編集する方法については、こちらをご覧ください。

"メインメニュー"というメニューの"Women’s"項目を例に、手順をご紹介します。

次のようなステップになります。

メニューにて、 "メインメニュー"という名前のメニューを作成します。

"メインメニュー" にて、"Women’s"と、その他に必要なメニュー項目を追加します。
"Women’s"にて、ドロップダウンに表示する他のメニュー項目を追加します。

それでは、『MISEル』テーマカスタマイズ画面の"メガメニュー"ブロックに戻り、カスタマイズしてみましょう。

一般設定

ここでは、メガメニューの一般的な設定について説明します。"アイテム名"フィールドに、メガメニューを作成するためのメニューアイテムの名前を入力します。こちらのビデオチュートリアルでは、メガメニューブロックのカスタマイズ方法を紹介しています。

この例では、"WOMEN’S"の項目を使用しました。

すでに"タイトル画像" ブロックを追加してあり（上記の例をご覧ください）、その列のサイズを "リンクのコラムサイズ" で1〜12までカスタマイズすることができます。

セカンドレベルのコラム

このオプションを有効にすると、第2階層のメニュー項目が次のように表示されます。

コラムラインの制限

このオプションは、メニュー項目を1行に何行表示するかを決めることができます。目盛りを使って1行から50行まで変更できます。

メニューコラムをグリッドで囲む

このオプションによって、すべてのメニュー列を1つのブロック内に並べることが可能です。

左の追加コンテンツ

このセクションでは、左カラムのプロモボックスの内容をカスタマイズすることができます。ここでは、"コンテンツのタイプ"を選択することで、左側のプロモボックス1行に表示するアイテムの数を決定できます。また、"コラムのサイズ"を0～12で選択することができます。プロモボックスの追加方法は、メガメニュープロモボックスのブロックに記載しています。

右の追加コンテンツ

このセクションでは、右カラムのプロモボックスの内容をカスタマイズすることができます。ここでは、"コンテンツのタイプ"を選択することで、右側のプロモボックス1行に表示するアイテムの数を決定できます。また、"コラムのサイズ"を0～12で選択することができます。プロモボックスの追加方法は、メガメニュープロモボックスのブロックに記載しています。

縦メニューのみ(ヘッダータイプ#5)

この設定は、"ヘッダータイプ#5"と"ヘッダータイプ#7"にのみ適用させることができます。メニューコンテナの端を制限したい場合は、オプション"幅の制限を有効"にチェックを入れ、"制限幅"の目盛りを300〜1000pxの間で設定してください。

メガメニュープロモボックス

プロモボックスは、メガメニューの追加オプションです。ドロップダウン・メニューの中にプロモーション（バナー）、ブランド、商品、ページなどを追加することができます。前のセクションで、プロモボックス用のカラムはドロップダウンメニューの左側と右側の両方に配置できることを説明しました。これを片側だけ実装することもできます。

それでは、プロモボックスを使ってどのような実装ができるのか、どのような表示になるのかを例で見てみましょう。 "メガメニュー" ブロックでは、 "ウィメンズ"用のメガメニューを作成しました。このメニューアイテムで作業を進めます。メガメニュー "ウィメンズ"用の新しいコンテンツブロックを追加することができ、ブロックは、「メガメニュープロモボックス」と呼ばれます。

タイトル

ここでは、プロモボックス内のバナー画像の上に表示されるバナーのタイトルを記入することができます(任意)。

一般設定

このセクションでは、バナーをクリックしたときに必要なページにリンクする"バナーの URL" を追加することができます。バナーをクリックし、ドロップダウンリストから希望のページを選択するか、このリストに希望の遷移先がなければURLを貼り付けることができます。

画像

バナーをより魅力的に見せるために、バナー用の"画像"を追加することができます。推奨画像サイズは、1440×550ピクセルです。画像のサイズは、 "画像サイズ" の目盛りで200〜2000ピクセルの範囲で変更可能です。

"画像マスク"を追加し、その不透明度を "画像マスクの透明度" で0.1〜1.0まで選択することができます。画像マスクは、画像にかぶせるカラーカバーのようなもので、ある程度の不透明度があれば特定の色調に、不透明度が最大であれば完全に色で覆われます。

テキスト

ここでは、プロモボックスに表示するバナーのテキスト内容をカスタマイズします。追加できるテキスト行は3行です。

要素を隠したい場合はテキストやボタンの行値を削除し、改行には"<br>"を使用します。

もちろんテキストコンテンツのスタイルは"カラースタイル"で変更することができ、8つのスタイルから1つを選択することができます。

ボタン #1 - #2

プロモボックス内の各バナーには、カスタマイズ可能なボタンを2つ追加することができます。ボタンには、ボタンテキスト・ボタン URL・ボタンスタイルの3つのカスタマイズオプションがあります。

ボタンテキストには、ボタンのタイトルを書くことができます。例えば、「Shop now」、「More」などです。

ボタン URLでは、ボタンをクリックされたときにリンクさせるリンクを挿入できます。

ボタンスタイルでは、ドロップダウンリストからボタンのスタイルを選択することができます。

その他のコンテンツ

カスタム HTML

このオプションによって、プロモボックス内のテキストコンテンツ全体をページコンテンツに置き換えることができます。ページの追加と編集の方法は、こちらをご覧ください。以下はその一例です。

レイアウト

ここでは、プロモボックス内のテキストのレイアウトの種類を選択することができます。『MISEル』テーマでは、多くの種類が提供されていますので、ストアに最適なものを選択してください。そして、適切な "コンテンツの位置(デスクトップのみ)"と"コンテンツの水平調整"を選択してください。

アニメーション

このセクションでは、プロモボックスのバナー内の画像のアニメーション、位置、不透明度を調整することができます。マウスカーソルを乗せたときにイメージをアニメーションさせるには、 "ホバー時の画像移動方向設定"からご希望のオプションを選択することで設定できます。

画像の位置は、"画像の初期位置設定"で設定することができます。ドロップダウン・リストからオプションを選択してください。同様に、プロモボックス内のバナー画像に不透明度を持たせるかどうかを決めることができます。 "画像の透明化"のドロップダウンリストより、初期、ホバー時、初期&ホバー、なしの中から選択してください。

プロモボックス (その他のコンテンツ設定)の活用例

それでは、メガメニュー"Men’s"にプロモボックスを追加し、カスタマイズした場合のイメージを見てみましょう。オプションを使用しない場合は、空白のままにします。こちらがプロモボックスの設定です。

タイトル: (空欄)

一般設定

項目	内容
バナーのURL	すべてのコレクション
画像	選択された画像
画像サイズ	400px
画像マスク	red
画像マスクの透明度	0.3

項目

内容

バナーのURL

すべてのコレクション

画像

選択された画像

画像サイズ

400px

画像マスク

red

画像マスクの透明度

0.3

テキスト

項目	内容
テキストライン#1	セール
テキストライン#2	20%オフ
カラースタイル	スタイル#1

項目

内容

テキストライン#1

セール

テキストライン#2

20%オフ

カラースタイル

スタイル#1

その他のコンテンツ

項目	内容
リスト	選択なし
カスタムHTML	選択なし

項目

内容

リスト

選択なし

カスタムHTML

選択なし

レイアウト

項目	内容
タイプ	タイプ#3(リボンボタン)

※タイプ #3 (リボンボタン) では、ボタンは表示されません！

アニメーション

項目	内容
ホバー時の画像移動方向設定	中央
画像の初期位置設定	なし
画像の透明化	なし

項目

内容

ホバー時の画像移動方向設定

中央

画像の初期位置設定

なし

画像の透明化

なし

注意: "メガメニュー" ブロック（上記で説明）では、バナーを右または左のどちら側に配置するかを選択できます。また、1列に並べるバナーの数も、メガメニューで選択することができます。

ここの例では、次のような設定をしていきます。

左の追加コンテンツ

項目	内容
コンテンツのタイプ	1行に1アイテム
コラムサイズ	0/12

項目

内容

コンテンツのタイプ

1行に1アイテム

コラムサイズ

0/12

右の追加コンテンツ

項目	内容
コンテンツのタイプ	なし
コラムのサイズ	0/12

項目

内容

コンテンツのタイプ

なし

コラムのサイズ

0/12

ここでは"プロモボックス" ブロックの説明のため、"タイトル画像"ブロックは削除しました。

以上の設定により、メニュー項目"Men’s"のドロップダウンメニューは、以下のようになりました。

メガメニューブランド

プロモボックスのバナーと同じように、ドロップダウンメニューの右または左にブランドを追加することができます。タイトルの編集、タイトル用のURLの貼り付け、1行に表示する画像の数の選択など、カスタマイズが可能です。

ブランド用の画像を追加し、画像サイズを50～300pxの間で変更することができます。各画像には、URLを指定することができます。"メガメニューブランド"ブロックでは、最大10枚のブランド画像を追加し、カスタマイズすることができます。

注意:ブロックの配置は非常に重要です！ドロップダウンメニューに「メガメニューブランド」ブロックを表示したい場合（例："Women’s"の場合）、ブロックは以下の順序で配置する必要があります。

メガメニュー ("Women’s" に対するブロック)
メガメニューブランド
タイトル画像

ここでは、そのようなブロックの例として、"Women’s"というメニュー項目で、次のような設定をしていきます。

項目	内容
タイトル	トップブランド
タイトルURL	すべてのコレクション
画像のサイズ	1行に2画像

項目

内容

タイトル

トップブランド

タイトルURL

すべてのコレクション

画像のサイズ

1行に2画像

画像

項目	内容
画像	設定画像
画像サイズ#1	80px
URL#1	ウイメンズ

項目

内容

画像

設定画像

画像サイズ#1

80px

URL#1

ウイメンズ

二番目の画像も同じような設定です。

"メガメニュー"ブロック（上記で説明）では、ブランドを右または左のどちら側に配置するかを選択することができます。この例では、右側のカラムにブランドを配置し、左側のカラムにはバナーを表示させています。

"メガメニュー"ブロックでは、以下のような設定にします。

右の追加コンテンツ

項目	内容
コンテンツのタイプ	1行に1アイテム
コラムのサイズ	4/12

項目

内容

コンテンツのタイプ

1行に1アイテム

コラムのサイズ

4/12

メガメニュー商品コレクション

プロモボックスやブランドのバナーと同じように、ドロップダウンメニューの右または左の列に商品を追加することができます。タイトルの編集、表示させたい商品に応じた適切なコレクションの選択、ドロップダウンメニュー "1 行に表示する商品数"を用いての1行に表示させる画像の数の選択、 "行数"のメモリを用いた1～6のスケールで商品数の選択などのカスタマイズが可能です。

注意！ブロックの配置は非常に重要です！ドロップダウンメニューに「メガメニュープロダクト」ブロックを表示したい場合（例："Men’s"の場合）、ブロックは以下の順序で配置する必要があります。

メガメニュー ("Men’s" に対するブロック)
メガメニュープロモボックス
メガメニュープロダクト

ここでは、そのようなブロックの例として、"Men’s"というメニュー項目で、次のような設定をしていきます。

タイトル: (タイトルなし)

一般設定

項目	内容
コレクション	セール
1行に表示する商品数	2
行数	1

項目

内容

コレクション

セール

1行に表示する商品数

行数

するとこのような結果になります。

"メガメニュー"ブロック（上記で説明）では、商品を右または左のどちら側に配置するかを選択することができます。この例では、右側のカラムに商品を配置し、左側のカラムにはバナーを表示させています。

"メガメニュー"ブロックでは、以下のような設定にします。

左の追加コンテンツ

項目	内容
コンテンツのタイプ	1行に1アイテム
コラムのサイズ	3/12

項目

内容

コンテンツのタイプ

1行に1アイテム

コラムのサイズ

3/12

右の追加コンテンツ

項目	内容
コンテンツのタイプ	1行に1アイテム
コラムのサイズ	3/12

項目

内容

コンテンツのタイプ

1行に1アイテム

コラムのサイズ

3/12

メガメニューカスタム HTML

このブロックは、既存のページをコンテンツとして追加することができます。

ページの追加と編集の方法は、こちらをご覧ください。このブロックでは、タイトルとそのタイトルのリンクのURLを追加することができます。タイトルを書き込むと、ブロックの名前がそのタイトル名に自動的に変更されます。ページの追加には、ドロップダウンメニューから表示させたいページを選択してください。

注意: ブロックの配置は非常に重要です！ドロップダウンメニューに「メガメニューカスタム HTML」ブロックを表示したい場合（例："Men’s"の場合）、ブロックは以下の順序で配置する必要があります。

メガメニュー ("Men’s" に対するブロック)
メガメニュープロモボックス
メガメニューカスタム HTML

ここでは、そのようなブロックの例として、"Men’s"というメニュー項目で、次のような設定をしていきます。

項目	内容
タイトル	MISEルについて
タイトルURL	MISEルについて

項目

内容

タイトル

MISEルについて

タイトルURL

MISEルについて

一般設定

項目	内容
ページコンテンツ	MISEルについて

項目

内容

ページコンテンツ

MISEルについて

"メガメニュー"ブロック（上記で説明）では、カスタム HTMLを右または左のどちら側に配置するかを選択することができます。この例では、右側のカラムにカスタム HTMLを配置し、左側のカラムにはバナーを表示させています。

"メガメニュー"ブロックでは、以下のような設定にします。

左の追加コンテンツ

項目	内容
コンテンツのタイプ	1行に1アイテム
コラムのサイズ	3/12

項目

内容

コンテンツのタイプ

1行に1アイテム

コラムのサイズ

3/12

右の追加コンテンツ

項目	内容
コンテンツのタイプ	1行に1アイテム
コラムのサイズ	3/12

項目

内容

コンテンツのタイプ

1行に1アイテム

コラムのサイズ

3/12

メガメニューサブスクリプション

このブロックで、ドロップダウンメニューにサブスクリプションセクションを追加することができます。このブロックにはタイトルとそのタイトルのリンクのURLを書くことができますが、空白のままでもかまいません。タイトルを書き込むと、ブロックの名前がそのタイトル名に自動的に変更されます。プレースホルダーには、表示させたいテキスト(例：E-mail を入力)を書きます。次にボタンのテキスト(例：SUBSCRIBE）を入力します。

注意:ブロックの配置は非常に重要です！ドロップダウンメニューに「メガメニューサブスクリプション」ブロックを表示したい場合（例："Men’s"の場合）、ブロックは以下の順序で配置する必要があります。

メガメニュー ("Men’s" に対するブロック)
メガメニュープロモボックス
メガメニューサブスクリプション

ここでは、そのようなブロックの例として、"Men’s"というメニュー項目で、次のような設定をしていきます。

項目	内容
タイトル	タイトルなし
タイトルURL	リンクなし

項目

内容

タイトル

タイトルなし

タイトルURL

リンクなし

一般設定

項目	内容
プレースホルダー	E-mailアドレスを入力
ボタンテキスト	購読!

項目

内容

プレースホルダー

E-mailアドレスを入力

ボタンテキスト

購読!

するとこのような結果になります。

"メガメニュー"ブロック（上記で説明）では、サブスクリプションを右または左のどちら側に配置するかを選択することができます。この例では、右側のカラムにサブスクリプションを配置し、左側のカラムにはバナーを表示させています。

"メガメニュー"ブロックでは、以下のような設定にします。

左の追加コンテンツ

項目	内容
コンテンツのタイプ	1行に1アイテム
コラムのサイズ	3/12

項目

内容

コンテンツのタイプ

1行に1アイテム

コラムのサイズ

3/12

右の追加コンテンツ

項目	内容
コンテンツのタイプ	1行に1アイテム
コラムのサイズ	3/12

項目

内容

コンテンツのタイプ

1行に1アイテム

コラムのサイズ

3/12

アドバンスメニュー(4 レベル)

このブロックは、ヘッダーメニューに最大4階層の項目を設定することができます。ここでは、どのメニュー項目に4階層のメニューを設定するかを決め、リストから適切なメニューを選択することが必要です。メニューを選択すると、このブロックの名前は、選択したメニューの名前に自動的に変更されます。この例では、次のように設定されています。