グローバルサイトのようなポップアップメニューを作成する [HTML5テンプレート用]

2018-06-21 14:39

グローバルサイトのようなドロップダウンメニューを自由記入欄やhtmlタグ利用可能エリアに設置できます。

STEP1 htmlタグをコピーする
表示サンプル: https://cafe0101.ocnk.net/page/2
<div class="global_site">
<div class="site_list layout_dropdown">
<div class="site_list_title">
<a href="javascript:void(0);">Other Sites PC<span class="colon">:</span></a>
</div>
<div class="site_list_dropdown" style="visibility: hidden;">
<div class="site_list_data">
<a href="https://www.ocnk.net/">
<span class="site_list_image"><img src="https://demo.ocnk.net/data/demo/image/sample1.jpg" class="icon_global" alt="" width="20" /></span>
<span class="site_list_label">Ochanoko</span>
</a>
</div>
<div class="site_list_data">
<a href="https://www.ocnk.me/">
<span class="site_list_image"><img src="https://demo.ocnk.net/data/demo/image/sample2.jpg class="icon_global" alt="" width="20" /></span>
<span class="site_list_label">saisai</span>
</a>
</div>
<div class="site_list_data">
<a href="https://www.autostepmail.com/">
<span class="site_list_image"><img src="https://demo.ocnk.net/data/demo/image/sample3.jpg class="icon_global" alt="" width="20" /></span>
<span class="site_list_label">Auto Step Mail</span>
</a>
</div>
</div>
</div>
</div>

STEP2 htmlタグを貼り付ける

コピーしたhtmlタグを、[デザイン管理]→[配置/画像/コメント設定]画面から
[自由記入欄][htmlタグ利用可能エリア]に貼り付けてください。

初期表示タイトルについて

初期表示タイトルの「Other Sites PC:」はご自身で変更可能です。

<a href="javascript:void(0);">Other Sites PC<span class="colon">:</span></a>

※コロン「:」が必要ない場合は、<span class="colon">:</span>を削除してください。

各メニューについて
メニューの区切り
<div class="site_list_data"> ~</span>までが、1つのメニューとなります。
メニューを追加する場合は、このブロックを繰り返し追加してください。
リンク先
各メニューのリンク先となります。リンク先のURLを指定してください。
<a href="https://www.ocnk.net/">
アイコン画像
アイコン画像となります。画像URLを指定してください。
<img src="https://demo.ocnk.net/data/demo/image/sample1.jpg" class="icon_global" alt="" width="20" />
各メニューについて
各メニュー名となります。文言を変更してください。
<span class="site_list_label">Ochanoko</span>
独自ドメインをご利用の場合
SSL保護下のページ(新規登録、お問い合わせ、ログイン、マイページ、メールマガジン、携帯サイトアドレスページ)へのリンクをメニュー内に追加される場合は、下記のFAQをご覧ください。
https://www.ocnk.net/faq/index.php?action=faq&id=986