Ameba（アメーバ）ブログでカスタマイズメニューを入れる方法

Amebaブログでは自由にレイアウトをカスタマイズする事は出来ない様なので、サイドバーの配置設定から、使用できるレイアウト枠「フリースペース」を使います。フリースペースの位置はどこでも出来るのですが、今回は一番上にドラッグアンドドロップして配置します。

フリースペース編集で、グローバルメニューのHTMLを入れます。

通常のHTMLなので、出来る方は独自で。コピペする方は以下のソースコードを利用してください。

以下のソースをコピーして、上記の赤枠内にペーストします。

<div class="nav-wrap"><nav><ul class="nav-body"><li><a href="https://ameblo.jp/xxxxx1"><span>メニュー１</span></a></li><li><a href="https://ameblo.jp/xxxxx2"><span>メニュー２</span></a></li><li><a href="https://ameblo.jp/xxxxx3"><span>メニュー３</span></a></li><li><a href="https://ameblo.jp/xxxx4"><span>メニュー４</span></a></li><li><a href="https://ameblo.jp/xxxxx5"><span>メニュー５</span></a></li></ul></nav></div>

フリースペース枠はエンターキー改行をすると改行して表示されるので、ソースコードは改行無しでベタ書きして入れます。

管理画面にログインして、デザインの設定より「適用中のデザイン」が「css編集用デザイン」になっている事がポイントです。この時、現在のレイアウトは２カラムでも３カラム構いません。「CSSの編集」をクリックして、リンク先のページでCSSの編集を行います。

以下のソースコードをコピーして、CSSの編集枠の一番下にペーストします。今回はメニューにマウスオーバーするとフワッと色が変わる様にしてます。
（上記のHTMLにclass名を合わせてます）

.skinContentsFrame {
position: relative; margin-top:70px;
}
.freespaceArea.subModule{
position: absolute; margin: 0; padding: 0; height:60px; top: -60px;
}
.freespaceArea .nav-body {
display: flex; align-items: center; justify-content: space-around;
}
ul.nav-body li{
width: 178px; text-align: center; font-size: 1.2em; padding: 10px 0; flex-basis: auto; margin: 0px 6px; border: 4px double #6DDAFB; background-color: #4497EC17; position: relative; height: 20px;
}
ul.nav-body li:first-child {
    margin-left: 1px;
}
ul.nav-body li:last-child{
margin-right: 1px;
}
ul.nav-body li a span{
color: #0064ff; font-weight: 700;
}
ul.nav-body li a{
position: absolute; top: 10px; left: 0; width: 100%; height: 100%;
}
ul.nav-body li a:hover, ul.nav-body li a:focus
{
text-decoration: none;
}
ul.nav-body li:hover{
background-color: #FEFCEE; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease;
}