助太刀忍者(質問掲示板)

助太刀忍者

No.48686    デザインが崩れます。
プレビューではきちんと表示されるのですが、ブログ自体を確認するとテンプレートが反映されず、崩れて表示されます。キャッシュクリアしてF5で更新しても反映されないのですが原因が全くわかりません。どなたか分かる方はいらっしゃいますか?
試した操作手順
・キャッシュクリア
・Ctrl+F5
投稿者:No Name Ninja 投稿時間:2011-06-04 14:38:51
投稿者 : No Name Ninja
投稿時間:2011-06-04 22:32:13
>崩れて表示されます。
とのことですが、どこの部分のことでしょうか?
ここの部分が、本来こうなっていて欲しいのに、今現在はこうなってしまっている、といったように具体的に提示下さい(テンプレをカスタムしている場合は特に)。

質問者と回答者ではPC環境が異なるかもしれませんし、カスタムしている場合に質問者さんの理想が元のテンプレの配置とは違っているかもしれないため、上記の情報が必要です。

推察になってしまいますが、
>崩れて表示されます。
というのは、「ENTRY NAVI」ボックスが、小さくなってしまっていることでしょうか?

そうであれば、これは、テンプレートをカスタムした結果です。
質問者さんは、テンプレをカスタムしていますよね?
カスタムした通りの表示になっているだけです。
※もしも、カスタムしていない、という場合は、そのように追記下さい。

今回、影響している部分は、

▼ タイトル・枠
#EntryBlock{
float:right;
}

の部分です。これは、元のテンプレにはない記述です。
フロートを指定する要素には、幅を指定しておく必要があります。今回指定がないので(EntryInnerBlock、EntryTitle、等、中にあるボックスにも指定がない)、EntryBlockボックス内に実際に存在しているもの(分かりやすく言うと「ENTRY NAVI」のテキスト文)の横幅に変わってしまっています。

今現在、1つも記事が投稿されていない状況ですので、まずは、1つでも良いので公開記事を投稿してみて下さい。これで、横幅のある内容(詳しく言うと投稿日時部分の横幅)が入るので、「質問者さんがプレビューで見たデザイン」になると思います。

但し、この状態ですと、記事タイトルの長さなどによって、ボックス幅が変動しますので注意を。変動幅は、投稿日時部分の横幅~外枠の横幅である1000px(カスタム前であれば800px)まで。

>プレビューではきちんと表示されるのですが、
というのは上記のことが理由だと思います。プレビューでは、記事が投稿されている状態のサンプルで表示されますので・・・。

これで、思い通りにならないのであれば、#EntryBlockに横幅指定をいれるか、float:right;を使わない方法で右寄せにして下さい。

※質問者さんがどういった意図でfloat:right;を指定したかが分からないので「絶対」とは言えませんが、これを削除することをおすすめします。勿論、修正方法はいろいろあるとは思いますが・・・。

※参考
http://www.tagindex.com/stylesheet/box/float.html
http://www.tagindex.com/html_tag/basic/block_inline.html

※「表示の崩れ」がもっと別の所だ、という場合は、またそのように追記下さい。
質問者からのコメント 2011-06-05 01:27:28
ありがとうございます、
#EntryBlock{
float:right;
}
を削除したら直りました。
投稿者 : No Name Ninja
投稿時間:2011-06-04 16:15:03
問題のブログURLを提示すればどなたか見てくださるかもしれませんが
それができないのであれば、ご自分で原因を特定することが必要になります。

プレビューでは問題がないということですので
プレビューでは表示されない部分に問題があるということになります。

どこかにタグの閉じ忘れがあるか
プレビューでは表示されないプラグイン、あるいは記事に
幅よりも大きなものが入っていてそのせいで崩れている可能性があります。

プレビューでは表示されないプラグインと全ての記事をいったん非公開にして
1つずつ公開してみて何が原因で表示が崩れるか確認してください。
質問者からのコメント 2011-06-04 17:44:07
urlです→「http://ayako6.blog.shinobi.jp/」
タグのとじ忘れなどを探してみようと思います;;