ヘッダー

メガメニュー

ヘッダーの 2 つの状態

下へスクロールしている間は追従しません。 ページと一緒に上へ流れていきます。上へスクロールすると、板として画面の上端に貼り付きます。

スクロール見た目
いちばん上にいる（8px まで）画面と地続きの普通のヘッダー
下へ動いている追従しない。ページと同じ速さで上へ流れていく
上へ動いている板として貼り付く

引っ込む動き（スライドして消える）は入れていません。追従をやめた位置を基準にページと同じ速さで流すので、ヘッダーだけが別の速さで動くことがありません。いちばん上に戻ると、また地続きのヘッダーに戻ります。

貼り付いている間も画面の幅いっぱいの帯のままです。器の幅で切って角を丸めると、白い地の上では影だけが縁として残り、ヘッダーが「囲い」に見えます。メガメニューも全幅なので、帯のほうが 2 枚の繋がりも素直です。

トークン値
面--g-head-glassvar(--g-mega-bg)（既定は白）
影--g-shadow-2共通
文字—本文色のまま

変わるのは影だけです。面はいちばん上と同じ色なので、切り替わりは影が差すだけになります。写真の上に来ても濃さは変わりません。

角丸の板として浮かせたい場合は次のように戻せます。

.g-header--glass { background: transparent; box-shadow: none; }
.g-header--glass .g-header__inner {
  background: var(--g-head-glass);
  border-radius: var(--g-r-lg);
  box-shadow: var(--g-shadow-2);
}

切り替わりは 0.28 秒でつながります。

いちばん上で透かさずにページと同じ色で塗っているのは、透かすと下へスクロールしたときに 2 段目のメニューだけが写真の上に文字で浮いて見えるためです。塗っておけば内容はヘッダーの裏へ潜ります。

グローバルメニューとメガメニュー

EC-CUBE 標準はカテゴリをそのまま横に並べますが、Glass では

「商品一覧」＋ 店の固定ページ

を並べ、「商品一覧」にカーソルを乗せたときだけ、画面の幅いっぱいのメガメニューを開きます。カテゴリはその中に並びます。

カテゴリを横に並べると、店によって項目数も文字数もばらばらで、ヘッダーの幅が読めません。窓口をひとつにすると、どの店でも同じ形に収まります。

パネルの幅画面の幅いっぱい（中身だけ器の幅に収めます）
カテゴリ3 列。段数は中身に追従します
PICK UP の画像284 × 379px（縦長 3:4）。右の列はその 2 枚ぶんで 586px 固定

項目とパネルの間にすき間はありません。すき間があると、カーソルを下ろす途中でパネルが閉じて選べなくなります。器の余白ぶん（11px）だけ残る空きは、開いている間だけ当たり判定を橋渡しして埋めています。

メニューの項目、PICK UP の画像と枚数は app/template/glass/Block/category_nav_pc.twig の先頭で変えられます。

{% set glass_nav = [
    { label: '当サイトについて',     url: url('help_about') },
    { label: 'お問い合わせ',         url: url('contact') },
    { label: 'プライバシーポリシー', url: url('help_privacy') }
] %}

「ご利用ガイド」は既定では入れていません。 EC-CUBE 標準の [ご利用ガイド]（help_guide）は見出しだけで、中身が空のまま用意されています。書く前にヘッダーへ並べると、お客様が空のページに行き当たります。 [コンテンツ管理 > ページ管理 > ご利用ガイド] に中身を書いてから、次の 1 行を足してください（フッターは Block/footer.twig に同じ案内があります）。

    { label: 'ご利用ガイド', url: url('help_guide') },

ガラスにはしていません。 リンクが密に並ぶ面で、背後が透けると文字が読みにくくなるためです。色は --g-mega-bg で、浮いているヘッダーも同じ色を使っています（--g-head-glass）。繋がって見える 2 枚なので、素材を揃えてあります。

指で触る画面（767px 以下）では表示しません。ヘッダー自体がドロワーになり、カテゴリはその中に並びます。

メガメニューを開いている間は、スクロールしてもヘッダーの状態を切り替えません。開いたままヘッダーだけ素に戻ると、パネルとヘッダーで縁の出かたが食い違って見えるためです。

ヘッダーをガラスにしていない理由

