たけもの電脳実験室

まずは、イメージに合わせたボタンの画像を作って、アップロードしておきます。

CSSに、こんな記述を追加すれば、
#ameblo a#btn_blog img {
visibility : hidden ;/* もともとの画像をここで、隠してます */
}
#ameblo a#btn_blog{
display: block;
padding:0;
margin:0;
height:24px;/*画像の縦*/
background-repeat : no-repeat ;
background-image : url(アップロード画像のパスをここに記述してください) ;
}
こんな感じになります。

枠を付けるだけなら、ＣＳＳに、こんな感じで追記します。
.entry{
border:1px solid #cccccc;
}
意味は、
1pxというのが、線の太さで、数字が大きくなるほど、太くなります。
solidというのが、線の種類で、doubleとすると、2本線になったりします。
最後に、#ccccccで、色を指定しています。この場合は、明るめのグレーです。

このままだと、枠の線と、文字がくっついて、窮屈なので、隙間を空けます。
.entry{
border:1px solid #cccccc;
padding:10px;
}
こんな感じにすると、すっきりしたシンプルな枠で、記事がかこまれます。

お気に入りのヘッダー画像が見つかったら、アメブロに設定していきます。

①デザインの変更から、「カスタマイズ」をクリックします。

②ヘッダーの部分の、「画像の追加」をクリックして、画像をアップロードします。

③変更画面のいちばん下にある、「保存」ボタンをクリックして完了です。

こんな感じで、ブログヘッダーが設定されました。

「無料　ヘッダー画像」とかをキーワードにググれば、すぐに、ブログヘッダー用に便利な、フリー画像とかのサイトがたくさん見つかると思います。

初期状態のアメブロのヘッダーにもぴったりのサイズ（800×200ピクセル）で、カテゴリー別に整理されていて、とても選びやすいサイトを1つだけ紹介します。

http://www.freewebpageheaders.com/