今回はアメブロにヘッダー画像を使う方法と設置したヘッダー画像をクリックしてトップページへ行けるようにリンクを設置していきます。アメブロのブログの幅を変更していない前提で進めます。
さて、初期状態ならブログの幅は980pxになっています。そのため、ヘッダーに使う画像サイズは980pxの幅の物を用意。既にブログの幅を変更している場合はその幅に合わせた画像を用意しておきましょう。
画像がない場合はフリー素材で探してもいいですし自分で撮影した画像でも大丈夫です。それをペイント等でブログの幅に合うサイズに変更しておきましょう。
⇒ネットの画像の切り取り方と編集の仕方
ヘッダー画像を設置する手順
まずブログの幅のサイズの画像を用意したら画像をアップロードしていきます。
CSS編集のページに「ブログデザインヘッダ・背景用画像の追加」という項目があるのでここで「参照」をクリックしてファイルを選択し「アップロード」をクリック。
アップロードすると「この画像のパス」とかかれたURLが表示されているのでこれをコピーしてメモ帳等に貼り付けておきます。
ヘッダーに画像を設置する
画像のパスをコピーしたらCSSの一番下に次のコードを追加します。
/* アメブロヘッダー画像設定 */
.skinHeaderArea{
height:300px;
background-image:url(画像のパスURL);
background-repeat:no-repeat;
background-position:center top;
}「画像のパスURL」という文字を消して（）の中に先ほどの画像のパスURLを貼り付けて「保存」すれば完成。
それから 「height:300px」というのは画像の高さなので画像の高さに合わせて変更してもOK。ただ、あまりに縦に長い画像になると記事本文までが遠くなるので250pxから300px位がおすすめです。
それからヘッダー画像と下のコンテンツがくっついてしまっている場合、こんな風になっている場合ね。
この場合はCSSの一番下に次のコードを追加。
.columnC .skinMainArea {
margin-top: 40px;
}
.columnC .skinSubA {
margin-top: 40px;
}
.columnC .skinSubB {
margin-top: 40px;
}このコードはこのブログでグローバルナビを設置している人は既に追加しているので大丈夫なハズ。
ヘッダー画像をトップページヘのリンクにする
通常はブログのタイトルをクリックするとトップページへのリンクになっているのですが、ヘッダー画像を設置しても画像はリンクにはなりません。という訳で画像をクリックした時もトップページへ移動するようにしていきます。
ついでにヘッダー画像を設置した関係で邪魔になる場合があると思うので、その場合の対処も一緒に書いてみます。
先ほど同様にスタイルシートの一番下に次のコードを追加。
/* ヘッダー画像をリンクにする */
.skinHeaderArea2,.skinBlogHeadingGroupArea{
padding:0;
}
#header h1,.skinTitleArea{
display:block;
padding:0;
text-indent:-9999px;
}
#header h1 a,.skinTitle{
display:block;
height:300px;
}ここの「height」はヘッダー画像の高さね。お好みで変更して下さい。
さらに「text-indent:-9999px」という部分はブログのタイトルを画面の外に追い出すコードなので、ブログのタイトルは残したいという場合にはこの一行は削除してもOKです。
ブログタイトルを残す場合
ブログのタイトルを残す場合にはブログのタイトルの色を変更したり位置を調整する事もできます。同じくCSSに追加。
#header h1 a, .skinTitle {
color: #fff !important; /* タイトルの色（白） */
font-size: 18px; /* 文字の大きさ */
text-decoration: none; /* 下線無し */
text-align: left; /* タイトルの左寄せ */
padding: 20px 0 0 20px; /* 余白の調整 */
}タイトルを残す場合にまずは文字の色と大きさを決めます。それで位置を「text-align」で左寄せ（left）もしくは右寄せ(right)で寄せておき、後は「padding」で細かい位置調整という感じです。
「padding」は時計回りと同じで「上、右、下、左」の４つの数値で余白を設定できます。つまり先ほどのサンプルの場合は「上に20pxと左に20px余白を作る」というコード。
以上でアメブロのヘッダー画像設置は完了です。
