ヘッダー画像の設置方法２

07

Sep 2011

どうも、★Blacklion★です。

前回の「ヘッダー画像を設置する方法」の続きです。

前回の記事→ヘッダー画像の設置方法１

さて、前回はCSSを編集する直前まで説明しました。
ここからが本番です。気合入れて下さいねwwww


「ブログデザイン適用完了」まで進みましたね。
今開いているページ内の「CSSの編集をする」をクリックします。




「CSSの編集」ページを開いてまずすることは、
ヘッダー画像をアップロードする事です。




「ブログデザインヘッダ・背景用画像の追加」という所で、
ヘッダー画像に使おうと思っている画像をアップロードします。

「ファイルを選択」をクリックすると、
アナタのパソコンの中の画像を選択出来るようになりますので、
ヘッダー用の画像を選択します。

画像を選択すると自動的にこの画面に戻ってきますので「アップロード」をクリック。

アップロードされると画像のサムネイル（縮小画像）と、
その下に「この画像のパス」が表示されます。

このパスがインターネット上で世界中誰でも見ることが出来るヘッダー画像のURLです。
メモ帳（Windowsのソフトね）やワードなどにコピペしてメモしておきましょう。

その画像の下に「現在使用中のブログデザインCSS」という所があります。
ここに書かれている物を実際に編集して「ヘッダー画像」を表示させます。



気を付けないといけない事はここに書いていますが、
編集をして「保存」をする前に「表示を確認する」事が大切です。
こまめに確認すれば、ミスを減らしてくれますし、
ミスした時も直前にどこを触っていたのかも思い出しやすいためです。

cssはデザインを変更しますので、やり方によっては広告を消す事も可能です。
これは「規約違反」に該当する可能性がありますのでやらない方がいいです。

今回使用したテンプレートでは「3-2 ブログヘッダー」と書かれている所を編集します。




.skinHeaderArea｛｝ここに先ほどメモしておいた画像のURLを書きます。
でもこれ、とても不親切ですね。

.skinHeaderArea{http://wwww.ameblo.jp～blogheader.jpg}

↑これじゃあ適用されません。エラーになり他の部分にも影響が出てしまいます。

.skinHeaderArea{
background-image:url(http://wwww.ameblo.jp～blogheader.jpg);
}

正しくはこう書きます。

.skinHeaderAreaはブログヘッダーの要素の「セレクタ」と言います。
background-imageは背景画像の事でこの部分を「属性」と言います。
url()はそのURLを指定する書き方で、ここは「値」と言います。

セレクタ { 属性 : 値 ; }

これが基本的な書き方です。
この形を崩す事は出来ません。


まずはここまで編集してみて、どういう風に見えるかプレビューで見てみて下さい。
アナタのブログにヘッダー画像がきちんと表示されていますか？？

色々な問題がありませんでしたか？？

ここでよくある問題点とその解決法を書いておきます。

問題点１：ヘッダー画像が繰り返して表示される。

解決法：

CSSの決まりとして、何も指定しなければ基本的に画像はその範囲で繰り返し表示されます。

繰り返したくない場合は、

background-repeat:no-repeat;

とセレクタ｛｝の中に書きます。
つまり、

.skinHeaderArea{
background-image:url(http://wwww.ameblo.jp～blogheader.jpg);
background-repeat:no-repeat;
}

設置したい要素の大きさに合わせた画像を用意する事も重要です。

問題点２：画像が切れている。

解決法：
これはその範囲と画像が合っていない（画像の方が大きい）ため起こります。

今回使用したテンプレートでは、何も指定しなければ、
横幅が980px、高さが105pxです。
横幅は問題無いとは思いますが高さの指定は行いましょう。

.skinHeaderArea{
height:300px;/*高さ300pxの画像を使用する場合*/
}

こう書く事で、横幅980px、高さ300pxの範囲が確保されます。

これらを簡略化して書く事も出来ます。

.skinHeaderArea{
height:300px;
background:url(http://wwww.ameblo.jp～blogheader.jpg) no-repeat;
}

問題点３：ブログのタイトル、説明文が画像にかぶっている。

解決法：
これは要素の「背景」に画像を設定していますので当たり前といえば当たり前です。

解決法が多数ありますが、

全て非表示にしたい場合は、

.skinBlogHeadingGroupArea｛　/*今回の場合はここ*/
display:none;
}

個別に非表示にしたい場合は、

.skinTitleArea｛　/*ブログのタイトル*/
display:none;
}

.skinDescriptionArea｛　/*ブログの説明文*/
display:none;
}

表示する事を見越してそれに合わせた画像を用意するという手もあります。

また、表示はしたくないが範囲は残したいという場合があります。
範囲を残すという事は目に見えないがリンクを存在させたりする場合です。

.skinTitleArea a｛　/*ブログのタイトル*/
text-indent:-9999;/*数字は何でもいいですが画面の外に追いやる位の数字で*/
width:980px;/*横幅980pxの範囲を残す場合*/
height:300px;/*高さ300pxの範囲を残す場合*/
}

この場合の横幅と高さは画像の横幅と高さに合わせるのが通常です。

さて、どうでしょうか？？
アナタのブログはヘッダー画像がキレイに入った素敵なブログになりましたか？？

どうしても出来ないよという方はご質問等も受け付けています。
また、個別に設置フォロー（電話やスカイプ）も行っております。

ヘッダー画像以外の事に関しても何なりとご質問下さい。

また、「CSS」にはここに書いていない要素に対してもデザイン出来ます。
その場合は、一番下に書いていくのがわかりやすいかなと思います。



「CSS」の決まりとして、後の方に書いてある事が優先される。
というのがあります。

つまり同じ要素に対して違う設定をしていたとしても、
後の方に書いてある事が適用されというわけです。

少しややこしかったかもしれませんが、
ぜひチャレンジしてみて下さい。

それでは、この辺で☆

BYE☆

★Blacklion @ LionworksJapan★