看板の背景画像を変更する:はなまるスキン

看板の背景画像を変更する

ヘッダーの背景画像を変更する場合は「kanban.jpg」を入れかえてください。

画像ファイルのアップロード

900pix x 310pxくらいのサイズのファイルを準備し、kanban.jpgと名前を付け替えます。

[blogの短縮名]のフォルダのimgフォルダに上書きアップロードして下さい。

リロードして変更してある事を確認してください。

ヘッダーの背景画像の微調整

ヘッダーの背景画像は1pxづつ移動させる事ができます。デザインによって若干違いがありますが、design.cssの以下の箇所で調整する事が可能です。

/*============================
ヘッダーの背景
==============================*/
#atama{background:url(img/kanban.jpg) no-repeat -10px -140px;}
#top #atama{background:url(img/kanban.jpg) no-repeat -20px -40px;}

#atamaと書いてある方は、トップ以外のヘッダーの設定で、＃topと書いてある方はトップページの設定です。
赤い部分の数字は、画像を配置する座標で、x yの順番になってます。
xを小さくすれば左に、大きくすれば右に、yを小さくすれば上に、大きくすれば下に移動します。

「看板の背景画像を変更する」への問合せ

hanayan(09年08月08日 15:13:40)

看板の背景画像の変更で画像サイズの制限はあるのでしょうか？イラレで画像を加工したものをＵＰしたのですが反映されません。

yotaka(09年08月08日 15:49:02)

Nucleusのアップローダーを通してないのであれば、サイズについて特に制限はないはずです。
cssに記述する際に“スペース”が入っていない為に表示されない事はたまにあるようです。
一度ご確認いただけますでしょうか？

hanayan(09年08月10日 18:31:26)

有難うございます。
初心者でもうしわけないですが、
「cssに記述する際に“スペース”が入っていない為に表示されない事はたまにあるようです」とありますが、どこをどのようにスペースを入れればよいのでしょうか？

yotaka(09年08月10日 19:59:08)

/skins/hnmSale003/[ブログの短縮名]/design.css について、
#atama{background:url(img/kanban.jpg)■no-repeat■-10px■-140px;}
■のところに半角スペースが入っている事を確認してください。
編集する時に、ここの半角スペースを誤って削除事が多いようです。

もし、大丈夫であれば、下記の通り書き直してみて、表示されるかどうか確認してくてください。
#atama{background:url(img/kanban.jpg);}

それでも、表示されないようであれば、
/skins/hnmSale003/[ブログの短縮名]/img/ にkanban.jpg があるのかを確認してください。

hanayan(09年08月11日 08:33:50)

有難うございます。上記のようにしましたら反映されました。もうひとつすみませんが、CSSをnotepadで開くと日本語が文字化けしてしまいます。文字化けしないようにするにはどうすればいいでしょうか？

yotaka(09年08月12日 07:15:23)

うまく表示できて何よりです。
この時点で配布しているファイルはEUCなので、EUCを指定して開く事が出来れば文字化けを防ぐ事が出来ます。
http://[ドメイン]/skins/hnmSale003/[ブログの短縮名]/design.css
と、指定すると、日本語で表示されると思いますので、全てをコピーし、
design.cssにペーストすれば文字化けせずにすむと思います。
※作業するときはバックアップを忘れないでください。
もし日本語表示されないときは、エンコードをeucに指定してください。

hanayan(09年08月12日 18:48:27)

たびたび有難うございます。
kanbanを貼り付けて反映されたのですが、ホームからカテゴリーなどに飛んだときkanbanはやはり縮むのでしょうか。
固定サイズにすることは可能なんでしょうか？

はなまるスキン「看板の背景画像を変更する」