EC-CUBEは自由度が高いですが、色々とやろうと思うと一定の知識が必要になってくるものです。
今回は、誰でも気軽に凝ったデザインが出来るように、うちのデザイナーさんに協力いただき、この記事にある内容を管理画面へ設定することで大きくデザイン変更出来るようにしてもらいました。
完成形はこんな感じです。
※ヘッダー部分にカーソルを合わせると背景が白くなります。
さあ、では実際に反映するための手順を紹介していきます。
ブロックを新規作成する
まずはコンテンツ管理＞ブロック管理にて、新規作成で新たなブロックを作成してください。
そこでブロック名/ファイル名の入力です。
今回はそれぞれスリムヘッダー/slim_headerとしました。
さあ、肝心のコード部分です。
長いですが、下記をまるっと貼り付けてください。
<header class="ec-headerRole">
<!-- タイトル -->
<h1 class="ec-headerTitle">
<a href="{{ url('homepage') }}">{{ BaseInfo.shop_name }}</a>
</h1>
<div class="ec-headerNaviRole">
<!-- カテゴリ -->
{% set Categories = repository('Eccube\\Entity\\Category').getList() %}
{% macro tree(Category) %}
{% from _self import tree %}
<a href="{{ url('product_list') }}?category_id={{ Category.id }}">
{{ Category.name }}
</a>
{% if Category.children|length > 0 %}
<ul>
{% for ChildCategory in Category.children %}
<li>
{{ tree(ChildCategory) }}
</li>
{% endfor %}
</ul>
{% endif %}
{% endmacro %}
{# @see https://github.com/bolt/bolt/pull/2388 #}
{% from _self import tree %}
<div class="ec-categoryNaviRole">
<div class="ec-categoryNaviRole__title">カテゴリ</div>
<div class="ec-categoryNaviRole__item">
<ul class="ec-categoryNaviRole__lists">
{% for Category in Categories %}
<li>
{{ tree(Category) }}
</li>
{% endfor %}
</ul>
</div>
</div>
<!-- ログイン -->
{{ include('Block/login.twig') }}
<!-- カート -->
<div class="ec-headerRole__cart">
{{ include('Block/cart.twig') }}
</div>
</div>
<!-- SP用ナビアイコン -->
<div class="ec-headerRole__navSP">
{{ include('Block/nav_sp.twig') }}
</div>
</header>
<style>
/***********************************************************************
slime_header ver.1.0
***********************************************************************/
/* ▼▼▼ 文字・アイコン・背景色や横幅の変更ここから ▼▼▼
***********************************************************************/
.ec-headerRole{
max-width: none;/* ヘッダー横幅制限したい場合は1130pxに変更 */
background: rgba(255,255,255,0);/* 背景色を変更 */
}
.ec-headerRole .ec-headerTitle a,
.ec-headerNav .ec-headerNav__itemLink,
.ec-headerNav .ec-headerNav__item .ec-headerNav__itemIcon,
.ec-cartNavi,
.ec-categoryNaviRole__title,
.ec-headerRole .ec-categoryNaviRole{
color: #000;/* ヘッダー基本的な文字・アイコン色を変更 */
}
@media (min-width:768px){
.ec-headerRole:hover{
background: rgba(255,255,255,1);/* 背景色を変更 */
}
.ec-headerNav .ec-headerNav__item .ec-headerNav__itemIcon,
.ec-cartNavi{
color: #000;/* PC時アイコンの色を変更 */
}
.ec-headerRole .ec-categoryNaviRole li a{
width: 180px;/* カテゴリの横幅変更はこちら */
color: #000;/* カテゴリの文字色を変更 */
background: rgba(255,255,255,0.8);/* カテゴリの背景色変更はこちら rgba(255,255,255,0.8) ← #fffなどの形式でも指定可能 */
}
.ec-headerRole .ec-categoryNaviRole ul ul{
left: 180px; /* カテゴリ横幅変更時に合わせて同じ数値に変更 */
}
.ec-headerRole .ec-categoryNaviRole li a:hover{
background: rgba(250,250,250,0.8);/* カテゴリhover時の背景色変更はこちら rgba(255,255,255,0.8) ← #fffなどの形式でも指定可能 */
}
.ec-headerRole .ec-categoryNaviRole li ul:before {
color: #000;/* カテゴリの>(アローアイコン)の色変更はこちら */
}
}
/* メインコンテンツ外枠の横幅固定を外す */
.ec-layoutRole .ec-layoutRole__contents{
max-width: none; /* 1150px; */
}
/* スライドショーの横幅固定を外す */
.ec-sliderRole{
max-width: none; /* 1130px; */
padding-left: 0; /* 20px; */
padding-right: 0; /* 20px; */
}
/* ▲▲▲ 文字・アイコン・背景色や横幅の変更ここまで ▲▲▲
***********************************************************************/
.ec-headerRole{
display: flex;
justify-content: space-between;
align-items: center;
position: relative;
padding: 15px 30px;
z-index: 999;
}
.ec-headerRole .ec-headerTitle{
font-size: 18px;
font-weight: bold;
margin: 0 0 0 30px;
}
.ec-headerRole .ec-headerNav{
margin-right: 0;
}
.ec-headerRole .ec-headerNaviRole{
width: auto;
max-width: none;
padding: 0;
margin: 0 0 0 auto;
}
.ec-headerNav .ec-headerNav__item{
font-size: 14px;
}
.ec-headerNav .ec-headerNav__itemIcon {
display: inline-block;
margin-right: 5px;
margin-left: 5px;
font-size: 18px;
}
.ec-headerNav .ec-headerNav__item .ec-headerNav__itemIcon{
display: inline-block;
}
.ec-cartNavi {
padding: 3px 0 0 10px;
}
.ec-headerNavSP{
top: 8px;
}
.ec-headerNav{
display: none;
}
.ec-headerRole .ec-categoryNaviRole{
display: none;
}
@media (min-width:768px){
.front_page .ec-headerRole{
position: fixed;
top: 0;
left: 0;
width: 100%;
transition: 0.4s;
}
.ec-headerRole a:hover{
text-decoration: none;
opacity: 0.8;
}
.ec-headerRole .ec-headerTitle{
margin: 0;
}
.ec-headerRole .ec-headerNav{
margin-right: 20px;
}
.ec-headerNav .ec-headerNav__item{
margin: 0 10px;
}
.ec-headerNav .ec-headerNav__item .ec-headerNav__itemIcon {
display: none;/*アイコン表示したい場合はinleine-blockに変更*/
}
.ec-headerNav .ec-headerNav__item a{
font-size: 14px;
font-weight: bold;
}
.ec-headerRole .ec-cartNavi {
padding: 12px 17px 10px;
}
.ec-headerNav{
display: block;
}
.ec-headerRole .ec-categoryNaviRole{
position: relative;
padding: 0;
font-size: 14px;
font-weight: bold;
color: #000;
margin-right: 18px;
transform: translateY(1px);
max-width: none;
width: auto;
display: block;
}
.ec-headerRole .ec-categoryNaviRole__title{
cursor: pointer;
}
.ec-headerRole .ec-categoryNaviRole__item{
position: absolute;
top: 0;
left: 0;
display: none;
padding-top: 45px;
}
.ec-headerRole .ec-categoryNaviRole:hover .ec-categoryNaviRole__item{
display: block;
}
.ec-headerRole .ec-categoryNaviRole ul{
margin: 0;
padding: 0;
}
.ec-headerRole .ec-categoryNaviRole ul ul{
position: absolute;
top: 0;
}
.ec-headerRole .ec-categoryNaviRole ul ul li{
display: none;
}
.ec-headerRole .ec-categoryNaviRole li:hover>ul>li{
display: block;
}
.ec-headerRole .ec-categoryNaviRole li{
list-style: none;
position: relative;
box-sizing: border-box;
}
.ec-headerRole .ec-categoryNaviRole li a{
display: block;
padding: 15px;
}
.ec-headerRole .ec-categoryNaviRole li ul:before {
content: "\f054";
font-family: "Font Awesome 5 Free";
font-weight: 900;
font-size: 10px;
position: absolute;
top: 18px;
right: auto;
left: -20px;
}
}
/***********************************************************************
slime_header ここまで
***********************************************************************/
</style>
長かったですね。
コピー漏れ、ございませんか？
では貼り付けて登録です。
これでブロックの新規作成は完了です。
続いてはレイアウト管理に移りましょう。
レイアウト管理からブロックを適用しよう
先ほど作成したブロックですが、コンテンツ管理＞レイアウト管理より確認出来ます。
トップページ用レイアウトをクリックしてみましょう。
右側下の方に未使用ブロックの中にスリムヘッダーブロックが新たに確認出来ますね。
あとはブロックの移動です。
下記の様に動かしてください。
1.スリムヘッダーブロック→#headerへ
2.ヘッダー(商品検索・ログインナビ・カート)→未使用ブロックへ
3.ロゴ→未使用ブロックへ
4.カテゴリナビ(PC)→未使用ブロックへ
最終的に問題ないかどうかは未使用ブロックの上にプレビューボタンがあるので、そちらから確認しましょう。
ちゃんと反映されていれば登録です。
サイトを確認しよう
登録が完了すれば最後はデザインが反映されているかの確認です。
無事に反映されていますね。
以上でスリムヘッダーデザインの完成です！
※もし反映されていない場合はキャッシュなどの影響が考えられるためブラウザキャッシュやコンテンツ管理＞キャッシュ管理より削除してください。
オマケ
今回、ブロックのコード内にCSSも含めて記述していますが、管理を分けたい方はCSS部分をCSS管理に記述するなどしてください。
CSS部分にはアレンジしやすい様にコメントも入れておりますので、そちらも活用していただければと思います。