アメブロスキンのカスタマイズ方法《2》 | のりちゃんのオモチャ箱

のりちゃんのオモチャ箱

*笑う門には福来る*

ポチッとしてもらえると幸せな気分になります♪ヾ(≧ ∇ ≦ )〃
にほんブログ村 イラストブログへにほんブログ村 イラストブログ キャラクターデザインへにほんブログ村 イラストブログ マウス絵へにほんブログ村 イラストブログ オリジナルイラストへ

ピグとものgerogeroさんからこのようなご質問を頂きました♪

『普通みなさん、800pxくらいの幅の絵を使ってるから違和感なく
 表示されるんですが、Topに配置する絵が600pxくらいの幅の
 jpgの場合に、それをセンタリングで配置ってどうするかわかります?』
 とのことでした。

確かに、最初に記載されたままのCSSを使用してサイズが小さい
トップ画像を挿入すると、下の画像のように繰り返し
表示されちゃうんですよね!

ちなみに、この場合のトップ画像の大きさは縦400pxで
横が600pxのものです♪
てんちゃんのオモチャ箱-2009.7.6-3

これは、正直カッコ良くないですよね!
私も、以前悩んだことがあります。

で、これを解消するためにどうするかと言うと…。

まず、小さいサイズの画像を『スキンのカスタマイズ』
のページにて追加しておいてください。

次に、『スキンCSSの編集』のページを開きます。
すると、ズラズラズラ~!っと文字が並んでますが
その1番下までスクロールしていってください。

そうすると、ホントに一番最後の行に
     #header {
     background-repeat:repeat-x;
     }

という記載があると思います。

その部分は丸々消してしまって、以下のタグを
挿入してください♪
     #header {
     background-repeat:no-repeat;
     background-position:center;}

そうすると、以下のように繰り返し画像が
表示されなくなり、真ん中に配置されます。
てんちゃんのオモチャ箱-2009.7.6-4

注 * 今回は画像の配置の仕方だけの説明なので
   タイトル文字の位置がずれています。
   文字の配置については、また後日改めてハート

どうでしょう?gerogeroさんスッキリしましたか?
お役に立つことができたら嬉しいですキャー