アメーバブログのデザインをカスタマイズしてみた（背景画像の設定）

ちょっと遊んでみたくなり、
アメーバブログのデザインを変更してみた。

htmlの編集はできないが、
スタイルシート（CSS）の変更は可能。

まずは、デザイン変更で、
テンプレートを「ベーシック」にする。

ほかは、ピーチ、ブルー、グリーン、グレーを選ぶと
CSSの変更ができるとのこと。


「スキンのカスタマイズ」で、ヘッダー画像を登録したり、
背景色を変更できるが、
自由度が少ないので、直接CSSをいじってみる。

とりあえず、ヘッダー画像をアップロードする。
これは、ブログに画像をアップするのと同じやり方で行う。

そして、画像のURLをコピーしておく。

たとえば、このサイトのヘッダーは、

http://stat.ameba.jp/user_images/fa/6f/10110574785.gif

になる。


コピーしたら、「スキンCSSの編集」をクリック。

アメーバブログのトップは、
プロフィール、ルーム、ブログ、フォトなどのリンクが表示されているが削除できない。

これを非表示にする方法として、
display: none;
と記述すればよいが、
スパム扱いされる恐れがあるため、避けたほうがよい。

そこで、その部分を含めてヘッダー画像を表示するために、
以下を追記する。

#overHeader {
background: url(http://stat.ameba.jp/user_images/fa/6f/10110574785.gif) bottom left;
}

urlの中身は、先ほどアップロードしたヘッダー画像のリンクにする。

bottom left は画像の配置方法で、
左下の部分を基準に表示させている。

ヘッダー部分の背景は何も設定したくないので、
div#headerに、
background: none;
と追記する。

※background-color:#FFFFFF;　と書いていたら、これに上書き

ちなみにヘッダー部分だけにヘッダー画像を表示したいときは、

div#headerに、
background: url(http://stat.ameba.jp/user_images/fa/6f/10110574785.gif) bottom left;

と記述する。


サイドメニューのタイトル部分を変更したいときは、
画像のアップロードを行い、

h4.menu_title　へ、
background: url(http://stat.ameba.jp/user_images/○○.gif) top left;

とヘッダー画像のときと同じように記述する。


他の部分も基本的には同じ方法です。