PCインストラクターの川上です。
昨日に続いて、ヘッダー画像ネタです^^;
これもやはり、わたくしの書いた記事『エクセル(Excel)でヘッダー画像を作るには』をご覧になって、自分で作ってみよう・・・
と思って、実際にチャレンジされた方からのご質問です。
980ピクセルで画像を作って、CSSでヘッダー画像を設置しても、画像がどうしても小さくなってしまうのですが・・・
チェックしてみますと、CSSに設置されている画像のサイズが幅800pxになっています。
あれ~?980pxで作ってアメブロにアップロードしたはずなのに・・・
と思っていると思います。
そう・・・
アメブロに画像をアップローする方法を間違っていたのでは・・・
ヘッダー画像のように800pxより大きいサイズの画像をアップロードするには、
「CSSの編集」を選択して、
(「CSSの編集」って?という方はこちらの記事『「CSSの編集」をクリックするとは』をご参照してください。)
CSSの編集ページ(①)にある『ブログデザインヘッダ・背景用画像の追加』(②)から、アップロード(③)します。
■ヘッダー画像のアップロード■
① 「デザインの変更」を選択
② 「ブログデザインヘッダ・背景用画像の追加」の「参照」をクリックし、画像ファイルを選択
③ 「アップロード」をクリック
② 「ブログデザインヘッダ・背景用画像の追加」の「参照」をクリックし、画像ファイルを選択
③ 「アップロード」をクリック
すると、下側に「アップロードされた画像」が表示されますから、「この画像のパス」を右クリックして、「コピー」を選択しておきます。
その後、下側にある「現在使用中のブログデザインCSS」内の
/* (3-2) ブログヘッダー
--------------------------------------------*/
/* skinHeaderArea ブログヘッダー980pxエリア */
.skinHeaderArea{}/* ←ブログヘッダーに背景画像を敷きたいとき */
を見つけて、{}の間に次のCSSコードを追加してあげます。
background:url() left top no-repeat; /* 背景 */
height:300px; /* 高さ */
margin-bottom:10px; /* 記事エリアまでのスペース */
その後、url()のカッコの中に、先ほどコピーした画像のパス(画像url)を貼り付け(ペースト)してあげます。
完成すると、こんな感じになります。
/* (3-2) ブログヘッダー
--------------------------------------------*/
/* skinHeaderArea ブログヘッダー980pxエリア */
.skinHeaderArea{
background:url(画像url) left top no-repeat; /* 背景 */
height:300px; /* 高さ */
margin-bottom:10px; /* 記事エリアまでのスペース */
}/* ←ブログヘッダーに背景画像を敷きたいとき */
※ 画像urlはアップロードした画像urlです。また、height:300px;はヘッダー画像の高さに数値を変えます。
編集したら、「保存」ボタンを押して完成です。
あとは、ブログに戻って更新(F5キー)を何度か押してチェックしてみてください。(Macの人は、command+Rですね。)
「ブログデザインのCSSの編集」の「ブログデザインヘッダ・背景用画像の追加」で画像をアップロードしないで、普通に記事に画像を貼り付ける方法で「画像をアップロード」すると、
自動的に800pxに縮小されてしまう
ので、ご注意くださいませ^^
<注意!>
必ずCSSのバックアップはとっておいてくださいね!
以上、ワンポイントレッスンでした。
LIDS澄川・ライフデザインスクール
川上 雄大