「EasyPage」のテンプレートを無料でカスタマイズしよう！ナビゲーションサンプルコード1

PC・イメージ

--------

スマホ・イメージ

--------

コード

--------

<style> .text-center { text-align: center; padding: 0; } .gl-nav-item2 > div > a:hover { background-image:url(); text-decoration: none; background-color: #fff; color: #222; border: 1px solid #222; } .gl-nav-item2 > div > a { color: #fff; width: 100%; height: 50px; line-height: 50px; font-weight: 900; border: 1px solid #fff; background-color: #393a3e; } </style> </p><div class="row"> <div class="container"> <div class="row gl-nav-item2 gl-bg-img02 "> <div class="col-xs-6 col-sm-2 col-md-2 text-center"> <a href="" class="center-block">HOME</a> </div> <div class="col-xs-6 col-sm-2 col-md-2 text-center"> <a href="" class="center-block">COLLETONE</a> </div> <div class="col-xs-6 col-sm-2 col-md-2 text-center"> <a href="" class="center-block">PROFILE</a> </div> <div class="col-xs-6 col-sm-2 col-md-2 text-center"> <a href="" class="center-block">SHOP</a> </div> <div class="col-xs-6 col-sm-2 col-md-2 text-center"> <a href="" class="center-block">LOOKBOOK</a> </div> <div class="col-xs-6 col-sm-2 col-md-2 text-center"> <a href="" class="center-block">BLOG</a> </div> </div> </div> </div>

使い方

--------

直接ページ作成のエディターに貼付ける

背景色を変更する

--------

background-color:#393a3e;

カラーコード（赤文字の部分）を好きな色に変更

文字色を変更する

--------

.gl-nav-item2 > div > a { color: #fff; width: 100%; height: 50px; line-height: 50px; font-weight: 900; border: 1px solid #fff; background-color: #393a3e; }

カラーコード（赤文字の部分）を好きな色に変更

マウスオーバー時の背景色を変更する

--------

.gl-nav-item2 > div > a:hover { text-decoration: none; background-color: #fff; color: #222; border: 1px solid #222; }

カラーコード（赤文字の部分）を好きな色に変更

背景を画像にする

.gl-bg-img02｛background-image:url(画像のURL);｝
.gl-nav-item2 > div > a:hover { text-decoration: none;background-color: #fff; color: #222; border: 1px solid #222; }
.gl-nav-item2 > div > a { color: #fff; width: 100%; height: 50px; line-height: 50px; font-weight: 900; border: 1px solid #fff;background-color: #393a3e; }

1．赤文字の行を追加し、画像のURLを書き換えてください。

2．background-color　（2箇所）を削除してください。

ぜひやってみてください。