ヘッダーからはメガメニューが降りてきます。 メガメニューはリンクが密に並ぶ面なので、背後が透けると文字が読みにくく、ここだけは不透明にするしかありません。ヘッダーをガラスにすると、繋がっているはずの 2 枚で素材が食い違い、境目がはっきり出ます。

そこでヘッダー側をメガメニューに合わせ、同じ面（--g-mega-bg）にしています。2 枚が地続きに見え、文字も本文色のまま通ります。

白いページの上にいる時間のほうがずっと長い、という事情もあります。そこでは透かしても背後に何も無く、描画の費用だけが残ります。

ヘッダーをガラスにしたい場合は、面と縁を入れ替えてください。写真の上の札と同じ作りにするなら次のようになります。

.g-header--glass { background: transparent; box-shadow: none; }
.g-header--glass .g-header__inner {
  background: var(--g-plate-glass);
  border-radius: var(--g-r-lg);
  box-shadow: var(--g-glass-edge);
  /* 札の blur(2px) だと写真の形がそのまま透けて文字に重なるので、
     ヘッダーはもう少し強くぼかす */
  -webkit-backdrop-filter: blur(18px) saturate(185%);
  backdrop-filter: blur(18px) saturate(185%);
}
/* 面の .58 は真っ黒な写真の上で #949494 になる。既定の濃淡の 2 段
   （#4c5270 / #757993）はそこで 2.5:1 / 1.6:1 となり基準を割るため、
   ヘッダーの中だけ黒側へ寄せる（4.9:1 / 4.6:1）。 */
.g-header--glass {
  --g-ink-soft: #23263a;
  --g-ink-mute: #282c3e;
}

グレーの面に白い文字にすることもできます。

.g-header--glass { background: rgba(0, 0, 0, .56); }  /* 白地の上で #727272 */
.g-header--glass {
  --g-ink:        #ffffff;
  --g-ink-soft:   rgba(255, 255, 255, .96);
  --g-ink-mute:   rgba(255, 255, 255, .88);
  --g-link:       #ffffff;
  --g-accent-ink: #ffffff;
  --g-mega-bg:    #43444a;                 /* パネルも暗い面へ */
  --g-surface:    rgba(255, 255, 255, .16);
  --g-surface-2:  rgba(255, 255, 255, .16);
  --g-border:     rgba(255, 255, 255, .32);
  --g-line:       rgba(255, 255, 255, .24);
  --g-icon-filter: brightness(0) invert(1);
  color: var(--g-ink);
}

rgba(0, 0, 0, .56) は、白い文字の 3 段が真っ白な写真の上でも AA を保てる上限です。これより明るくすると --g-ink-soft が 4.5 を割ります。

店名のかわりにロゴ画像を出す

ヘッダーは既定で店舗設定の店名を文字で出します。ロゴ画像に差し替えられます。

手順は 店名の文字をロゴ画像にするにあります。 ここでは設定の意味と、ロゴを入れたときの振る舞いを説明します。

設定意味
imageロゴ画像。空なら店名の文字に戻ります
image_darkダークのときに使うロゴ。空なら image をそのまま使います
heightロゴの高さ（px）。横幅は画像の比率で決まります。28〜40 が収まります
alt代替テキスト。空なら店名を使います

どの設定でも、読み込まれる画像は 1 枚です。

明暗出力
light / darkサーバー側でどちらかを選び、<img> を 1 つ
auto<picture> の source media に任せる（ブラウザが 1 枚だけ取得）

<img> を 2 つ出して CSS で隠す書き方にはしていません。 隠したほうの画像も取得されるためです。

  • ヘッダーの高さは変わりません。 高さだけを指定し、横幅は比率に任せています
  • 狭い画面では、はみ出さないところまで自動で小さくなります
  • ロゴを入れると、店名の下の小さな英字は表示しません（ロゴと二重になるため）

ダークにすると、濃い色・背景透過のロゴは地に沈みます。店ごとに違うのでテンプレート側では直せません。反転させる 1 行は ダークでロゴが沈むときにあります（ライトのときは掛かりません）。

店名の幅に上限を設けている理由

上限を外すとヘッダーが 2 段に増えます。 1024px で実測したところ、22% を 26% に広げただけでナビが次の行へ落ち、ヘッダーの高さが 118px → 172px になりました。幅そのものが足りないので、ここは上限を設けています。

収めかたは 店名が長くて見切れるときにあります。

ヘッダーの段数

画面の幅で段数が変わります。いちばん広いときだけ 1 行です。

