トップページのブロック

ヒーローに写真を敷く

初期状態のヒーローは画像を使わない CSS 描画です。そのままだと、このテンプレートを導入したショップがどこも同じ絵になってしまうので、写真を敷けるようにしてあります。ガラスのカードは写真の上にそのまま乗ります。

画像は [コンテンツ管理] → [ファイル管理] に上げ、index.twig 冒頭で asset(…, 'user_data') の形で指定します（テンプレートのフォルダに置くと、入れ直したときに消えます）。

{% set glass_hero = {
    image:    asset('assets/img/top/hero.jpg', 'user_data'),
    image_sp: asset('assets/img/top/hero-sp.jpg', 'user_data'),
    focus:    '50% 35%',
    veil:     0.12
} %}
キー内容
image背景に敷く写真。空にすると初期状態（CSS 描画）に戻ります
image_spスマートフォン用（767px 以下）。省略すると image を使います
focus写真のどこを見せるか。object-position と同じ書式（'50% 35%' など）
veil写真に重ねる覆いの濃さ。0 で無し

推奨サイズは 2000×1100 前後（横長）、1MB 以下です。

image_sp は用意することをおすすめします。 狭い画面ではヒーローが縦長になるため、横長の写真 1 枚だけだと中央の 3 割ほどを引き伸ばして表示することになります。縦長（1100×1400 程度）の写真を別に指定すると、主役が切れません。

ヒーローの構成

文字を写真の上に載せません。 店ごとに違う背景の上で文字を読ませるには覆いや板が必要になり、そのぶん写真が死ぬためです。並べて置けば、文字は白い紙の上で、写真は手を入れないまま出せます。ガラスは「置く理由がある」ところ（カテゴリの札・ヘッダー）だけに使っています。

並べ方は 2 つあり、app/template/glass/index.twig の glass_hero.layout で切り替えます。

'split'（初期値）文字が左・写真が右写真は画面の右端まで伸びます
'stack'文字が上・写真が下写真は全幅。大きく見せたい店向け

split を初期値にしているのは、ヒーロー全体が最初の画面に収まるためです。 1440 × 780 で測ると、stack は写真の下端が 204px はみ出すのに対し、split は全部入ります。写真の残り方も、横長 2000×1100 なら stack の 73% に対して split は 100%（左右が切れて縦は無傷になります）。

写真を大きく見せたい店は 'stack' にしてください。

1024px 未満では、どちらでも上下に並びます。 2 列にすると文字の列が 360px 程度まで痩せ、見出しが読みにくくなるためです。

glass_hero.slides の veil（写真に重ねる覆い）は既定 0 です。文字が写真に載らないので、通常は上げる必要がありません。

写真の帯の高さは --g-hero-h で変えられます（既定 clamp(320px, 44vw, 560px)）。

:root { --g-hero-h: 720px; }

ここは「どんな写真を使えるか」を決める値でもあります。写真は object-fit: cover で中央から切り取られるので、帯が低いほど横長の写真しか使えなくなります。1440px 幅での目安です。

帯の高さ横長 2000×11004:3正方形縦 3:4
560px（既定）縦 71%52%39%29%
720px縦 91%67%50%38%

切り取る位置は glass_hero.slides の focus（object-position と同じ書式）で選べます。'50% 20%' のように書くと上寄りで残ります。

縦長の写真を主役にしたい場合は、帯を高くするより写真を別の形で置くほうが向いています（左右に分ける、器の中に収める、など）。

ヒーローのリンクはボタンではなく下線にしてあります。ヒーローは「読ませる」場所で、押させる場所は各セクションのボタンに持たせているためです。ボタンに戻したい場合は app/template/glass/index.twig の class="g-hero__link" を class="ec-blockBtn--top" に変えてください。

キャッチコピー

app/template/glass/index.twig の glass_hero.slides の中の copy（太字）と sub（標準）を編集します。店名はヘッダーに出ているため、ここでは繰り返しません。ボタンの文言は label、リンク先は url です。

ヒーローをスライダーにする

glass_hero.slides に項目を足すだけです。2 つ以上になると自動でスライダーになります。 追加のライブラリは必要ありません。

