body背景repeat-x時の高さ問題 ツールバーに回り込むbody背景を回避する

ヘッダーと背景を一体化して、奥行きのあるレイアウトに試みる。

1　ヘッダー画像と背景画像を同じ高さで制作。

2　body背景をｘ軸連続で配置。

　　--------------------------------------

　　　body {
　　　 background: url(画像URL) repeat-x top;
　　　}

　　--------------------------------------

　　　　↓↓↓　結果　↓↓↓

失敗(ノ゜Д゜)ノ

なぜか、ヘッダーと背景の高さがずれる。

（上記画像黄色の部分）

そして勝手に解釈。

「アメブロさんのプログラムの関係で

登録画像を背景に指定すると小さくなるんだ～」

…時間ある時に、背景画像だけ大きめにつくり直して検証してみよ…

と、あっさりレイアウト変更。

が、

この問題をきちんとした理由で

紹介してくださっている方がいらっしゃいました。

　↓↓↓　以下のようです　↓↓↓

■問題：

背景画像をx軸連続で配置したとき、ヘッダーと高さが合わない

●理由：

背景画像がアメブロのツールバーに回り込んでいるから。

そのため、アメブロのツールバー分、背景画像の天地が短くみえる。

（ツールバーとは上部に白地でアメーバロゴ・検索がある部分）

●回避：（※アメブロのツールバーの高さは変わります）

アメブロのツールバーの高さを固定しちゃう（CSS未検証）

◎スマートでない、回避法。

　→アメブロのツールバーの高さを考慮して

　　 body画像の開始位地を絶対値で指定。

　　--------------------------------------

　　　body{background:url(/) x-repeat 0 21px;}

　　--------------------------------------

現在ツールバーの高さは22px

以前は21px。

アメブロのツールバーの高さは変わるみたいなので、

変動するたびに、開始位地を変えなくてはいけない。

おまけ◎スマートでない、回避法その2。（←自己流なおバカ回答です。）

　→アメブロのツールバーの高さを考慮して背景画像の高さを

　　あらかじめツールバー分、余分につくる。

　　ツールバーの高さが変わるたびに、背景画像をつくり直し。笑

----------------------------------------------------------

この、記事を紹介してくださったのは、

Ameblo Customize のハチさんです。

アメブロをカスタマイズするときに、とても参考にさせていただいています。

ありがとうございます。

現在は、ピンクでとてもかわいいサイトです。Winter♪

「メッセージボード」について

アメブロの中にある、

「メッセージボード」って何のこと？

→サイト全体の説明文的な役割。

　ブログについてのコメントとかを書く場所。

---------------------------------------

■設定場所：

ブログ＞アメブロを書く＞メッセージボード

　※HTML表記は可能。

　（最大文字入力数全角・半角ともに10000文字）

　今回はcssでカスタマイズしたので、

　どの程度HTMLでデザインを出来るかは不明。

---------------------------------------

■ブログ表示場所：

トップページのみに、ヘッダーの下（記事の上）に

表示されます。

---------------------------------------

■css：

メッセージボードは#messageのid名でBOXがあります。

その中にクラス指定あり。（.contents）

#messageは#mainの中の一番上に配置されています。

よって通常は、サイドバーにはかかりません。

「ブックマーク」登録方法

サイドバーにある、

「ブックマーク」に登録する方法。

---------------------------------------------

ブログ＞サイドバーの設定＞ブックマークの管理

---------------------------------------------

ここで、登録・管理が可能。

※登録サイト名は32文字以内。

※リンクは自動的に"Blank"（別winで開く）になる。