画面幅並び高さの目安
1400px 〜ロゴ ／ メニュー ／ 検索・アイコン類 を 1 行95px
768 〜 1399pxロゴ・検索・アイコン類 ／ メニュー の 2 段148px
〜 767pxロゴ・虫眼鏡・ハンバーガー・カート の 1 行76px

境目を 1400px にしてあるのは、1 行に必要な幅が実測で約 1291px （ロゴ 111 ＋ メニュー 628 ＋ 検索 216 ＋ アイコン 264 ＋ 余白 72）だからです。これより狭いとメニューが折り返し、かえってヘッダーが厚くなります。 メニューの文言を変えると必要な幅も変わります。 長い文言を増やすときは、この境目も一緒に動かしてください。

カテゴリが多い店ではメニューが 1 行に収まりません。折り返すとヘッダーが厚くなってしまうので、折り返さずに横へ逃がします（スクロールバーは表示しません）。境目を動かしたい場合は customize.css で上書きしてください。

検索欄は 768px 以上では常に出しています。 EC では検索が主要な動線なので、押して開く手間を挟みません。1 行に収めるときだけ細くし、カテゴリの絞り込みセレクトを畳みます（絞り込みはメニューからできます）。

767px 以下だけ、虫眼鏡を押すと上から検索の板が降りてきます。常設するとヘッダーが 2 段になって場所を取るためです。

カートに金額を出す

既定ではカートに金額を出していません。 桁が変わるたびにカートの幅が変わり、その左にあるアイコンの位置までずれるためです。入っている数は右上の丸で分かります。金額を出したい場合は次のようにします。

.ec-cartNavi { width: auto; gap: 8px; padding: 0 14px 0 12px; }
.ec-cartNavi__price { display: block; }

ヘッダーの追従

下へスクロールしている間は追従しません。判定は glass.js の initHeader() にあります。小さなブレで切り替わらないよう、STEP = 6 （この量より大きく動いたときだけ向きを見る）と TOP = 8（ここより上は「いちばん上」とみなす）の 2 つで遊びを持たせています。

追従の解除は position を切り替えず、position: sticky の top を負の値へ逃がして行っています。position: static にすると場所取りが消えてページが跳ねます。transform も使えません。ヘッダーの中に position: fixed の要素（SP の検索パネル）があり、transform を持つとその基準がヘッダーに移ってしまうためです。

逃がす量は --g-head-top に入ります。常に貼り付かせたい場合は html/user_data/assets/css/customize.css でこの変数を固定してください。

.ec-layoutRole__header { top: 0 !important; }

切り替わりの速さ

--g-dur（既定 .28s）です。ヘッダーだけ変えたい場合は .ec-layoutRole__header, .g-header__inner { transition-duration: .4s; } のように上書きしてください。

スマートフォンの検索バー

EC では検索が主要な動線ですが、EC-CUBE 標準ではドロワーの中にしか無く、ハンバーガーを開かないとたどり着けません。Glass では ヘッダーに虫眼鏡を出し、押すと検索の板が上から降りてきます（768px 未満のみ）。 常設していないのは、ヘッダーが 2 段になって場所を取るためです。

常に出しておきたい場合は次のようにします。

@media (max-width: 767px) {
  .g-searchToggle { display: none; }
  .ec-headerNaviRole__search { grid-template-rows: 1fr; margin-top: 10px; }
}

スマートフォンの購入バー（商品詳細）

商品説明を読み進めると「カートに入れる」が画面から外れてしまうため、 外れている間だけ画面下に価格とボタンを出します（768px 未満のみ）。押すと元のボタンをそのまま押すので、規格の選択・数量・EC-CUBE 側の検証はそのまま効きます。

出したくない場合は次の 1 行です。

.g-buyBar { display: none !important; }

スマートフォンのドロワー

ハンバーガーが右にあるため、ドロワーも 右から出ます。カートのパネルと動きの方向が揃います。閉じるボタンはドロワーの右上です。

開いている間、ページ本体は動きません（EC-CUBE 標準は横にずらしますが、半透明のドロワー越しにずれたページが透けてしまうため止めています）。背面は暗幕で落とします。

左から出したい場合は次のように上書きしてください。

.ec-drawerRole { right: auto; left: 0; transform: translateX(-100%);
                 border-left: 0; border-right: 1px solid var(--g-border); }
.ec-drawerRoleClose { right: auto; left: 14px; }

関連記事