{% set glass_hero = {
    autoplay: 6000,
    slides: [
        {
            image: asset('assets/img/top/hero-01.jpg', 'user_data'),
            image_sp: asset('assets/img/top/hero-01-sp.jpg', 'user_data'),
            focus: '50% 50%', veil: 0.12,
            copy:  '透明感のあるデザインで、商品そのものの魅力を引き立てる。',
            sub:   'あなたのお気に入りが見つかるオンラインストアです。',
            label: 'VIEW MORE', url: ''
        },
        {
            image: asset('assets/img/top/hero-02.jpg', 'user_data'),
            image_sp: asset('assets/img/top/hero-02-sp.jpg', 'user_data'),
            focus: '50% 40%', veil: 0.2,
            copy:  '冬のスキンケアフェア、開催中。',
            sub:   '対象商品が 20% オフ。1 月 31 日まで。',
            label: '特集を見る', url: '/products/list?category_id=5'
        }
    ]
} %}

写真・キャッチコピー・リンク先がまとめて切り替わります。セールや特集の告知をそのまま流せます。

写真そのものも url へのリンクです。label を空にしてボタンを出さない場合でも、写真を押せば同じ行き先へ進みます。写真のリンクは読み上げとキーボードの移動先からは外してあります（同じ行き先が 2 回出てくるのを避けるため）。キーボードで進む経路はボタンのほうです。

  • ガラスの板は動きません。 中身だけが入れ替わるため、板が写真の縁をまたぐ構図は崩れません
  • 板の高さは、いちばん長いコピーに合わせて固定されます。 切り替わるたびに下のブロックが上下しません
  • JavaScript が動かない環境では 1 枚目がそのまま出ます。 崩れません
  • スライダーを使うときは、全部のスライドに写真をご入力ください
操作
自動送りautoplay のミリ秒ごと。0 にすると自動では動きません
手動板の下の点をクリック。スマートフォンは左右に払う

自動送りが止まる場面は次のとおりです。

  • ヒーローにマウスが乗っている間
  • ヒーローの中をキーボードで操作している間
  • タブが裏に回っている間（戻ると再開します）
  • OS の「視差効果を減らす」設定が入っている環境（最初から動かしません）

隠れているスライドのボタンには Tab で入りません。キーボードでの移動順は表示中のスライドだけになります。

切り替わる速さは --g-hero-fade（既定 .7s）で変えられます。

:root { --g-hero-fade: 1s; }

slick のバナースライダーに差し替える

ヒーローごと EC-CUBE 標準のバナースライダーに置き換えることもできます。手順は index.twig 末尾のコメントに記載しています。slick は EC-CUBE 本体に同梱されているため、追加ライブラリは不要です。

（上の「ヒーローをスライダーにする」はガラスの構図を保ったまま中身を入れ替えるもので、slick は使いません。ふつうはそちらで足ります。）

アイキャッチに写真を敷く（ブロック管理では「新入荷商品特集」）

初期ビジュアルは 画像ファイルではなく CSS 描画（.g-visual）です。画像を持たないため初期状態で画像切れが起きず、配色プリセットにも自動で追従します。ヒーローと同じく、写真を指定したときだけ差し替わります。

円の濃さは --g-visual-strength で変えられます（既定 1）。

/* [コンテンツ管理 > CSS管理] か user_data/assets/css/customize.css に */
:root { --g-visual-strength: .6; }   /* 小さくすると円が薄くなります */

mono だけ既定が .67 です。 この配色はアクセントがほぼ黒なので、他と同じ濃さにすると円が面として重く出ます（地との明度差が aurora の 1.5 倍ありました）。色は変えずに濃さだけ下げて釣り合わせています。

app/template/glass/Block/eyecatch.twig の冒頭を編集します。文言もここで変えられます。

{% set glass_eyecatch = {
    title_en: 'SKIN CARE',
    title:    '肌にのせた瞬間の、軽さ。',
    lead:     "余計なものを入れず、必要なものだけを。\n朝と夜、毎日くりかえすお手入れだからこそ。",
    image: asset('assets/img/top/eyecatch.jpg', 'user_data'),
    focus: '50% 50%',
    alt:   ''
} %}

推奨サイズ 1200×900（4:3）。alt は隣に説明文があるため既定は空（装飾扱い）です。写真そのものに情報がある場合だけ書いてください。

広い画面では、文章のガラス板がビジュアルの右端に食い込みます。 ガラス越しに縁が透けるのはヒーローと同じ狙いですが、左右が逆（ヒーローは板が左・写真が右）なので、同じ絵の繰り返しには見えません。食い込む量は次のとおりです。

@media (min-width: 768px) {
  .ec-eyecatchRole__intro { margin-left: -84px; }
}

重ねずに並べたい場合は margin-left: 0、.ec-eyecatchRole { gap: 40px; } に戻してください。

