アメブロ新CSS グローバルメニューの作り方

5

アメブロの新CSSがリリースされて半年近くたちました。新CSSのタグは検索が多いので、グローバルメニューのCSSタグもご紹介します。

アメブロ新CSS、グローバルメニューの作り方

まずはブログ管理「デザインの変更」から新CSS編集用デザインを選んでいるかどうか確認します。

ameblo

その後「CSSの編集」をクリックします。

3

CSSを追加します。

クリックして現在使用中のブログデザインCSSまでスクロール

4

(6)その他、拡張の一番最後に下記を入力します。

/* グローバルナビゲーションメニュー */
.nav-wrap {
position: absolute;
margin: 0;
padding: 0;
}
.skin-blogSubA, .skin-blogSubB {
position: relative;
}
[amb-layout="columnB"] .skin-blogSubA .nav-wrap,
[amb-layout="columnC"] .skin-blogSubA .nav-wrap,
[amb-layout="columnE"] .skin-blogSubA .nav-wrap,
[amb-layout="columnB"] .skin-blogSubB .nav-wrap {
left: auto;
right: 0;
}
[amb-layout="columnA"] .skin-blogSubA .nav-wrap,
[amb-layout="columnD"] .skin-blogSubA .nav-wrap,
[amb-layout="columnC"] .skin-blogSubB .nav-wrap {
left: 0;
right: auto;
}
[amb-layout="columnE"] .skin-blogSubB .nav-wrap {
left: auto;
right: -360px;
}
.nav-body {
margin: 0;
padding: 0;
}
.nav-body:after {
display: block;
clear: both;
content: " ";
height: 0;
visibility: hidden;
}
.nav-body>br {
display: none;
}
.nav-body li {
display: block;
float: left;
margin: 0;
padding: 0;
text-align: center;
}
.nav-body li a {
display: block;
text-decoration: none;
}
.skin-blogBodyInner {
padding-top: 100px; /* メニューバーの表示場所 */
}
.nav-wrap {
top: -90px; /* メニューバー上下位置調整 */
}
.nav-body {
width: 1120px; /* メニューバー横幅 */
background: #e6e6fa; /* メニューバー全体の背景色 */
}
.nav-body li a {
width: 222px; /* ボタンの横幅 */
border-right:2px #fff solid;/* ボタン同士の隙間 */
line-height: 50px; /* ボタンの高さ */
color: #000; /* 文字の色 */
background: #e6e6fa; /* ボタンの色 */
}

ボタンの色や文字の色などは色見本表からお好きな色を選んでください。

フリースペースに記入

ブログ管理の「設定・変更」にある「サイドバーの」配置設定をクリック。
2

フリースペースをサイドバーに設置します。

「フリースペース編集」に下記のタグを入力します。

1


<div class="nav-wrap"><nav>
<ul class="nav-body">
<li><a href="URL1">自己紹介</a></li>
<li><a href="URL2">メニュー</a></li>
<li><a href="URL3">お客様の感想</a></li>
<li><a href="URL4">アクセス</a></li>
<li><a href="URL5">お問い合わせ・お申込み</a></li>
</ul>
</nav></div>

自己紹介などの文言は、お好きなものに変更してください。

完成です!

5

こんな感じになりました。

番外編

上にある既存のメニューバーですが、消すことも可能です。
先ほどのタグの下に下記を入れましょう。

.skin-blogHeaderNav {
display: none;
}

6

こんな感じになります。
カンタンなので、ぜひカスタマイズに挑戦してみましょう!