新デザインの変更③（ヘッダー半透明、タイトル色替え）

アメブロカスタマイズ

新しい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」をスクロールし、文末に下記のコードをコピーします。

/* skinHeaderArea ブログヘッダー980pxエリア */
.skinHeaderArea{
  opacity: 0.80; /* 背景の透明度を変更（透過率20％）*/
  background:#ffffff; /* 背景の色を変更 */
}

/* skinTitle ブログタイトル文字 */
.skinTitle,.skinTitle:visited,.skinTitle:hover,.skinTitle:focus{
  color: #1D2088; /* タイトルの色を変更 */
}

/* skinBlogHeadingGroupArea タイトルと説明を囲うエリア */
.skinBlogHeadingGroupArea{
  padding-left:20px; /* 左にスペースを入れる */
}