新デザインの変更⑤（オリジナルメニュー）

アメブロカスタマイズ

新しいCSS編集用デザインを使って自分専用のオリジナルデザインにするための『ステップ⑤』です。

ご自身のブログに、オリジナルのメニューを表示するための手順をご覧になれます。

カスタマイズ前の準備

この記事を読む前に、こちらの設定をしておいてくださいね。

新デザインの変更①（CSS編集用デザインを適用する）

変更に失敗し元に戻したい場合、こちらの記事をご覧ください。

新デザインの変更（初期化用CSS）

カスタマイズ手順

CSSの編集手順

『ブログ管理』画面を開きます。
https://blog.ameba.jp/ucs/top.do
『デザインの設定』ボタンをクリックします。

https://blog.ameba.jp/ucs/skin/skinselecttop.do
「デザインの変更」の「適用中のデザイン」にある『CSSの編集』をクリックします。

https://blog.ameba.jp/ucs/editcss/srvcssupdateinput.do

「現在使用中のプロぐデザインCSS」をスクロールし、文末に下記のコードをコピーし『保存』をクリックします。
※《重要》と書かれている個所は、メニュー項目の数に応じて変更してください。
　　下記のコードは、メニュー項目が3つの場合で、[100%÷3＝33.33%]

/* オリジナルメニュー */
.skinContentsArea {
  position: relative;
}
.nav-wrap {
  position: absolute;
  top: -80px; /* メニューバーの上下位置調整 */
  left:0px;
  margin: 0;
  padding: 0;
}
.nav-body {
  width: 980px; /* メニューバー横幅 */
  background: #666666; /* メニューバー全体の背景色 */
}
.nav-body>br {
  display: none;
}
.nav-body li {
  display: block;
  float: left;
  margin: 0;
  padding: 0;
  width: 33.33%; /* 《重要》100%÷(メニューの数)にすること */
  text-align: center;
  background:#666666; /* ボタンの色 */
}
.nav-body li a {
  display: block;
  text-decoration: none;
  font-size: 24px;
  font-weight:bold;
  color: #ffffff; /* 文字の色 */
  line-height: 40px; /* ボタンの高さ */
  border-right:1px #fff solid;/* ボタンの隙間 */
  transition: .2s;
}
.nav-body li:last-of-type a{
  border-right:none;
}
.nav-body li a:hover{
  color: #333333; /* 文字の色 */
  background-color: #ffffff; /* 背景の色 */
}

フリースペース編集手順

『設定・管理』ボタンをクリックします。

https://blog.ameba.jp/ucs/guide.do
『フリースペース編集』メニューをクリックします。

https://blog.ameba.jp/ucs/profile/srvprofileupdateinput.do?ra=%2Fucs%2Fentry%2Fsrventryinsertinput.do
『フリースペース編集』に下記のコードをコピーし、『保存』をクリックします。
※「ご自分のID」の部分は、必ず修正してください。
```
<div class="nav-wrap"><nav><ul class="nav-body">
<li><a href="https://ameblo.jp/ご自分のID/" title="ブログトップ">blog top</a></li>
<li><a href="https://ameblo.jp/ご自分のID/entrylist.html" title="最新の記事一覧">articles</a></li>
<li><a href="https://ameblo.jp/ご自分のID/theme-10112188856.html" title="テーマ一覧">theme</a></li>
</ul>
</nav>
</div>
```