HTMLを編集することで、アイコンつきのメニュー項目の追加が可能です。
編集する前にデザインセットのコピーボタンをクリックしてバックアップを保管し、元の状態に戻せるように準備したうえで作業をおこなってください。
■makeshopサポート
ショップデザインバックアップしてますか?!
※すでにデザインセットが5個以上ある場合は以下を参照してください。
■よくある質問
【クリエイターモード】デザインセットが5個以上あるとコピーできません。バックアップを取る方法を教えてください。
<手順1:メニュー項目を追加する>
ショップデザイン / テンプレート選択・編集 / クリエイターモード / モジュール管理「メニュー(guide)」
モジュールID:$module.menu_guide
のソース中、メニューのリスト内の<li>から</li>までがメニュー項目のソースです。
メニュー項目とリンク先を、ほかのメニュー項目と同じように記述してください。
<追記例>
<li><a href="/view/page/〇〇"><span><i class="material-icons-outlined">xxx</i>テキスト</span></a></li>
<手順2:マテリアルアイコンを指定する>
ヘッダーメニューの「Guide」に表示されているアイコンは「マテリアルアイコン」で指定されています。
Google Fonts(Material Icons)のページで、使用したいアイコンをクリックすると、アイコンの編集ツールが表示されます。
編集ツール内の「Inserting the icon(アイコンを挿入する)」に表示されるテキストを、ソースのxxxの部分に記述することで選択したアイコンが表示されます。
<追記例>
<li><a href="/view/page/〇〇"><span><i class="material-icons-outlined">xxx</i>テキスト</span></a></li>※Googleマテリアルアイコンの画面や書き方のルールはGoogle側のアップデートで変わることがあります。
他社サービスの操作方法はサポートの対象外です。
<アイコンフォント以外の画像を使用したい場合>
画像をサーバーにアップロードし、下記のいずれかの方法で画像が表示されるようにソースを作成してください。
・<img src="画像のURL"> を記述する
・CSSで背景画像を指定する


