スポンサーサイト

  • --/--/--(--) --:--:--

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

おもしろいと思ったら、ぽちっと!
にほんブログ村 ゲームブログ テイルズウィーバーへ
にほんブログ村

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

  • 2016/01/08(金) 16:57:55

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

新年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 Pゴシック", 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 Pゴシック", 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先生に教えを請いながらテンプレート編集にトライしてみることをおすすめします。

おもしろいと思ったら、ぽちっと!
にほんブログ村 ゲームブログ テイルズウィーバーへ
にほんブログ村

新しい日記
遠く離れていても、君のところへ届けよう
|HOME|古い日記
欲しかったShowEffectが出た!

この記事に対するトラックバック

この記事のトラックバックURL

この記事にトラックバックする(FC2ブログユーザー)

この記事に対するコメント

※コメント内の外部サイトへのリンクにマウスを1秒間乗せると、aguse.jpによる調査結果が表示されます。この機能についてはこちらの記事を参照

コメント投稿

管理者にだけ表示を許可する
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。