lead の改行は \n で入れます。この項目だけ二重引用符 " で囲んでいるのは、 Twig が \n を改行として扱うのが二重引用符の中に限られるためです。一重引用符で書くと、画面に \n の 2 文字がそのまま出ます。

トピック（バナー）に写真を敷く

app/template/glass/Block/topic.twig の冒頭で、見出し・リンク先・画像をまとめて 設定します。

{% set glass_topic = [
    {
        title: '夏の限定フレーバー',
        url:   url('product_list') ~ '?category_id=1',
        image: asset('assets/img/top/topic-01.jpg', 'user_data'),
        focus: '50% 40%'
    },
    {
        title: 'ギフトセット特集',
        url:   url('product_list') ~ '?category_id=5',
        image: '',
        focus: '50% 50%'
    }
] %}

推奨サイズ 1200×675（16:9）。image を空にすると、その 1 枚だけ CSS 描画の初期ビジュアルになります。

見出しはビジュアルの上に重なります。 カテゴリのカードと同じく、ガラスの名札に入って下端に乗ります。板の高さは見出しの行数で決まるので、長い見出しが 2 行になってもはみ出しません。

枚数は自由です。 配列に要素を足すと、その数に合わせて横に並びます（2 枚なら 2 列、3 枚以上なら幅に入るだけ）。写真と CSS 描画を混ぜても差し支えありません。

コンセプトブロック（画面の端から端までの画像帯）

商品カードの並びが続くと単調に見えるため、途中に写真を挟むブロックを同梱しています。写真は器の幅を抜けて画面の端から端まで敷かれ、文字はその上に直接置きます。ガラスはボタンだけで、カテゴリの札と同じ作りです。

app/template/glass/Block/concept.twig の冒頭で設定します。

貼り付ける内容は コンセプトにあります。 ここから先は、設定の意味と選び方です。

推奨サイズ 2400×720 前後（3.3:1 ほどの横長）。帯は画面の幅いっぱいで高さは固定（PC で 520px）なので、これより正方形に近い写真を置くと上下が大きく切られます。image を空にすると、CSS 描画の初期ビジュアルになります。

  • align … 文字を置く位置。'left' / 'center' / 'right'
  • veil … 写真に重ねる白い覆いの濃さ。0 で無し（下の「写真の条件」を参照）
  • lead … 改行したいところに \n を書きます（\n を使うため二重引用符で囲んでいます）
  • url … 空にするとボタンを表示しません

写真の条件

ここは商品を見せる枠ではありません。 リンク先はお店の考えを書いたページなので、容器の写真を置くと商品の紹介に見えてしまいます。素材・手ざわり・質感のカットをお選びください。同梱のデモは砂の畝を使っています。

板を敷かないので、文字が載る側（align の方向）が明るい写真でなければ本文が読めません。目安は合成後 #848484 以上（本文色で 4.5:1）です。足りないときは veil（写真に重ねる白い覆い）を上げてください。真っ黒な写真でも 0.52 あれば届きます。写真は白く飛びますが、読めないよりは良い結果です。

ピントが合っていることも確かめてください。 ソフトフォーカスの写真を帯いっぱいに敷くと、引き伸ばしていなくても帯ごとぼけて見えます。

明暗差が大きすぎる写真も向きません。 光を透かした粒のような写真は、文字の下に真っ黒な輪郭が入るため、基準を満たすには veil を 0.5 以上まで上げることになり、写真のほうが飛びます。明るい地に被写体が置かれているくらいが上限です。

狭い画面も確かめてください。 帯は幅に合わせて切られるので、PC で明るいところに載っていても、スマートフォンでは暗いところへ移ることがあります。粒の細かい写真（砂など）も、文字の下に暗い粒が入るぶん見た目より数字が下がります。同梱のデモ写真は veil: 0.28 で PC 8.3:1 / スマートフォン 7.8:1 です。

取扱いブランド / メディア掲載の帯

細い一行の帯です。ほかの段がカードや写真なのに対して、これだけ背が低いので、並べたときにリズムの区切りになります。

app/template/glass/Block/logos.twig の冒頭で設定します。

貼り付ける内容は 掲載メディアにあります。 ここから先は、設定の意味と選び方です。

image を空にすると名前を文字で並べます。 ロゴ画像が手元に無くてもそのまま使えます。画像を使う場合は横長・背景透過の PNG か SVGを推奨します（高さ 34px 前後で出ます。色はいったんグレーに落とし、カーソルを乗せると戻ります）。

