ブログ背景画像のずれを直してみた

遅ればせながらあけましておめでとうございます。
今年もよろしくお願い致します。

新年1発目は素人が頑張ってブログテンプレートをいじるところから。

スポンサードリンク

現在使用しているブログテンプレートは、
フリーのブログテンプレートを公開してくださっている
ブログテンプレート.net様からお借りしたものに少し手を加えたものです。

しかし今までちょっと欠陥を抱えていたのです。

十分なウィンドウ幅があればきちんと表示されるのですが、
ウィンドウ幅を狭めると…



背景画像がずれてしまっていたのです。

どうやら

• bodyの背景画像（青い外枠）の表示位置が「ウィンドウの中央」になっている
• containerの背景画像（ブログタイトルの背景の蝶やら花やらの画像）の表示位置が
  「文字が表示される領域の左端」になっている

という設定で、文字が表示される領域の中央とウィンドウの中央とが一致するときに背景画像がぴったり合うように調整されているようです。
そのため、文字が表示される領域がウィンドウの外にまではみ出してしまうと、文字が表示される領域の中央がウィンドウ中央からずれてしまい、背景画像がずれてしまっていたようです。

そこで、CSS（カスケード・スタイル・シート）をいじりました。
bodyの背景画像の設定をいじります。

/*通常のスタイル*/ body { margin: 0 auto; background: url(http://www.blog-text.jp/style_library/style_catcher/142-blue/body_back.gif) repeat-y center top; font-family: "ＭＳ Ｐゴシック", MS PGothic, Osaka, "ヒラギノ角ゴ Pro W3"; font-size: 12px; font-weight: normal; color: #000; line-height: 1; text-align: center; vertical-align: middle; } /*ウィンドウ幅が1070px以下の場合に適用するスタイル*/ @media screen and (max-width:1070px) { body { margin: 0 auto; background: url(http://www.blog-text.jp/style_library/style_catcher/142-blue/body_back.gif) repeat-y -1975px 0px; font-family: "ＭＳ Ｐゴシック", MS PGothic, Osaka, "ヒラギノ角ゴ Pro W3"; font-size: 12px; font-weight: normal; color: #000; line-height: 1; text-align: center; vertical-align: middle; } }

以上のように記述して、
通常時のスタイルはいままで通り背景画像を「ウィンドウ中央」に、
ウィンドウ幅が1070pxを下回る場合にのみ背景画像を「ウィンドウ左端から-1975pxのところ」に表示するよう指示を書きました。

きちんと表示されるかどうかはウィンドウ幅を狭めてみてお確かめあれ。
少なくともInternetExplorer、および、GoogleChromeではきちんと表示されることを確認しています。

この-1975pxという数字は画像をダウンロードして画像処理ソフトでピクセル数を数えて算出したものですので、利用する画像によってどれくらいの位置がジャストフィットかは各自お調べください。


今回は調べてみて表示領域の大きさに合わせてスタイルを変更するという記述が可能なことを初めて知りました。

いろいろ調べながらテンプレートのHTMLやCSSを改良していくのもなかなかおもしろいですね。

興味ある方はGoogle先生に教えを請いながらテンプレート編集にトライしてみることをおすすめします。