グローバルメニューを設置してみたいと思います。
グローバルメニューとは
グローバルメニューとは、タイトル下によくあるリンクメニューの事です。
「グローバルナビゲーション」、「ヘッダーメニュー」などとも呼ばれます。
これを設置する事でブログ内の回遊率が上がると言われています。
非常に簡単なコピペ作業で設置する事が可能ですので、オススメのカスタマイズです。
ヘッダーのタイトル下に HTML をコピペ
細かいことはわからなくても構いません。
以下のコードを
「デザイン」→「カスタマイズ」→「ヘッダ」→「タイトル下」
にコピペします。
<div class="nav">
<ul>
<li><a href="http://">カテゴリ1</a></li>
<li><a href="http://">カテゴリ2</a></li>
<li><a href="http://">カテゴリ3</a></li>
<li><a href="http://">カテゴリ4</a></li>
<li><a href="http://">カテゴリ5</a></li>
</ul>
</div>
赤字の http;、カテゴリX は自分の URL とカテゴリ名に書き換えます。
数が 5個で足りない場合はコピペで数を増やす事ができます。
デザインCSS へコードをコピペ
上記でグローバルメニューは設置されるハズです。
但し、見た目の調整はデザインCSS で行います。
そのためには以下のコードを
「デザイン」→「カスタマイズ」→「デザインCSS」
に貼り付けます。
.nav>ul {
padding: 0;
margin: 0;
width: 100%;
margin-bottom: 30px;
display: block;
overflow: hidden;
}
.nav>ul>li {
box-sizing: border-box;
width: calc(100% / 5);
height: 50px;
line-height: 50px;
background: linear-gradient(#1a1a1a, #676767, #1a1a1a);
border-left: 1px solid white;
color: white;
float: left;
list-style-type: none;
text-align: center;
position: relative;
transition: box-shadow .3s ease-in-out;
}
.nav>ul>li:first-child() {
border-left: 0;
}
.nav>ul>li:hover {
box-shadow: 0 0 50px 25px #1a1a1a inset;
}
.nav>ul>li>a {
color: white;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
width: calc(100% / 5); の部分の数字はカテゴリーの数に変更します。
これで以下のような感じになると思います。↓
私の場合は「デザインCSS」へのコピペはしなくても上記の状態になりました。
使っているデザインテンプレートによって若干変わるのかもしれません。
↓ ランキングに参加しています。よろしければポチッとして下さい。