scroll: true にすると右から左へゆっくり流れます。 カーソルを乗せている間とキーボード操作中は止まります（自動で動くものには止める手段が要るためです）。「視差効果を減らす」設定の環境では流さず、指で払って見られる横スクロールになります。

他社のブランド名やロゴを載せるときは、取扱いの事実と、先方のロゴ利用条件をご確認ください。「メディア掲載」として使う場合も、実際に掲載された媒体だけにしてください。

お客様の声

写真の段が続くページに、文字が主役の段を挟むためのブロックです。写真を用意しなくても成立するので、開店直後でも置けます。

app/template/glass/Block/voice.twig の冒頭で設定します。

貼り付ける内容は お客様の声にあります。 ここから先は、設定の意味と選び方です。

stars は 1〜5。0 にすると星を表示しません。meta は名前の下の小さな文字で、買った商品名や年代などに使えます。items を空にすると何も出力しません。

実際にいただいた声だけを載せてください。 事実と違う評価を載せることは景品表示法で禁じられています（ステルスマーケティング規制）。掲載にあたってはご本人の同意もお取りください。

よくあるご質問

app/template/glass/Block/faq.twig の冒頭で設定します。

貼り付ける内容は よくあるご質問にあります。 ここから先は、設定の意味と選び方です。

a には <br> や <a> などの HTML を書けます。

開閉そのものに JavaScript を使っていません（<details> です）。そのためスクリプトが動かない環境でも開閉でき、ページ内検索でも閉じている中身が見つかります。

開くときの動き（300ms）だけは glass.js が足しています。新着情報の開閉と同じ仕組み・同じ速さ・同じ曲線です（EC-CUBE 標準の新着情報は jQuery の slideDown で開きますが、あちらは曲線を指定できないため、Glass では同じ処理に寄せてあります）。OS で「視差効果を減らす」を選んでいる環境では、動かさずに一瞬で開きます。

商品一覧ブロック（カテゴリから自動）

指定したカテゴリの公開商品を並べるブロックです。 商品を足したり公開を切り替えたりすれば、このブロックも自動で変わります。

見せ方は新着商品ブロックと同じ（横スクロール＋クイックビュー）で、中身の決め方だけが違います。あちらは載せる商品を手で書く場所、こちらはカテゴリを 1 つ指定すれば中身が自動で入れ替わる場所です。

app/template/glass/Block/product_pickup.twig の冒頭で設定します。

貼り付ける内容は 商品一覧にあります。 ここから先は、設定の意味と選び方です。

  • category_id … 並べるカテゴリの ID。[商品管理] → [カテゴリ管理] の一覧で確認できます。0 にするとブロックごと表示しません
  • limit … 並べる数。横スクロールなので多めでも差し支えありません
  • order … 'new' 新しい順 ／ 'old' 古い順
  • en / ja … 見出し
  • more … 見出しの右に「more」のリンクを出すか。押すとそのカテゴリの商品一覧へ飛びます
  • quickview … 写真にカーソルを乗せたときクイックビューを出すか

子カテゴリの商品も入ります。 「スキンケア > 化粧水 > しっとりタイプ」のように階層になっていても、親（スキンケア）を指定すれば下にぶら下がる商品まで並びます。商品一覧ページでカテゴリを選んだときと同じ範囲です。商品は末端のカテゴリにだけ紐づいていることが多いので、親を指定して何も出ない、ということにはなりません。

品切れの商品にはクイックビューを表示しません（カートへ入れられないためです）。

トップページのブロックの並び

初期状態のままだと、どのブロックも「白いカードが横に並ぶ」形で単調に見えます。形の違うブロックを交互に置くと、スクロールしたときのリズムが出ます。

写真の段と文字の段が交互に来るように並べるのがこつです。デモは次の順です。

順番ブロック形
1ヒーロー（index.twig）写真＋ガラスの板
2訴求バー（Block/features.twig）細い 3 列
3新着商品横スクロール
4コンセプト全幅の写真
5掲載メディア細い帯
6お客様の声引用カード（文字）
7特集（トピック）2 枚のバナー
8カテゴリ文字の一覧＋写真
8-2商品一覧（カテゴリから自動）横スクロール
9新入荷商品特集（アイキャッチ）写真＋板（食い込み）
10よくあるご質問開閉リスト（文字）
11新着情報文
12Instagram正方形グリッド

[コンテンツ管理] → [レイアウト管理] で並べ替えられます。

