デザインの変更④(メイン背景を半透明) | プログラマー月島優 AmbEditorPlus 公開中

プログラマー月島優 AmbEditorPlus 公開中

アメブロの標準エディタをカスタマイズする AmbEditorPlus(Chrome 拡張機能)を公開しています。

 

自分専用のオリジナルデザインにするための『ステップ④』です。

記事のエリアやサイドバーエリアを半透明にすることで、背景に設定した画像をうっすらと見えるようにし、デザインに高級感を持たせるための手順がご覧になれます。

 

カスタマイズ前の準備

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

デザインの変更①(CSS編集用デザインを適用する)

 

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

デザインの変更(初期化用CSS)

 

カスタマイズ手順

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

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

    https://blog.ameba.jp/ucs/editcss/srvcssupdateinput.do
     
  4. 「現在使用中のプロぐデザインCSS」をスクロールし、「(2-1) ヘッダー背景」の

    /* ヘッダー以下の背景色 */
    .skin-blogBodyInner {

    のすぐ下に、下記の二行をコピーする
      opacity: 0.90; /* 背景の透明度を変更(透過率10%) */
      font-weight: bold; /* ヘッダー以下の文字を太字にする */
    

     
  5. お好みで、上下に透明なスペースを作りたい場合は
      margin: 40px auto; /* 上下に40pxの透明スペースを作る */
    
    も一緒にコピーしてください。

     
  6. コピー後、『保存』をクリックします。
     

以上で適用完了です。お疲れさまでした。

 

 

記事を気に入って頂けたら

お願いします m(_ _)m

 

 

本でしっかり勉強したい人は、こんな本はいかがですか?