変更に挑戦。。。
今回もまた前回参考にさせていただいたサイトの中から
【アメブロカスタマイズ】2-3 ヘッダーにオリジナルのヘッダ画像を設置しよう – 目立つブログタイトル
を、みながらやってみようと思う。。。
今回は「タイトル」「説明」を表示しなくし、「画像」と「ブログ画像一覧を見る」 の間をあけます。
の方を挑戦したいので、ヘッダー画像もそれにあわせて、変更。。。
CSSを編集する。。
/* (3-2) ブログヘッダー
--------------------------------------------*/
/* skinHeaderArea ブログヘッダー980pxエリア */
.skinHeaderArea{
background-image: url(コピーした画像のパス);
background-repeat: no-repeat;
background-position: center top;
width: 980px;
height: 300px;
margin-bottom: 15px;
}/* ←ブログヘッダーに背景画像を敷きたいとき */
/* skinBlogHeadingGroupArea タイトルと説明を囲うエリア */
.skinBlogHeadingGroupArea {}
/* skinTitleArea ブログタイトルのエリア */
.skinTitleArea {
text-indent: -9999px;
}
/* クリックするとブログのトップに移動 */
.skinTitleArea a.skinTitle {
width: 980px;
height: 300px;
display: block;
}
/* skinDescriptionArea ブログの説明エリア */
.skinDescriptionArea {
text-indent: -9999px;
}
/* (3-3) コンテンツエリア
--------------------------------------------*/
↑こんな感じにコピーしてする。
そして、
.skinHeaderArea{
background-image: url(コピーした画像のパス)
↑この部分だけ変更
そうすると、こんな感じになる。
っということで、これでcss編集デザインでヘッダーと
背景の変更が終了です。
