【クリエイターモード】CompleteでベーシックモードのENKEL風のヘッダーを表示させる方法はありますか。

Complete初期値の全ページ共通「JavaScript」、モジュール「ヘッダー」の
それぞれのソースコードを変更することでベーシックモードのENKEL風の表示が可能です。

PC表示例）初期表示

PC表示例）スクロール時

スマホ表示例）

◆全ページ共通JavaScriptを編集

ショップデザイン / テンプレート選択・編集 / クリエイターモード / 全ページ共通

「JavaScript」のソースコードを下記へ変更してください。

$(function() {
// ヘッダーのサイズ調整
headerAdjust();
$(window).on('scroll', function() {
headerAdjust();
});

// カレンダー特定日の設定
$('.day-list').each(function() {
var month = $(this).attr('data-month');
var day = $(this).attr('data-day');
var color = $(this).attr('data-color');

$('.makeshop-calendar' + month +' .day' + day).css({
'background-color': color,
'color': '#fff',
'font-weight': 'bold',
'height': '14px'
});
});

// キーワード検索用
$('.search-keyword').on('keypress', function(e) {
if (e.keyCode == 13) {
var index = $('.search-keyword').index(this);
$('.search-url')[index].click();
}
});

// ハンバーガーメニュー
$('.openbtn').on('click', function() {
$(this).toggleClass('active');
$('#g-nav').toggleClass('panelactive');
});

// サイドメニューを閉じる
$('#g-nav a').on('click', function() {
$('.openbtn').removeClass('active');
$('#g-nav').removeClass('panelactive');
});

// サイドメニューのカテゴリー開閉
$('.accordion').on('click', function() {
$(this).toggleClass('on').next().slideToggle();
$('.accordion').not(this).removeClass('on').next('.close').slideUp();
});
});

function headerAdjust() {
var adjustPoint = 20;
var scrollTop = $(window).scrollTop();
if(scrollTop > adjustPoint) {
$('.header').addClass('fix');
} else {
$('.header').removeClass('fix');
}
}

function MakeShop_afterListCartEntry(data){
if (!data.result) {
data.method.modal(data.error.message, function() {
location.href = '/view/item/' + data.systemCode;
});

return false;
}
}
// ENKEL風　スクロール
$(function() {
var moveHead = ".top-container";
var scrollY = 50;

if ($(moveHead).length) {
$('#header').addClass("defaultHead");

$(window).scroll(function() {
var scrolled = $(window).scrollTop() > scrollY;
$('#header').toggleClass("scrolled", scrolled).toggleClass("scrolltop", !scrolled);
});
} else {
$('#header').addClass("noMove");
}
});

◆モジュール「ヘッダー」を編集

ショップデザイン / テンプレート選択・編集 / クリエイターモード / モジュール管理

モジュール名：ヘッダー
モジュールタグ：$module.header

上記のモジュール名もしくはモジュールタグをクリックして
編集画面にお進みいただき、下記へ変更してください。

<!-- ENKEL風ヘッダー開始 -->
<header class="header enkel">
<div id="header" class="">
<div class="header-in">
<h1 class="shop-logo">
<a href="<{$url.top}>">
<{if $shop.logo_url}>
<img class="M_ShopLogo" src="<{$shop.logo_url}>" alt="<{$shop.name}>">
<{else}>
<{$shop.name}>
<{/if}>
</a> 
</h1>

<ul class="header-nav">
<li class="header-nav-login">
<{if $member.is_logged_in}>
<ul>
<li class="member"><{$member.name}>様</li>
<li class="icon-logout"><a title="ログアウト" href="<{$url.logout}>"></a></li>
<li class="icon-mypage"><a title="マイページ" href="<{$url.mypage}>"></a></li>
</ul>
<{else}>
<ul><li class="icon-mypage"><a href="<{$url.login}>"></a></li></ul>
<{/if}>
</li>
<li class="header-nav-cart"><div class="M_headBasket" id="M_basketTemp1">
<div id="M_basketClosedBox">
<a href="<{$url.cart}>" id="M_basket">
<div class="M_basketMarginBox">買い物かご</div>
</a>
<span class="cart-badge cart-count" <{if !$cart.has_item}>style="display:none;"<{/if}>><{$cart.total_quantity}></span>
</div>

