【最近の記事一覧　カスタマイズ前】

これにそれぞれの上下間隔をあけてみます。

#recent_entries{
}

　　　↓

#recent_entries li{
margin:0.75em 0;
}

上下の余白を0.75em分とっています。
emというのは、文字を基準とした単位で、0.75文字分になります。
例えばここの文字サイズの設定が12pxだとしたら、9pxの間隔があくことになります。
marginというのは指定した領域の外側の余白にあたる部分です。
上下に設定したら下の余白0.75emと上の余白0.75emを足したら1.5emになるんじゃないの？と思われると思いますが、marginの余白は相殺されるので0.75emになります。

【最近の記事一覧　カスタマイズ後】

【ブログタイトルカスタマイズ前】

【ブログタイトルカスタマイズ前】

まず、最初にタイトル画像を作成し、画像フォルダにアップロードしてURLを取得しておきます。

ブログのタイトル部分はh1にあたりますので、h1のaタグに関するCSSを追記します。
リンク部分の背景として画像を表示させ、テキストにはマイナスのインデントをかけます。

#header h1 a{
text-indent:-9999px;
display:block;
width:350px;
height:30px;
background:url(タイトル画像のURL) no-repeat;
overflow:hidden;
}

この時displayでblock要素とし、width（幅）、height（高さ）で画像の表示領域を確保します。
overflow:hidden;　というのは、その幅、高さからはみ出した部分を表示しないという記述です。
マイナスインデントをかけているのでリンクの枠線が左いっぱいまで広がってしまうため、
この記述を入れます。

【画像枠カスタマイズ後】

.entry .contents a img{
margin-right:5px;
margin-left: 5px;
border: 1px solid #ccc;
border-right-width:3px;
border-bottom-width:2px;
padding: 15px 10px 40px;
}

ただし、このままだと
記事（エントリー）エリアにあるリンクのある画像全てに枠線がついてしまうため
ペタおねだりボタンなどは個別に設定が必要です。

例えば、よく使いまわすペタボタンなどに「peta」など独自のclass指定をしてあげます。
そして以下のCSSを追記します。

.entry .contents a img.peta{
border:0;
margin:0;
padding:0;
}

そして記事編集画面の「HTMLタグを表示」タブのほうでペタボタン部分を編集します。（classを追加）
この記述を追加することでペタボタンにもついてしまうボタンの枠線も消すことができます。

<a href="http://peta.ameba.jp/p/addPeta.do?targetAmebaId=●●●●&amp;guid=ON">
<img height="50" alt="ペタしてね" src="http://stat.ameba.jp/blog/ucs/img/decoPeta/pc/decoPeta_09.gif " width="150" /></a>

　　　↓

<a href="http://peta.ameba.jp/p/addPeta.do?targetAmebaId=●●●●&amp;guid=ON">
<img height="50" alt="ペタしてね" src="http://stat.ameba.jp/blog/ucs/img/decoPeta/pc/decoPeta_09.gif " width="150" class="peta" /></a>

※●●●●は、アメーバIDです。

ここでは背景色の変更しかできませんので
背景に画像を使用したい場合はCSSをカスタマイズする必要があります。

今回使用する背景画像はオリジナルのものではなく
アメブロのヘッダのパターンとして用意されている
「淡い黄緑にドット柄のパターン」を
ページ全体の背景として用いることにします。

まず、この画像のURLをプロパティから取得しておきます。
http://stat.ameba.jp/p_skin/pattern/ptn_0009/3.gif

CSSの変更箇所

body{
background-image:url();
}

　　↓

body{
background-image:url(http://stat.ameba.jp/p_skin/pattern/ptn_0009/3.gif);
}

【背景画像カスタマイズ前】

【背景画像カスタマイズ後】

【ヘッダー背景　カスタマイズ前】

【ヘッダー背景　カスタマイズ後】

ヘッダーに画像を入れるにはアメブロの
デザインの変更＞スキンのカスタマイズ
でもいくつか背景パターンが用意されていたり、画像の登録もできるのですが
今回はCSSで設定します。
まずは背景画像を画像フォルダにアップロード。
そしてヘッダーのCSSをカスタマイズします。

CSSの変更箇所

#header{
margin:0;
padding:40px 0 90px 0;
background:url(背景画像のパス) no-repeat right top;
}

paddingで上下余白を調整
backgroundで背景の設定をします。
no-repeat→背景画像の繰り返しなし
right top→これは背景画像の表示を開始する位置の指定です。
　　　　　　　headerの　x方向の開始を右から　y方向の開始を上から

今回使用した画像は Fotolia（フォトリア） で購入したものです。
気に入った画像がみつからない人はのぞいてみてください。
単品購入でも100円～ダウンロードできます。
ちなみに私のダウンロードしたものも最小サイズ400px前後で100円でした。

これが変更前のデザインです。

該当CSSは2箇所あります。

--------------------（１）--------------------
/*７）記事タイトルの背景色を変更する*/
.entry h3.title{
background-color: #EFEFEF; /*-- 薄いグレー --*/
}

--------------------（２）--------------------
.entry h3.title{
clear:both;
margin:0 0 8px 0;
padding:3px 5px;
}

記述してある内容です。
背景色　→　#EFEFEF
余白（領域の外側）　→　下：8px
余白（領域の内側）　→　上下：3px、左右5px

これの背景色をなくし、タイトルの左にh3の背景をしてアイコンを表示させるようカスタマイズします。
変更後のデザインです。

--------------------（１）--------------------
削除

--------------------（２）--------------------
.entry h3.title{
clear:both;
margin:0 0 8px 0;
padding:3px 0 3px 35px;
background:url( 画像URL ) no-repeat;
min-height:20px;
height:auto !important;
height:20px;
}

ペンシルのアイコンの画像サイズは26px × 26px。
上下余白3pxと高さ20pxを足して26pxにしています。

min-heightの設定でh3の高さの最低値を設定しています。
IE6ではmin-heightのCSSが効かないので
height:auto !important;～height:20px; で対応させています。
左余白35pxは画像の幅を確保するための記述です。

不都合なようだったら復活するとして
とりあえず非表示にしてスッキリさせました。

以下をCSSに追記

CSSの編集画面の上部の方に以下の記述があります。
※ベーシックのテンプレート2カラムの場合です。

/*１）ブログタイトルの文字サイズを変更する*/
#header h1{
font-size: 3.0em; /*-- 25px相当の文字サイズ --*/
}

ここの3.0emの単位を小さくします。

/*１）ブログタイトルの文字サイズを変更する*/
#header h1{
font-size: 1.5em; /*-- 25px相当の文字サイズ --*/
}

/*　*/　で囲まれた箇所は説明のためのコメントなので
必要がなければ削除してかまいません。

/*１）ブログタイトルの文字サイズを変更する*/
#header h1{
font-size: 1.5em;
}

今回は、pタグに1文字分の余白をつけてみました。

【カスタマイズ前】

【カスタマイズ後】

フォントサイズと太字を標準に修正してみました。
画像ではちょっとわかりづらいですが、だいぶ落ち着きました。

このアドワーズ広告の太字部分をカスタマイズするには
スキンのCSSに追記する必要があります。

追記というか一般ユーザーでは編集できない部分のCSSを記述する必要があるので
それを上書きする形になります。

今回は以下のCSSを追記しました。

#gadBox.talent .gadTitle,
#gadBox.adList .gadTitle,
#gadBox.general .gadTitle{
font-size:1em;
font-weight:normal;
}