サイドバーの各パーツに画像枠を付ける方法

アメブロカスタマイズで自分らしい空間を作る技 サイドバーの各パーツに画像枠を付ける方法

アメブロカスタマイズのわざめーばです。

こんにちは。

今回は、アメブロのカスタマイズ向け『CSS編集用デザイン』の『サイドバーの各パーツに画像枠を付ける方法』をご紹介します。

なお、今回ご紹介するのは『PR広告』以外の見出し部(タイトル部)を持っているサイドバーのパーツに一括して同じの画像枠を設置する方法です。

各パーツ毎に個別に設定することもできますが、これは機会があればまたご紹介したいと思います。

画像を用意する

今回は、次のような画像を用意しました。

横幅300ピクセル用
アメブロ素材置き場 300ピクセル タイトル

アメブロ素材置き場 300ピクセル ボディ部

アメブロ素材置き場 300ピクセル フッタ部

横幅180ピクセル用
アメブロ素材置き場 180ピクセル タイトル

アメブロ素材置き場 180ピクセル ボディ部

アメブロ素材置き場 180ピクセル フッタ部

『CSS編集用デザイン』では、サイドバーの横幅が2種類ありますが、幅広の方(.skinSubA)に横幅300ピクセル、細い方(.skinSubB)に横幅180ピクセルの画像を使用します。

CSSを編集する

CSSの編集で、以下のようなコードをあなたのアメブロのユーザーCSSの最後に追加して下さい。

.skinMenuHeader{
  padding:0 20px;
  line-height:28px; /* タイトル高さ */
  color:#ffffff; /* タイトル文字色 */
  background-color:transparent;
  background-repeat:no-repeat;
}
.skinMenuBody{
  margin:0;
  padding:20px;
  background-color:transparent;
  background-repeat:repeat-y;
}
.skinMenu{
  padding-bottom:10px; /* フッタ部高さ */
  background-color:transparent;
  background-repeat:no-repeat;
  background-position:center bottom;
}
.skinSubA .skinMenuHeader{ /* 300ピクセルタイトル */
  background-image:url(https://stat001.ameba.jp/user_images/20110813/23/sozai-land/7a/4e/p/o0300003811415124481.png);
}
.skinSubA .skinMenuBody{ /* 300ピクセルボディ部 */
  background-image:url(https://stat001.ameba.jp/user_images/20110813/23/sozai-land/0f/db/p/o0300001011415124480.png);
}
.skinSubA .skinMenu{ /* 300ピクセルフッタ部 */
  background-image:url(https://stat001.ameba.jp/user_images/20110813/23/sozai-land/a2/3a/p/o0300001011415124479.png);
}
.skinSubB .skinMenuHeader{ /* 180ピクセルタイトル */
  background-image:url(https://stat001.ameba.jp/user_images/20110813/23/sozai-land/0e/68/p/o0180003811415123213.png);
}
.skinSubB .skinMenuBody{ /* 180ピクセルボディ部 */
  background-image:url(https://stat001.ameba.jp/user_images/20110813/23/sozai-land/ac/13/p/o0180001011415123222.png);
}
.skinSubB .skinMenu{ /* 180ピクセルフッタ部 */
  background-image:url(https://stat001.ameba.jp/user_images/20110813/23/sozai-land/67/36/p/o0180001011415123212.png);
}

画像ファイルのURLは上でご紹介した画像のものです。

他の画像を使用する場合は、使用したい画像のURLに変えて下さい。

また、使用する画像によって、各所の数値を変更する必要が出てくると思いますが、上記コードに書いてあるコメントを参考にして頂ければと思います。

以上で『サイドバーの各パーツに画像枠を付ける方法』の説明は終わりです。

使用する画像によって数値を変えなければいけないので、少し難易度が高めかもしれませんが、よろしければチャレンジしてみてください。

アメブロカスタマイズで自分らしい空間を作る技