</div>
</li>
<li class="header-nav-search">
<input type="text" class="side-search-keyword search-keyword" data-id="<{$search_form.keyword_id}>" value="<{$search.keyword}>" id="MakeShopTopSearchInput">

<ul style="display:none;">
<li>
<label>カテゴリー</label>
<select data-id="<{$search_form.category_id}>" class="search-category">
<{section name=i loop=$search_form.category_list}>
<option value="<{$search_form.category_list[i].code}>" <{if $search.category.code == $search_form.category_list[i].code}>selected<{/if}>><{$search_form.category_list[i].name}></option>
<{/section}>
</select>
</li>
<li>
<label>価格帯で絞り込む</label>
<input type="text" data-id="<{$search_form.price_low_id}>" value="<{$search.price_low}>" class="search-price">～<input type="text" data-id="<{$search_form.price_high_id}>" value="<{$search.price_high}>" class="search-price">円
</li>
<li>
<label>独自商品コードで探す</label>
<input type="text" data-id="<{$search_form.original_code_id}>" class="side-search-original-code original-code" value="<{$search.original_code}>" placeholder="独自商品コードを入力">
</li>
</ul>
<a href="<{$search_form.search_url}>" class="search-btn search-url" id="MakeShopTopSearchButton">検索</a>
</li>
</ul>

<ul class="global-nav">
<li class="head-category">
<a href="/shopbrand/all_items/" class="head-category-list">CATEGORY</a>
<div id="M_ctgList2">
<ul class="M_layer1">
<{section name=i loop=$category_menu.list}>
<{if $category_menu.list[i].child_category.has_item}>
<li class="M_has_child"><a href="<{$category_menu.list[i].url}>"><{$category_menu.list[i].name}></a>
<ul class="M_layer2">
<{section name=j loop=$category_menu.list[i].child_category.list}>
<li><a href="<{$category_menu.list[i].child_category.list[j].url}>"><{$category_menu.list[i].child_category.list[j].name}></a></li>
<{/section}>
</ul>
</li>
<{else}>
<li><a href="<{$category_menu.list[i].url}>"><{$category_menu.list[i].name}></a></li>
<{/if}>
<{/section}>
</ul>
</div>
</li>
<li><a href="<{$url.company}>">ABOUT</a></li>
<li><a href="<{$url.guide}>">GUIDE</a></li>
<li><a href="<{$url.support}>">CONTACT</a></li>
</ul>
</div>
</div>
</header>
<!-- ENKEL風ヘッダー終了 -->
<!-- ENKEL風SPヘッダー開始 -->
<header class="header complete">
<nav class="top-nav">
<h1 class="header-logo">
<a href="<{$url.top}>">
<{if $shop.logo_url}>
<img src="<{$shop.logo_url}>" alt="<{$shop.name}>">
<{else}>
<{$shop.name}>
<{/if}>
</a>
</h1>
<div class="header-menu">
<ul class="gnav">
<{if $member.is_logged_in}>
<li class="account logout"><a href="<{$url.logout}>">ログアウト</a></li>
<{else}>
<li class="account membership"><a href="<{$url.member_entry}>">新規会員登録</a></li>
<li class="account login"><a href="<{$url.login}>">ログイン</a></li>
<{/if}>
</ul>
<ul class="gnav">
<li class="gnav-menu header-favorite"><a href="<{$url.favorite}>">お気に入り</a></li>
<li class="gnav-menu header-mypage"><a href="<{$url.mypage}>">マイページ</a></li>
<li class="gnav-menu header-cart"><a href="<{$url.cart}>">カート</a>
<span class="cart-badge cart-count" <{if !$cart.has_item}>style="display:none;"<{/if}>><{$cart.total_quantity}></span></li>
</ul>
</div>
</nav>
</header>
<!-- ENKEL風SPヘッダー終了 -->


