cssなんかいじらなくてもタイトル画像(ヘッダ背景)は変えられる | アメブロを自分で素敵にデザインしちゃおう

アメブロを自分で素敵にデザインしちゃおう

アメブロ内においてのcssリファレンス(完全初心者向け)。

こんにちは。


『スキンをオリジナルにカスタマイズしたい!』

と思って一番初めにやりたいことはきっと、タイトル画像を変えることだと思います。

ブログの顔だもんね。変えたいよね。私も変えたいです。


ブログを自分好みにカスタマイズするにはcss使って・・・と、あるんですが

タイトル画像に関しては自分でcssなんかいじらなくてもOKです^^

[スキンのカスタマイズ]というところで変更すれば

アメブロさんが勝手にcssを変更してくれます。


要約すると

1.カスタマイズ可能なスキンを選択(スタンダードのベーシック他)

2.[デザインの変更]→[スキンのカスタマイズ]をクリック

3.ヘッダの項目の[画像の追加]をクリック

4.[参照]ボタンで画像ファイルを選択して[アップロード]をクリック

5.[この画像を使う]をクリック

6.[保存]をクリック

なんですが

くどいぐらいの説明は以下にあります^^



まず

カスタマイズしたい場合スキンをベーシックなものにしなくてはいけません。

アメブロが配布しているスキンはデザイン上変更ができなくなっているものが多いです。

[スキンのカスタマイズ]ボタンが押せない人は変更できないスキンを選択している

ということです。


・アメブロに登録してすぐにこのページを読んでくれた人

   ⇒そのままで良いです。

・既に何かのスキンに変更しちゃった人

   ⇒[デザインの変更]→[スキンの選択]

   スタンダードの中からベーシックスキンを選んでください。


スタンダードなスキン


(これらのいずれか)


他にもカスタマイズできるスキンはありますが

ひとつひとつ調べるわけにはいかないのでベーシックスキンを基準に話を進めます^^


次にカラムを変更します。

カラムというのは

自分が投稿した記事が反映されるメインの部分と

カレンダーや最新投稿記事の案内等をあらわすメニューの部分を縦に仕切って

ブログを見にきてくれた人に優しいブログ作りのために必要なものです。


カラム

(緑色の部分がメニューにあたります)


私のブログは右側にメニューのある2カラムですが(2007/11/16 現在)

全体的に3カラムにしている人が多いかな?

後々、どういうデザインにしたいか考えてカラムを選んでください。

※カラムを途中で変更するとcssが初期に戻ってしまいます。気をつけてね。


そしてヘッダにタイトル画像の挿入です。

[デザインの変更]→[スキンのカスタマイズ]

ヘッダの項目の中に[画像の追加]があります。

ここでタイトル画像にしたい画像を[参照]から選択して[アップロード]します。

アップロードしたら[この画像を使う]をクリック!


[プレビュー]を押してみてください。

タイトル画像(ヘッダ背景)が自分の選んだ画像になっています^^

納得したら[保存]をクリック


さてここで

画像についての説明ですが

アメブロの横幅のデフォルト(初期設定)は760pxです。

760px以上の場合は横幅760pxに自動的にリサイズされますが

760px以下の場合画像が右側にリピートされていきます。

↓こんな感じ


リピート


縦幅は気にしなくても大丈夫です^^


横幅760px以下の画像をリピートさせたくない!

という人は残念ながらcssをいじらなくてはいけません。

そして横幅760px以上の画像をリサイズしないでタイトル画像にしたい!

という人も残念ながらcssをいじらなくてはいけません。

リピートさせないcssの記述は次回 ^^

横幅(760px)の変更は・・・・・


そのうち^^;