アメブロカスタマイズ始めの一歩
これから初めてアメブロのカスタマイズをする人向けの記事です。
とりあえずブログ初めてみたけどデザインを変えてみたい。CSSって何か面白そう。やってみたい。
っていうレベル人向けに分かりやすくまとめてみました。
まずはCSS編集用テンプレートを選択
アメブロはCSS編集用テンプレートにしないとCSSの編集ができません。
まずはブログデザインをCSS編集用テンプレートに変更しましょう。
すごくわかりにくいんですが現在（2014年1月）のログイン画面では右上の歯車の所をクリックすると「デザインの変更」という項目が出てきます。
「デザイン変更」をクリックするとさまざまなブログデザインが出てきますが下のほうにある「カスタム可能」をクリック、その中の「CSS編集用デザイン」というのが唯一CSS編集できるテンプレートです。
他のカスタム可能デザインは簡易な編集しかできません。
ブログレイアウトはどれがいいか
「CSS編集用デザイン」を選択するとまず始めにブログレイアウトの基本を決めます。
ここでは大きく分けて「２カラム」か「３カラム」かを決定します。
※参考：カラムとは
どちらがいいかはブログの内容、趣味、センスになりますが個人的には３カラムだと情報が多すぎて鬱陶しくなるので「２カラム」が好きです。
右利きの人はポインターが右のほうにあることが多いと思いますのでメニューバーは右側に配置。
当ブログのレイアウトはそんな感じです。なので今回も「２カラム・メニュー右」にしましょう。
いよいよCSS編集画面へ
レイアウト変更後そのまま「CSS編集」をクリックすると下記のようなページになります。
赤枠内のテキストボックスがCSS（カスケーディング・スタイル・シート）です。はこのテキストボックス内を編集してブログデザインの変更を行います。
まずはヘッダーを変えてみる
ヘッダーはブログの顔です。ヘッダーをオリジナルの画像にすることで印象は大きく変わります。
赤枠のところがヘッダー部分、デフォルトは何も指定が無いので真っ白です。
ヘッダーにしたい画像をアップロード
CSS編集画面の上のほうに「ブログデザインヘッダ・背景用画像の追加」という項目があります。
ヘッダーにしたい画像を選択しアップロードしましょう。
注意したいのがサイズです。
アメブロのヘッダーサイズの基本は横が980ピクセルです。縦は好きな大きさで構いませんがだいたい300前後がいいと言われています。それ以外の大きさでアップロードすると画像が崩れてしまいます（縦の大きさは後ほど指定する数値に合わせます）。画像サイズ変更ソフト等で調整しましょう。
※参考：http://www.image440.com/
画像をアップロードすると「この画像のパス」と言うのが現れます。
そのパス（URL）をCSSで指定することで画像が反映されます。今回はヘッダーの変更が目的なのでヘッダーにその画像が表示されるようにCSSで指定します。
CSSを変更する場所
アメブロはCSS編集目次があって各項目にコメント（*/○○○○*/ は編集に反映されない。説明等を入れる）があるので非常に分かりやすいですね。
ヘッダーを指定する場所はここ。
/* (3-2) ブログヘッダー
——————————————–*/
/* skinHeaderArea ブログヘッダー980pxエリア */
.skinHeaderArea{}/* ←ブログヘッダーに背景画像を敷きたいとき */
skinHeaderAreaというのがヘッダーを指定してくださいという部分。
{で始まり、}でskinHeaderArea（ヘッダー指定）が終わるという意味になっています。
なので{}内にヘッダーを指定するコードを入れてあげるといいです。
.skinHeaderArea{
height:300px;
background-image:url(画像のURL);
background-repeat:no-repeat;
background-position:center top;
}/* ←ブログヘッダーに背景画像を敷きたいとき */
・height：高さ指定。今回300pxにしていますが自由に変更可能です。
・background-image：背景指定。（画像のURL）内に先ほどアップロードした画像のパスを入れます。
・background-repeat：背景をリピート（連続）するか指定。画像サイズが小さい場合無指定だと勝手に連続するのでリピートしないように指定。
・background-position：背景の場所を指定。小さい画像の場合指定する必要があるが今回画像サイズを合わせているので本来は必要ありません。
とりあえず丁度いいサイズの画像がなかったのでこのブログのフッターで使っている画像を使いました。
この背景だと黒の文字が見えなくなったのでタイトルとブログ説明の文字を変更しました。
文字指定関連は上の方にあります。
/* (1-2) ブログタイトル文字
——————————————–*/
/* skinTitle ブログタイトル文字 */
.skinTitle,.skinTitle:visited,.skinTitle:hover,.skinTitle:focus{
color:#ffffff;
font-weight:bold;
font-size:2.11em;
}
/* skinDescription ブログの説明文字 */
.skinDescription{
color:#ffffff;
}
CSSは英語です。colorは色、weightは重さ（重要さ。つまり太さ）、sizeは大きさを指定します。
CSSの色の指定は専用のカラーコードで指定します。ちなみに’ffffff’は白です。
※参考：カラーコード一覧表
CSS編集基本中の基本
バックアップを取る
CSSは失敗すると表示がおかしくなったり場合によっては表示ができなくなったりします。
編集する前にテキストエディタ（アメブロはwindowsのメモ帳等でOK）等に全部コピペして保存して置きましょう。
下に記述したコードが優先される
今回ヘッダーのCSSを編集しましたが一番下にヘッダーを指定するコード、skinHeaderAreaを追加すると下に追加した方が優先されます。そのため多くのアメブロカスタマイズ系サイトは「アメブロのヘッダーを編集する方法」にskinHeaderArea{（以下略）をコピペして一番下に貼り付けるという方法を紹介しています。
CSSは短めな方がいい
コードが長ければ長い程表示速度が遅くなります。無駄な記述にメリットはありません。
アメブロカスタマイズ系の記事には一番最後にコピーペーストするだけの簡単に出来るモノが多いですが先ほどのヘッダー部分のように二重になってしまうようなコードもあります。本当に必要なコードかどうか判断が必要です。
他にも基本的なルールはまだまだありますが今回はこの辺で。
