前回の記事の「jQueryでフッターを作ってみよう」は、
jQueryはこんな事までできるんだーという事を知って頂くために、
いきなりフッターの追加方法から始めてしまいましたが
本日からは基本的なことから勉強していきましょう。
今回はヘッダーの構造を理解していきたいと思います。
なお、アメデコでは「カスタム可能」な中にある「CSS編集用デザイン」を元に
記事を書かせて頂いておりますので、そちらをご了承頂いた上でご覧ください。
今回も、まずは画像は使わずちょっとしたCSSを使用する事で
ヘッダーがどのように変化するか、という事を理解するための
ヘッダーのカスタマイズの基本を勉強するものだと思ってください。
それではまず、下記のCSSをご覧ください。
CSSの編集に追加する内容
.skinHeaderFrame {
background: #CCCCCC;
height: 200px;
margin-bottom:25px;
}
.skinBlogHeadingGroupArea {
padding: 0;
}
それでは解説していきたいと思います。
今回は元々上記のCSSがHTMLへ設定されていますので、
こちらのCSSを編集するだけで今回のやりたい事は完成してしまいます。
「.skinHeaderFrame」では元々何も要素が読み込まれていません。
しかしHTMLには設定されているので、ここに要素を作ってあげましょう。
「background: #CCCCCC;」で背景を灰色にしてあります。
「height: 200px;」でこの背景の高さを設定してあります。
「margin-bottom:25px;」はヘッダー以降にあるコンテンツのエリアとの
空間をあけるためにmarginでbottomに25pxの設定してあります。
この「.skinHeaderFrame」のCSSを設定するだけでも、
ヘッダーが横幅100%のボックスは出来ています。
では「.skinBlogHeadingGroupArea」にCSSを設定するのはなぜでしょう？
ヘッダーを画像だけで表示する場合は気にしないでもいいのですが、
ブログのタイトルや説明文を画像の上に表示しておきたい場合等は
こちらのCSSの元々設定されている要素を初期化してしまったほうが簡単なのです。
「.skinBlogHeadingGroupArea」には元々下記の要素が設定されています。
.skinBlogHeadingGroupArea {
padding: 20px 0 30px;
}
なので、こちらを「padding: 0;」に設定しておくことにより、
このCSSの中に入るCSSの表示位置を変更しやすくなります。
それでは「CSSの編集に追加する内容」のCSSを「CSSの編集」に
追加して実際にブラウザで確認してみましょう。
※元々あるCSSに設定すると分かり難くなるとおもいますので、
分かりやすいようにCSSの編集画面の一番下にどんどん追加してしまっても大丈夫です。
上記のような感じに表示されていれば完成です！
今回はヘッダーの構造を理解しようという記事ですので、ここまでにしておきましょう。
アメブロのヘッダーは基本的にこれさえ理解していればあとはCSSの知識次第で、
画像でヘッダーを表示したりすることが出来ます。
次回はこちらの応用で画像を使ってヘッダーを作ってみたいと思います。
最後まで記事を読んでくれてありがとうございました！