前回の記事の「ヘッダーの構造を理解しよう」でご連絡させて頂いたとおり、
今回はヘッダーを画像でカスタマイズしてみようと思います。
今回挑戦するカスタマイズは画像を使ったカスタマイズの中でも
比較的簡単な物だと思いますので、是非挑戦してみてください。
なお、アメデコでは「カスタム可能」な中にある「CSS編集用デザイン」を元に
記事を書かせて頂いておりますので、そちらをご了承頂いた上でご覧ください。
※今回挑戦するのは現状のアメデコと結構同じような方法で、
背景1枚でヘッダー画像を表示してカスタマイズしていくものになります。
それではまず、下記のCSSをご覧ください。
CSSの編集に追加する内容
.skinHeaderFrame {
background-image: url("画像のURL");
background-repeat: no-repeat;
background-position: center top;
height: 300px;
margin-bottom: 25px;
}
.skinBlogHeadingGroupArea {
padding: 0;
}
.skinTitleArea {
padding: 0;
margin: 0;
}
.skinTitle,.skinTitle:visited,.skinTitle:hover,.skinTitle:focus {
font-size: 12px;
line-height: 25px;
font-weight: normal;
text-decoration: none;
}
.skinDescriptionArea {
display: none;
}
それでは解説していきたいと思います。
※一番重要そうな部分だけは細かく解説していきますが
それ以外に関しては簡単に紹介させて頂きたいと思います。
今回も基本的には前回の「ヘッダーの構造を理解しよう」と同じ感じなのですが、
いくつかもともとアメブロ側で設定されているCSSがあるので、
そのCSSを一部リセットして新しい要素を設定していっております。
「.skinHeaderFrame」から見ていきましょう。
「background-image: url("画像のURL");」で画像を読み込んでいます。
「background-repeat: no-repeat;」で画像の繰り返しを無しにしてあります。
「background-position: center top;」で画像の開始位置を設定してあります。
「height:300px;」でこの背景の高さを設定してあります。
「margin-bottom:25px;」はヘッダー以降にあるコンテンツのエリアとの
空間をあけるためにmarginでbottomに25pxの設定してあります。
次に「.skinBlogHeadingGroupArea」にCSSについてですね。
前回の記事でも書いたのですが、元々設定してあるpaddingを初期化しています。
次に「.skinTitleArea」のCSSをみてみましょう。
こちらも上記のCSSと同じなのですが、タイトルのh1に適応されているCSSで
元々こちらについても色々なCSSが設定されています。
なので、こちらもまずはpaddingとmarginを初期化してあります。
次に、下記のCSSですね。
「.skinTitle,.skinTitle:visited,.skinTitle:hover,.skinTitle:focus」
こちらは上記のh1の中のa要素に対しての設定が元々されております。
基本的にフォントに関するものが設定されていますので、
フォントサイズやヘッダー画像に合わせた行間などを設定してあります。
次に「.skinDescriptionArea」のCSSですね。
こちらはブログの説明文に関するCSSが元々設定してあるのですが
自分には特に掲載する必要がない項目でしたので「display: none;」で
説明文自体を消してしまっております。
表示が必要な方はCSSの解説サイトを見ながら挑戦してみてください。
それでは「CSSの編集に追加する内容」のCSSを「CSSの編集」に
追加して実際にブラウザで確認してみましょう。
設定するヘッダーの画像によって勿論かわるのですが、
上記のような感じに表示されていれば完成です！
なお、今回は上記に表示されている画像の「カスタマイズのテスト用ブログ」という
テキストがない状態の横幅2000px 縦幅300pxのシンプルな画像を使用しております。
今回のサイズのヘッダー画像なら、それなりにおおきなモニタで
表示した場合でも横幅が切れることなく、綺麗に表示されると思います。
※サイズ自体は大きくてもデザイン自体は中央に980px位で制作しましょう。
今回は背景1枚でヘッダー画像を表示してカスタマイズしていく記事でしたので
このような方法で制作してきましたが、コンテンツサイズにあわせた980pxの
デザインのヘッダー画像を使用してリンクさせる場合はまたやり方が多少違います。
ただ、基本的にこのような方法でヘッダーはカスタマイズしていくことが可能なので
是非とも皆様もヘッダーを画像でカスタマイズしてみてくださいね。
最後まで記事を読んでくれてありがとうございました！