背景付きメニュー

IMAGEMENU01

1.0.0～1.1.1

1.1.0～

サイトメニューやカテゴリ一覧のHTML領域を選択し、アイコン画像（背景）とテキストのメニューで表示するパーツです。

メニュー項目の入れ子に対応し、親メニュー項目をタップして子のメニュー項目を表示するクライアントJavaScriptのUIを用意しています。

デフォルトでは製品標準の画像が背景として使われますが、画像リソースを差し替えたり、CSSで背景画像を変更、制御したり、元コンテンツで使用している背景画像リソースを使うこともできます。

基本的にはリスト（ULまたはOL要素）を選択しますが、メニュー項目がUL・OL要素でなく他の要素で構成される場合は以下の点に注意して選びます。

• メニュー項目の親要素を選びます。
  例）各メニュー項目がテーブルセル（TD）の場合はその親要素であるTRを選択
• 1で選んだ親要素がメニューと無関係のコンテンツを含んでしまう場合は、メニュー項目要素の集まりを選びます。
  例）各メニュー項目がP要素の場合は、そのP要素を選びます。ビルダー上で選択するコツは、メニュー項目１つを選んだ状態で「eq削除」ボタンをクリックし、メニュー項目個数を無制限にすることです。

メニュー項目が入れ子は、子メニューがULまたはOL要素で構成されている場合のみ対応しています。

なし

角丸リスト

リストスタイルで表示します。

小リンク（横並び）

小さいフォントサイズのメニュー項目を横並びに表示します。

整列アイコン

iPhoneホーム画面のアイコンのような角丸正方形スタイルで表示します。

２列カラム

２列ずつのブロックタイルスタイルで表示します。

背景画像マッピングデータ

メニュー項目に使用する背景画像情報を定義するデータです。元コンテンツで使用している背景画像を使いたい場合にこのデータを設定します。

メニュー項目の領域を選択し、基本ビューでセレクタの「取得」を行ってから、「背景画像を番号付で取得」ボタンをクリックします。

アンカー（A要素）に取り込む属性定義

(gcp=”item:step1.attrs”のvalue属性）

元コンテンツのA要素にある属性のうち、ここに定義した属性が出力に取り込まれます。

ビュー編集タブ上でこの定義内容を編集し、取り込み対象を変更できます。

キーワード置換定義データ

(gcp=”item:start.keywords”のテキストノード)

キーワード置換定義を設定すると、メニュー項目の文言（テキストノード）中の任意の文言を変更することができます。

キーワード置換定義はgclフォーマット（JSON形式に近似）で記述します。（バージョン1.1.0以降で対応）

GCバージョン1.2.0以降はこの機能を使わず、共通オプションで置換を行います

gcproc. prepareImagemenu01

リスト（UL・OL要素）ではないメニューを選ぶ場合でもパーツがメニュー項目を識別可能にするためのプリプロセス処理です。

このプリプロセスは必ず実行されます。

. gcpImageMenu01（クラスセレクタ）

なし

なし

            <div class="samples">
                <ul>
                  <li class="pic01">
                    <a href="#IMAGEMENU01">花見名所</a>
                  </li>
                  <li class="pic02">
                    <a href="#IMAGEMENU01">花カレンダー</a>
                  </li>
                  <li class="pic03">
                    <a href="#IMAGEMENU01">お花検索</a>
                  </li>
                  <li class="pic04">
                    <a href="#IMAGEMENU01">動画で見る</a>
                  </li>
                </ul>
            </div>
                

            <div class="gcpImageMenu01">
                <div id="gcpAwKzO" class="roundList">
                    <ul class="menu level1">
                        <li class="menuItem">
                            <div class="menuIcon" style="background-image:url(/GCSAMPLE/img/redleafs.png)">
                                <a class="link" href="#IMAGEMENU01">
                                    <div>
                                        <span class="text">花見名所</span>
                                    </div>
                                </a>
                            </div>
                        </li>
                        <li class="menuItem">
                            <div class="menuIcon" style="background-image:url(/GCSAMPLE/img/flower01s.png)">
                                <a class="link" href="#IMAGEMENU01">
                                    <div>
                                        <span class="text">花カレンダー</span>
                                    </div>
                                </a>
                            </div>
                        </li>
                        <li class="menuItem">
                            <div class="menuIcon" style="background-image:url(/GCSAMPLE/img/flower02s.png)">
                                <a class="link" href="#IMAGEMENU01">
                                    <div>
                                        <span class="text">お花検索</span>
                                    </div>
                                </a>
                            </div>
                        </li>
                        <li class="menuItem">
                            <div class="menuIcon" style="background-image:url(/GCSAMPLE/img/flower03s.png)">
                                <a class="link" href="#IMAGEMENU01">
                                    <div>
                                        <span class="text">動画で見る</span>
                                    </div>
                                </a>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>