ヘッダー画像がどうしても小さくなってしまうのですが・・・(CSSでのヘッダー画像の挿入方法) | パソコンが好きになるブログ〜表技・裏技・便利技伝授!

パソコンが好きになるブログ〜表技・裏技・便利技伝授!

北海道札幌市中央区 大通駅徒歩7分のパソコンスクール「リズ札幌・ライフデザインスクール」パソコンインストラクター川上雄大によるパソコン・IT・ワンポイントレッスン。
スクールでのいろんな方のパソコンレッスンだったり、パソコンとは関係ない話だったり…

こんにちは、パソコンワンポイントレッスン!

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澄川・ライフデザインスクール
川上 雄大