<style type="text/css">
/* ENKEL風CSS */
/*****************************************************
ヘッダ #header
*****************************************************/
@media screen and (min-width: 769px) {
/*PCでは元の【Complete】のヘッダーを非表示 */
.header.complete{
display: none;
}
}
#header{
position:fixed;
top:0;
background-color:#333;
color:#FFF;
height:180px;
width:100%;
z-index:99999;
}

.header-in{
position:relative;
height:100%;
}
.header-nav li,.header-nav li li a{
color:#FFF;
}
.header-nav .header-nav-cart #M_basketClosedBox #M_basket .M_basketMarginBox{
display:none;
}
.M_basketMarginBox .M_headBasket table{
margin: 3px 10px;
width: 190px;
}
.M_headBasket .M_basketMarginBox td.M_headImg{
width: 60px;
}
.M_headBasket .M_basketMarginBox td.M_headImg img{
width: 100%;
}
.header-nav .header-nav-cart #M_basketClosedBox #M_basket,
.header-nav .header-nav-login .icon-logout a,
.header-nav .header-nav-login .icon-mypage a{
background-color:#fff;
border-radius:50%;
height:40px;
width:40px;
display:inline-block;
position:relative;
text-align:center;
}
.header-nav .header-nav-cart #M_basketClosedBox #M_basket:before{
content:url(https://gigaplus.makeshop.jp/tplenkel/icon-basket.png);
}
.header-nav .header-nav-login .icon-mypage a:before{
content:url(https://gigaplus.makeshop.jp/tplenkel/icon-user.png);
}
.header-nav .header-nav-login .icon-logout a:before{
content:url(https://gigaplus.makeshop.jp/tplenkel/icon-logout.png);
}
.header-nav .header-nav-cart #M_basketClosedBox #M_basket:before,
.header-nav .header-nav-login .icon-mypage a:before,
.header-nav .header-nav-login .icon-logout a:before{
position:relative;
top:7px;
}
.header-nav li,.header-nav li li:first-child{
display:inline-block;
vertical-align:middle;
margin-right:8px;
}
.header-nav li:first-child{
margin:0;
}
.header-nav li li{
font-size:13px;
}
.header-nav li li:first-child {
max-width: 110px;
}
.header-nav .M_headBasket{
border:none;
background:none;
float:none;
padding:0;
margin:0;
width:auto;
}
.header-nav .M_headBasket table{
margin: 10px;
width: 190px;
}
.header-nav .M_headBasket tr#last-child td{
color:#333;
}
.header-nav #M_headBasketSwitch{
float:none;
width:auto;
height:auto;
}
.header-nav #M_basketTemp1 #M_basketClosedBox{
background:none;
position:relative;
text-indent:inherit;
width:auto;
height:auto;
}
.header-nav #M_basketTemp1 #M_basketClosedBox a{
color:#fff;
text-decoration:none;
height:auto;
width:auto;
}
.header-nav #M_headBasketIn{
display:none;
}
.header-nav #M_basketOpenedBox{
padding-top: 25px;
background: none;
border: none;
left: -90px;
width: 230px;
}
.header-nav .M_basketMarginBox{
background:#FFF;
border:none;
border-radius:8px;
left:-90px;
top:40px;
-webkit-box-shadow:3px 3px 10px rgba(0,0,0,0.4);
box-shadow:3px 3px 10px rgba(0,0,0,0.4);
}
.header-nav #M_basketOpenedBox .M_headItem{
text-align:left;
max-width: 90px;
padding-right: 8px;
padding-left: 8px;
}
.header-nav .M_basketMarginBox{
text-align:center;
padding: 10px;
}
.header-nav .M_basketMarginBox .M_headNum{
color:#333;
}
.header-nav #MakeShopTopSearchInput{
padding:10px 10px;
border:0px solid #666;
width:140px;
background-color:#666;
color:#FFF;
border-radius:100px;
padding-left:35px;
}
.header-nav .header-nav-search{
position:relative;
}
.header-nav .header-nav-search #MakeShopTopSearchButton{
position:absolute;
left:0;
top:7px;
border: none!important;
}
#MakeShopTopSearchButton{
background:url("https://gigaplus.makeshop.jp/tplenkel/icon-search.png") no-repeat center left 10px;
text-indent:-9999em;
width:30px;
height:22px;
padding:0;
display:inline-block;
}
.global-nav li{
display:inline-block;
margin: 0 15px 0 15px;
padding-bottom:4px;
position:relative;
}
.global-nav li:hover #M_ctgList2{
display:block;
}
.global-nav li a{
color:#CCC;
}
.global-nav li a:hover,
.global-nav li:hover a,
.global-nav li:hover #M_ctgList2:hover{
color:#FFF;
text-decoration:none;
-webkit-transition:0.3s ease-in-out;
-moz-transition:0.3s ease-in-out;
-o-transition:0.3s ease-in-out;
transition:0.3s ease-in-out;
}
.global-nav li #M_ctgList2 li{
margin:0;
padding:0;
background:none;
display:block;
}
.global-nav li #M_ctgList2 li a{
color:#777;
display:block;
font-size:15px;
padding:15px;
}
.global-nav li #M_ctgList2 a:hover{
text-decoration:none;
}
.global-nav li #M_ctgList2 .M_layer2{
display:none;
background-color:#fff;
width:200px;
z-index:1;
-webkit-box-shadow:2px 4px 2px rgba(0,0,0,0.1);
box-shadow:2px 4px 2px rgba(0,0,0,0.1);
position:absolute;
left:200px;
top:0px;
}
.global-nav li:hover #M_ctgList2 li a:hover{
background-color:#EEE;
color:#419A7E;
-webkit-transition:0.3s ease-in-out;
-moz-transition:0.3s ease-in-out;
-o-transition:0.3s ease-in-out;
transition:0.3s ease-in-out;
}
.global-nav li:hover #M_ctgList2 li:hover ul,
#M_ctgList2 ul.M_layer1 li.M_has_child:hover{
display:block;
}
.index-slider{
padding:0 0 48px;
min-width: 1200px;
}
.index-slider img.topImage{
width: 100%;
}
.index-slider .bx-wrapper{
margin-bottom:16px;
}
.index-slider .bx-wrapper img{
min-width: 100%;
}
.index-slider .bx-wrapper .bx-pager{
bottom:30px;
}
.index-slider .topImage{
width:100%;
}
#header + .index-slider{
margin-top:180px;
}
#header.noMove + .index-slider{
margin-top:80px;
}
#header.scrolltop + .index-slider{
margin-top:180px;
-webkit-transition:0.3s ease-in-out;
-moz-transition:0.3s ease-in-out;
-o-transition:0.3s ease-in-out;
transition:0.3s ease-in-out;
}
#header.scrolled + .index-slider{
margin-top:80px;
-webkit-transition:0.3s ease-in-out;
-moz-transition:0.3s ease-in-out;
-o-transition:0.3s ease-in-out;
transition:0.3s ease-in-out;
}
.global-nav li #M_ctgList2{
display:none;
position:absolute;
left:-62px;
top:20px;
width:200px;
border-top:5px solid #419a7e;
background:#fff;
z-index:2;
-webkit-box-shadow:3px 3px 10px rgba(0,0,0,0.1);
box-shadow:3px 3px 10px rgba(0,0,0,0.1);
}
#header .global-nav li #M_ctgList2{
left:-60px;
top:24px;
}
#header.scrolltop .global-nav li #M_ctgList2{
left:-60px;
top:24px;
-moz-transition:all 0.3s ease-in-out;
-o-transition:all 0.3s ease-in-out;
-webkit-transition:all 0.3s ease-in-out;
transition:all 0.3s ease-in-out;
}
#header.scrolltop .global-nav li .M_layer1 li a{
font-size:14px;
-moz-transition:all 0.3s ease-in-out;
-o-transition:all 0.3s ease-in-out;
-webkit-transition:all 0.3s ease-in-out;
transition:all 0.3s ease-in-out;
}
#header{
height:80px;
}
#header.defaultHead{
height:180px;
}
#header.scrolltop{
height:180px;
-moz-transition:all 0.3s ease-in-out;
-o-transition:all 0.3s ease-in-out;
-webkit-transition:all 0.3s ease-in-out;
transition:all 0.3s ease-in-out;
}
#header.scrolled{
height:80px;
-moz-transition:all 0.3s ease-in-out;
-o-transition:all 0.3s ease-in-out;
-webkit-transition:all 0.3s ease-in-out;
transition:all 0.3s ease-in-out;
}
/* .global-nav */
#header .global-nav{
position:absolute;
bottom:25px;
left:0;
right:0;
}
#header.defaultHead .global-nav{
bottom:14px;
left:0;
right:0;
}
#header.scrolltop .global-nav{
bottom:14px;
left:0;
right:0;
-moz-transition:all 0.3s ease-in-out;
-o-transition:all 0.3s ease-in-out;
-webkit-transition:all 0.3s ease-in-out;
transition:all 0.3s ease-in-out;
}
#header.scrolled .global-nav{
bottom:25px;
left:0;
right:0;
-moz-transition:all 0.3s ease-in-out;
-o-transition:all 0.3s ease-in-out;
-webkit-transition:all 0.3s ease-in-out;
transition:all 0.3s ease-in-out;
}
#header .global-nav li a{
font-size:14px;
}
#header.defaultHead .global-nav li a{
font-size:17px;
}
#header.scrolltop .global-nav li a{
font-size:17px;
-moz-transition:all 0.3s ease-in-out;
-o-transition:all 0.3s ease-in-out;
-webkit-transition:all 0.3s ease-in-out;
transition:all 0.3s ease-in-out;
}
#header.scrolled .global-nav li a{
font-size:14px;
-moz-transition:all 0.3s ease-in-out;
-o-transition:all 0.3s ease-in-out;
-webkit-transition:all 0.3s ease-in-out;
transition:all 0.3s ease-in-out;
}
#header.noMove .global-nav li a{
font-size:14px;
}
#header .shop-logo img.M_ShopLogo{
max-height:46px;
}
#header.defaultHead .shop-logo img.M_ShopLogo{
max-height:70px;
}
#header.scrolltop .shop-logo img.M_ShopLogo{
max-height:70px;
-moz-transition:all 0.3s ease-in-out;
-o-transition:all 0.3s ease-in-out;
-webkit-transition:all 0.3s ease-in-out;
transition:all 0.3s ease-in-out;
}
#header.scrolltop .shop-logo img.M_ShopLogo{
max-height:70px;
-moz-transition:all 0.3s ease-in-out;
-o-transition:all 0.3s ease-in-out;
-webkit-transition:all 0.3s ease-in-out;
transition:all 0.3s ease-in-out;
}
#header.scrolled .shop-logo img.M_ShopLogo{
max-height:46px;
-moz-transition:all 0.3s ease-in-out;
-o-transition:all 0.3s ease-in-out;
-webkit-transition:all 0.3s ease-in-out;
transition:all 0.3s ease-in-out;
}
#header .shop-logo{
display:block;
position:absolute;
text-align:center;
z-index:1000;
top:15px;
right:0;
bottom:0;
left:0;
width:10%;
max-height:70px;
}
#header.defaultHead .shop-logo{
top:34px;
right:0;
bottom:0;
left:0;
width:100%;
max-height:70px;
margin-left: 16px;
}
#header.scrolltop .shop-logo{
top:34px;
right:0;
bottom:0;
left:0;
width:100%;
margin-left: 0;
max-height:70px;
-moz-transition:all 0.3s ease-in-out;
-o-transition:all 0.3s ease-in-out;
-webkit-transition:all 0.3s ease-in-out;
transition:all 0.3s ease-in-out;
}
#header.scrolled .shop-logo{
top:15px;
right:0;
bottom:0;
left:0;
width:10%;
max-height:70px;
margin-left: 16px;
-moz-transition:all 0.3s ease-in-out;
-o-transition:all 0.3s ease-in-out;
-webkit-transition:all 0.3s ease-in-out;
transition:all 0.3s ease-in-out;
}
#header.noMove .shop-logo{
margin-left: 0;
}
#header .header-nav{
position:absolute;
z-index:2000;
right:0;
top:19px;
background-color:#333;
}
#header.defaultHead .header-nav{
right:0;
top:30px;
}
#header.scrolltop .header-nav{
right:0;
top:30px;
-moz-transition:all 0.3s ease-in-out;
-o-transition:all 0.3s ease-in-out;
-webkit-transition:all 0.3s ease-in-out;
transition:all 0.3s ease-in-out;
}
#header.scrolled .header-nav{
right:0;
top:19px;
-moz-transition:all 0.3s ease-in-out;
-o-transition:all 0.3s ease-in-out;
-webkit-transition:all 0.3s ease-in-out;
transition:all 0.3s ease-in-out;
}
.M_headBasket{
float: right;
width:126px;
padding:3px 3px 0 3px;
border:1px solid #b3b3b3;
margin:0 0 5px 5px;
background:#ededed;
}
#M_headBasketSwitch{
position: relative;
width: 126px;
height: 26px;
z-index: 999;
float:right;
}
#M_headBasketIn{
clear:both;
font-size: 11px;
text-align:right;
padding:2px 0;
width:126px;
}
#M_headBasketIn em{
color:#ff0000;
font-style:normal;
font-weight:bold; 
}
#M_basketClosedBox{
position: absolute;
left: 0;
top: 0;
width: 126px;
height: 26px;
cursor:pointer;
text-indent:-9999em;
text-align:left;
}
#M_basketClosedBox a{
display:block;
width: 126px;
height: 26px; 
}
#M_basketTemp1 #M_basketClosedBox{
background:url("/images/basket/headBasketSwitch1.png") no-repeat;
}
#M_basketTemp2 #M_basketClosedBox{
background:url("/images/basket/headBasketSwitch2.png") no-repeat;
}
#M_basketTemp3 #M_basketClosedBox{
background:url("/images/basket/headBasketSwitch3.png") no-repeat;
}
#M_basketOpenedBox{
position: absolute;
right: 0;
top: 25px;
width:200px;
height: auto;
background:#ffebeb;
display: none;
border:1px solid #b00000;
}
.M_headBasket table{
margin:3px 10px;
width:178px;
}
.M_headBasket td{
font-size: 12px;
padding:6px 2px;
border-bottom:1px dotted #999;
}
.M_headBasket td.M_headImg{ 
width:44px;
}
.M_headBasket td.M_headNum{
text-align:right; 
white-space: nowrap;
}
.M_headBasket tr#last-child td{
border-bottom:none;
}
.M_headBasket a{
color:#333;
text-decoration:underline; 
}
.M_headBasket a:hover{
color:#666;
text-decoration:none; 
}
#M_basketClosedBox span{
position: absolute;
right: -8px;
top: -8px;
background: #F23E0C;
color: #fff;
width: 20px;
height: 20px;
line-height: 20px;
border-radius: 50%;
text-align: center;
font-size: 12px;
font-weight: normal;
}
.contents{
margin-top: 120px;
}
li.head-category a{
text-align: left;
}
/* 【Complete】の元の設定打ち消し用 */
header{
background:none;
z-index: -1;
}
header.header{
z-index: 5;
}
.header.fix{
box-shadow:none!important;
}

/* SPは通常【Complete】で左上ロゴ固定表示（色指定ENKEL風）*/
@media screen and (max-width: 768px) { 
#header.scrolled .global-nav,
.header-nav-login ul,
#header .global-nav,
li.header-nav-cart{
display: none; 
}
header .header-logo img {
max-width: 100%;
position: fixed;
top: 22px;
left: 50px;
z-index: 9999;
}
.header {
padding: 85px 0 10px;
}
.header-nav #MakeShopTopSearchInput {
width: 100px;
}
.header.enkel{
display: none;
}
header .header-menu, .header-menu a,
.header-menu a::before{
background: #333;
color: #CCC;
}
.openbtn span {
background-color: #CCC;
}
.contents{
margin-top: 0;
}
}
</style>