新デザインの変更④（メイン背景を半透明）

アメブロカスタマイズ

新しい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{
  opacity: 0.90; /* 背景の透明度を変更（透過率10％）*/
  margin: 80px auto 40px auto; /* 上に80px下に40pxの透明スペースを作る */
//margin: 40px auto; /* 上下に40pxの透明スペースを作る（オリジナルメニュー無し） */
}
```
《オリジナルメニューが必要ない場合は》
```
/* 記事エリアの調整 */
.skinContentsArea{
  opacity: 0.90; /* 背景の透明度を変更（透過率10％）*/
//margin: 80px auto 40px auto; /* 上に80px下に40pxの透明スペースを作る */
  margin: 40px auto; /* 上下に40pxの透明スペースを作る（オリジナルメニュー無し） */
}
```
コピー後、『保存』をクリックします。