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

アメブロカスタマイズ

新しい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」をスクロールし、下記のコードまで移動します。
/* オリジナルメニュー */
.skinContentsArea {
position: relative;
}
.nav-wrap {
position: absolute;
top: -80px; /* メニューバーの上下位置調整 */
left:0px;
margin: 0;
padding: 0;
}
.nav-body {
width: 980px; /* メニューバー横幅 */
background: #666666; /* メニューバー全体の背景色 */
}

上記のコードを下記のコードと置き換えます。

/* オリジナルメニュー */
.skinContentsFrame{
  position: relative;
}
.nav-wrap {
  position: absolute;
  top: -80px; /* メニューバーの上下位置調整 */
  left:0px;
  margin: 0;
  padding: 0;
  width:100%;
  background: #666666;
  opacity: 0.90; /* 背景の透明度を変更（透過率10％）*/
}
.nav-body {
  width: 980px; /* メニューバー横幅 */
  margin:  0 auto !important;
}