ただし 6 つは EC-CUBE の初期データに無いブロックです。先に [ブロック管理] で作ってください（→ トップページを作る）。

ファイル名ブロック名
conceptコンセプト
voiceお客様の声
faqよくあるご質問
logos掲載メディア
product_pickup商品一覧（カテゴリから自動）
instagramInstagram

ブロックの中身が設定だけになっている理由

ブロック管理は、登録したときに入力欄の中身をそのままファイルへ書き出します （app/template/glass/Block/<ファイル名>.twig）。実装までここに置くと、ブロックを作り直したときに丸ごと消えてしまいます。

そのため Glass では、作成が必要な 6 つを設定だけのファイルにしてあります。見た目の組み立ては _glass/blocks/ 側にあり、ブロック管理からは触れません。 貼っていただくのは設定の部分（40〜55 行）だけで、間違えても消えるのは設定だけです。{% set %} と {% include %} の両方が必要で、{% include %} を落とすと登録はできても何も表示されません。

作り方と貼り付ける内容は トップページを作るにあります。

カテゴリカードに写真を敷く

カテゴリのカードは、登録されているカテゴリを自動で並べます。 EC-CUBE のカテゴリには画像を登録する欄がないため、写真はカテゴリ名をキーにして対応づけます。手順と書き方は カテゴリにあります。

キーは管理画面 [商品管理 > カテゴリ管理] のカテゴリ名をそのまま書きます。書かなかったカテゴリは、これまでどおり色だけのカードになります。 混ざっていても差し支えありません。 カテゴリ名を変えたときは、ここも合わせて変えてください。

写真を敷いたカードは、カテゴリ名がガラスの板（.g-plate）に乗ります。ヒーローと同じ作り（ビジュアルの裾に膜を敷いてから薄い板を重ねる）なので、 どんな写真を敷いても名前が読めます。 板の高さは名前の行数で決まるため、長い名前が 2 行になってもはみ出しません。

同じ部品をトピックの見出しでも使っています。濃さはヒーローのバーと共通（--g-hero-scrim / --g-hero-bar-photo）なので、片方を変えると両方に効きます。写真の明るさが最も不利な場合でも文字が読めることを検証しています。

カテゴリが 4 つ以上あるとき、先頭だけ横 2 つ・縦 2 つぶんの大きさになります。同じ大きさのカードが並ぶだけだと単調に見えるためです。

少ないときは列が余らないように形を変えます。

カテゴリ数先頭の形
4 つ以上横 2 つ・縦 2 つ
3 つ横 2 つ（残り 2 枚で 1 行が埋まります）
2 つ横 3 つ
1 つ全幅

3 つ以下で縦 2 つぶんにしないのは、2 行目に入るカードが無いからです。 2 行目の高さはそこに置かれたカードが決めるので、空のままだと高さ 0 になり、先頭が横に伸びただけの帯になります（1280px で実測。4 つ以上なら 533×424、 3 つだと 533×224 でした）。

表示件数を変えたい場合は app/template/glass/Block/category.twig の slice(0, 6) の数値を変更してください。

並べ方を変える（文字が主役の一覧）

