今回は前回の「ヘッダーを画像でカスタマイズしよう」とは違います！
コンテンツのサイズにあった横幅980pxのヘッダー画像を使って、
ヘッダー画像をクリックした際にブログのトップページへ戻すという設定です。
なお、アメデコでは「カスタム可能」な中にある「CSS編集用デザイン」を元に
記事を書かせて頂いておりますので、そちらをご了承頂いた上でご覧ください。
今回CSSの編集に追加するCSSは下記の5つです。
皆様の用意する画像のサイズによってオレンジ色の部分のみ変更してください。
今回私が使用した画像は横幅980px 縦幅250pxのヘッダー画像です。
それでは早速やっていきましょう。
CSSの編集に追加する内容
.skinHeaderFrame {
background-image: url("画像のURL");
background-repeat: no-repeat;
background-position: center top;
height: 250px;
margin-bottom: 25px;
}
.skinBlogHeadingGroupArea {
padding: 0;
}
.skinTitleArea {
padding: 0;
margin: 0;
text-indent: -9999px;
}
.skinTitleArea a{
width: 980px;
height: 250px;
display: block;
}
.skinDescriptionArea {
display: none;
}
それでは解説していきたいと思います。
「.skinHeaderFrame」から見ていきましょう。
「background-image: url("画像のURL");」で画像を読み込んでいます。
「background-repeat: no-repeat;」で画像の繰り返しを無しにしてあります。
「background-position: center top;」で画像の開始位置を設定してあります。
「height: 250px;」でこの背景の高さを設定してあります。
「margin-bottom:25px;」はヘッダー以降にあるコンテンツのエリアとの
空間をあけるためにmarginでbottomに25pxの設定してあります。
まずこの1つのCSSを設定した場合の表示を見てみましょう。
ヘッダー画像を読み込んでコンテンツとの距離を開けてるだけなので
ブログのタイトルや、ブログの説明文が変な位置から表示されてますね。
では次に「.skinBlogHeadingGroupArea」を見てみましょう。
「padding: 0;」で元々設定してあるpaddingを0にて初期化してあります。
ここまでの2つのCSSを設定した場合の表示を見てみましょう。
ブログのタイトルとブログの説明文を覆っているCSSのpaddingを初期化したので
余計な隙間がなくなりしっかりと本来の開始位置に表示されてますね。
では次に「.skinTitleArea」を見てみましょう。
こちらも上記のCSSと似ているのですが、タイトルのh1に適応されているCSSで
こちらもまずは「padding: 0;」と「margin: 0;」で初期化してあります。
「text-indent: -9999px;」でタイトルを左に9999px表示をずらして
テキスト自体を一般的なモニタでは見えないようにしております。
ここまでの3つのCSSを設定した場合の表示を見てみましょう。
タイトルの表示を元々設定されているpaddingとmarginを初期化したので
ブログの説明文が少しだけ上に表示されて、ブログのタイトル自体は、
ただ左にずらしてるだけなので妙な空間があいておりますね。
では次に「.skinTitleArea a」を見てみましょう。
これは先ほどのh1のブログのタイトルの後に<a>という要素があります。
その<a>要素に対するCSSを設定するよーって事になりますね。
「width: 980px;」と「height: 250px;」でヘッダー画像と同じサイズを指定します。
「display: block;」は指定要素をブロックレベルにする効果をもっています。
ですので<a>要素を横980px、縦250pxのブロック要素にしてあげています。
ということは、どういう事でしょう？
ここまでの4つのCSSを設定した場合の表示を見てみましょう。
ブログのタイトルの<a>要素にヘッダー画像と同じサイズの要素を
作ってあげたので、ブログの説明文が下に飛び出てしまっていますね。
この状態でも既にヘッダー画像は横980px 縦250pxの中ならどこをクリックしても
ブログのトップページへ飛ぶようになっています。
では最後に「.skinDescriptionArea」を見てみましょう。
前回の記事でも紹介しましたが、こちらはブログの説明文に対するCSSです。
今回のカスタマイズの場合でもヘッダーには表示させておく理由がありませんので
こちらは「display: none;」で表示自体を消してしまいましょう。
それでは5つ全てのCSSを設定した場合の表示を見てみましょう。
いかがでしょうか？
上記のような感じに表示されていれば完成です！
注意する部分が一箇所あります。
ヘッダー画像をマイページの「画像フォルダ」からアップロードした場合、
横幅800pxを超える画像は強制的に800pxに縮小されてしまいます。
これはアメブロの仕様だと思いますので仕方がないですね。
横幅800pxを超える画像の場合は「CSSの編集」画面に横幅の上限のないファイルが
5枚までアップロードできるので、大きい画像はそちらにアップロードしましょう。
※gif、jpg、pngのみ、5枚(各1MB以内)までアップロード可能です。
少し長い記事となってしまいましたが、これを機会に
皆様もヘッダーを画像でカスタマイズしてみてはいかがでしょうか？
最後まで記事を読んでくれてありがとうございました！