{% set glass_category_layout = 'list' %}   {# 既定は 'grid' #}

'list' にすると、カテゴリ名を大きな文字で縦に並べ、右に写真を出します。名前にカーソルを乗せると、右の写真がそのカテゴリのものに入れ替わります。

トップページはカードのグリッドが続きやすいので、文字が主役の段を一つ挟むと流れが変わって読みやすくなります。 写真は glass_category_image を指定したカテゴリのぶんだけ出ます（指定が無ければ文字だけの行になります）。

狭い画面では写真を 1 枚だけ上に置き、その下に名前を並べます（指で触る画面では「乗せる」操作が無いためです）。 JavaScript が動かない環境でも 1 枚目の写真が出た状態で成立します。

新着情報の表示件数

app/template/glass/Block/news.twig の冒頭で変えられます。

{% set glass_news = { limit: 3 } %}

これより多いときは「もっと見る」が出て、押すたびに同じ件数ずつ増えます。 登録した記事が消えることはありません。 EC-CUBE 標準は 5 件ですが、 Glass はトップページに並ぶブロックが多いため、初期表示を 3 件にしています。

新着商品ブロック

標準テンプレートと同じ「手動で商品を指定する」方式です。 app/template/glass/Block/new_item.twig の冒頭で設定します。

{% set glass_new_item = [
    { id: 1, name: 'モイストローション',   price: '￥4,356（税込）', image: 'lotion.jpg' },
    { id: 2, name: 'ブライトニングセラム', price: '￥8,470（税込）', image: 'serum.jpg' },
    { id: 3, name: 'ナイトリペアクリーム', price: '￥7,260（税込）', image: '' }
] %}
項目内容
id商品 ID。管理画面の商品一覧で確認できます
name商品名
price価格。表示したい文字列をそのまま書きます
image商品画像のファイル名。空にすると「画像なし」の絵が出ます

掲載数は自由です。 配列に要素を足すと、その数だけ並びます。

横スクロールで並びます。 指で払う操作がそのまま効き、マウスの環境では右下に送りボタンが出ます。スライダーの JavaScript は使わず、CSS の scroll-snap で作っているため、読み込むものは増えません。

EC-CUBE 4.3 をお使いの場合は、[コンテンツ管理] → [レイアウト管理] で「新着商品」ブロックを 「新着商品（自動取得）」 に差し替えると、公開中の新着商品が自動表示されます（Glass のスタイルがそのまま適用されます）。手で書き換える必要がなくなるため、4.3 ではそちらをおすすめします。

Instagram ブロック

Instagram の投稿をトップページなどに並べるブロックを同梱しています。使い方は 2 通りあり、どちらも空のままならブロック自体を出力しません。

設定は app/template/glass/Block/instagram.twig にあります（管理画面の [ブロック管理] でも編集できます）。

A. 外部ウィジェットを貼る（自動更新）

SnapWidget や LightWidget などで発行したコードを、ファイル中ほどの「埋め込みコード」の 2 行の間に貼り付けます。投稿は自動で更新されます。 Instagram との通信はそのサービスが行います。

{% set glass_instagram_embed %}
    ここに貼り付ける
{% endset %}

B. 手動で写真を並べる（外部サービスなし）

貼り付ける内容は Instagramにあります。 ここから先は、設定の意味と選び方です。

画像は [コンテンツ管理] → [ファイル管理] に上げます（正方形で表示、推奨 800×800）。自動更新はされませんが、外部サービスに依存しないため Instagram の仕様変更で壊れることがありません。更新頻度が高くないショップはこちらが確実です。

枚数は自由ですが、5 枚をおすすめします。 広い画面では 1 行に収まり、 1 枚あたりが大きく見えます（6 枚より約 3 割大きくなります）。

狭い画面は 2 列に折り返します。枚数が奇数のときは、最後の 1 枚だけが半分の幅で取り残されないよう、横いっぱいの横長カットとして表示します。

account を設定すると、見出しの横に @アカウント名、下部に「Instagram で見る」ボタンが出ます。

カーソルを乗せたとき

写真にすりガラスが掛かり、中央に Instagram のアイコンがガラスの丸に載って 出ます。膜だけだと「何か起きそう」までしか伝わらず、どこへ飛ぶのかが分かりません。

アイコンを写真の上に直接置いていないのは、店が差し替える写真を選ばないためです。墨色のアイコンは暗い写真の上で沈み（真っ黒な写真で 1.4:1）、白いアイコンは明るい写真の上で飛びます（真っ白な写真で 3.0:1）。面を 1 枚挟めば背景の明暗に左右されず、どんな写真でも 7.4:1 あります。丸の作りはカテゴリの札（.g-plate）と同じです。

アイコンは公式ロゴではありません。 角丸の四角＋丸＋点という一般的な形で描いています（配布物にロゴ画像を同梱すると、Instagram のブランド利用規約に触れる可能性があるためです）。色は文字色に追従します。

指で触る画面では表示しません（「乗せる」操作がないためです）。

ファイルを消さないでください

ブロックを配置したあとに Block/instagram.twig が無くなると、その部分が出なくなります。 テンプレートに同梱しているのはこのためです（テンプレートを入れ直しても消えません）。

なお、欠けてもサイトは止まりません。 Glass は本体の block.twig を上書きして、twig が見つからないブロックを読み飛ばすようにしています。

API 連携について

このテンプレートは Instagram の API を直接利用しません。デザインテンプレートには PHP の実行点・管理画面の設定欄・アクセストークンの保管先が無く、トークンの定期更新も行えないためです。テンプレートに API を埋め込むと、Instagram 側の仕様変更で導入した全ショップが同時に止まります。

API 連携が必要な場合は、EC-CUBE ストアで配布されている専用プラグインをご利用ください。

関連記事