締切済み

ブログのデザインがずれる原因

2008/08/28 00:21

seesaaブログでブログを始めたのですが、右サイドメニュー（カテゴリーやカレンダー等がある場所）の配置がブログを更新してるメインPCで閲覧した場合と、そうではなく別PCで閲覧した場合とではずれて表示されてしまいます。具体的にはメインPCで見た場合はしっかりと右にメニューが表示されているのですが、別PCで閲覧するとブログ記事の下に回り込んでおり、妙に縦長で不恰好なブログに見えてしまいます。（ブラウザの大きさを変えても常に下に有り直りません）原因は分からないのですがメインPCはVistaで別PCはXPなのでその差なのかなと思いますが、何か他に思い当たる節があれば教えていただけないでしょうか？またその場合の対処方法もお願いいたします。訪問履歴を見てもXPの人が多いので、出来れば右にメニューが来るように直したいのですが...。

hatimituj
お礼率33% (3/9)

ブログ
回答数9
ありがとう数34

みんなの回答 （9）
専門家の回答

みんなの回答

Muller3
ベストアンサー率81% (800/979)

2008/09/04 23:38 回答No.9

これは記事部分のコンテンツHTMLですよね。これが原因ではないようです。IE6でカラム落ちしません。テンプレートのソースじゃなくて、ブログを表示させた時のソースがあった方が手っ取り早いのですが。個人情報がわからないようにHTMLなどから自分のアカウントを除いてUPすることはできますか。

質問者

お礼 2008/09/05 01:22

申し訳ありませんでした。コンテンツHTMLを初期状態にして大丈夫だったのでそれが原因なのかと... 色々な要素が絡み合っているのですね、理解していませんでした。＞個人情報がわからないようにHTMLなどから自分のアカウントを除いてUPすることはできますか。ブログのソースを見てもよく分からなかったので.... このまま長く質問が続くより #7で＞個人のURLを出していいQ&Aサイトやフォーラムで見てもらった方がいいかも。とおっしゃられていた通り、その方法で質問投稿したほうが良いと判断致しました。今まで長々と質問にお付き合いいただき有難うございました。親切丁寧に教えて頂いて本当に感謝しています。また機会があればよろしくお願い致します。ｍ(_　_)ｍ

Muller3
ベストアンサー率81% (800/979)

2008/09/04 19:05 回答No.8

＞コンテンツHTMLは#5でアップしたものです実はそれが見つからなかったので、見てないのです。消えたんでしょうか？

質問者

補足 2008/09/04 22:53

今見たところ消えていました...。もう一度アップ致しましたのでお手数ですがよろしくお願い致します。 00024672のテキストファイルです。

Muller3
ベストアンサー率81% (800/979)

2008/09/03 02:27 回答No.7

＞白いページのソースそれは、phpエラーの時とかによく見るやつですね…(^^; こういったブログサービスのテンプレートは時々ちゃんと変更が反映されない時があるので、システムの方で初期化に失敗してるんじゃないかなと思いつつ。＞cursor' プロパティの値をパース中にエラーが発生しました。それはこちらでも山ほど出ます…。そういえば、#2でxml宣言を消した時、改行も消しましたか？ DOCTYPE宣言の前に半角空白文字や改行一つあっても、IE6では後方互換モードになります。FirefoxやIE7と同じ標準準拠モードにするには、DOCTYPE宣言が一番上に、一番最初に来るようにしてください。（変更後は必ず、変更が反映されているかどうか、ブログを表示させてブラウザの「ソースを表示」から確認下さい）これでだめなら、こちらではエラーが再現できないので、申し訳ないですが限界です。個人のURLを出していいQ&Aサイトやフォーラムで見てもらった方がいいかも。

質問者

補足 2008/09/03 23:15

申し訳ありませんでした！昨日は何度やっても白いページしか出なかったのですが、今日再びやってみたら表示されました...本当にスミマセン。初期状態のコンテンツHTMLですと IE6でもカラム落ちはありませんでした！＾＾このまま初期状態のコンテンツHTMLを使おうかなぁとも思いましたが、出来ればカスタムした方を使いたい... もし原因の見当が付いていましたら教えて頂けないでしょうか？（コンテンツHTMLは#5でアップしたものです）長々と何度も質問して申し訳ありませんが、あと少しで直る様な気がするので.... よろしくお願い致しますm(_ _)m

Muller3
ベストアンサー率81% (800/979)

2008/09/02 16:28 回答No.6

初期状態でそんな状態になる＆広告を外しても直らないのであれば、もしかしたら記事部分に何かあるのかも。初期状態である私の方では、その現象は再現できないですし、コンテンツHTMLの初期状態に抜けがあることはちょっと考えられないですし。真っ白なページのソースを見てみたら、何か書かれていませんか。また、Firefoxで見ても同じ状態になりますか。 Firefoxにはエラーコンソールがあるので、それで見てみるとか（ツール-エラーコンソール）例えば記事部分に書いたタグ（HTML・javascriptなど）が終了してなかったり、記述がどこか抜けていたりしないでしょうか？タイトルタグと文字コードの位置も特に問題ないですしね…

質問者

補足 2008/09/02 21:55

ご回答有難うございます。コンテンツHTMLが初期状態ですと、やはりFirefoxでも白いページが表示されました。白いページのソースは <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML><HEAD> <META http-equiv=Content-Type content="text/html; charset=shift_jis"></HEAD> <BODY></BODY></HTML> とだけ書いてあり、エラーコンソールでチェックしてみるとエラーは出ないのですが、警告が多数あり 'cursor' プロパティの値をパース中にエラーが発生しました。不明なプロパティ 'zoom' が使用されています。 'filter' プロパティの値をパース中にエラーが発生しました。等いくつか表示されました。（重複ばかりでしたが、かなりの数が書いてありました）尚コンテンツHTMLを元に戻し、本来の自分でカスタマイズした状態のブログをFirefoxで見ると、カラム落ちはなく（IE6だけかも）エラーコンソールでは getElementById() に空文字列が渡されました。という警告のみでした。あとブログ記事中のHTMLタグの閉じ忘れは無いと思います。閉じ忘れたらすぐ分かるようなリンク、文字サイズ、文字色くらいしか使ってないですし...。原因不明のお蔵入りになりそうですが... 何か原因が分かりましたらよろしくお願い致します。

Muller3
ベストアンサー率81% (800/979)

2008/08/31 23:04 回答No.5

申し訳ありません。 #4の回答は間違いでしたので訂正します。（Seesaaブログでテストしていたのですが、私の方のHTML・CSSの適用方法に問題がありました＜左サイドバーの設定になっていた）改めて提示されたCSS・HTMLを右サイドバーで適用したところ、そのままのソースで、IE6でもカラム落ちは起こりませんでした。原因として、残るは提示されていない部分「コンテンツ」です。できればコンテンツのHTML部分のうち編集されているものを、バックアップをとった上で初期値に戻してみてはどうかと思います。編集してなければ「差分はありません」「現在:初期値」になっています。すべてが差分がない状態なら、お蔵入りですが… 【追記】テンプレートの変更はなかなか反映されないことがありますので、テンプレート変更後は必ず、「設定」-「ブログ設定」一番下にある「最新の情報に更新」を実行した上で確認された方がいいと思います。

質問者

補足 2008/09/01 01:12

ご回答と訂正有難うございます。コンテンツHTMLもテンプレートで編集しており、差分がありました。そこで教えて頂いた通りに初期状態のコンテンツHTMLに変えて表示してみると.... 不思議なことに真っ白なページで、文字や画像はもちろん本当に何もないページがIE7、IE6共に表示されました。どうしてなのか私には分からないのですが、原因はコンテンツHTMLということでいいのでしょうか...？一応この前のアップローダーにコンテンツHTMLもアップしておきました。（00024157ファイルでパスは前回と同じです）後、今更なんですが右メニューには Amazonの画像入りアフェリ一つと文章のみのgoogleアドセンスを貼ってあります。 seesaaブログのコンテンツ編集ページにある「自由形式」にタグを書いて追加したものです。もしかして何か関係があるのかなと思い追記させて頂きました。（もちろん２つの広告を外してIE6で表示させて見ましたが、直りませんでした）諦めると言っておきながらまた質問してしまいました... お手数おかけしてスミマセンm( _ _ )m

Muller3
ベストアンサー率81% (800/979)

2008/08/30 22:59 回答No.4

zipの方の拡張子がいらなかったんですね（私はMACなので、.exeのアプリケーションは使えないのです。MACでは拡張子は単に消すだけなのでアプリを使う必要もないのですが）見てみたのですが、CSSの、以下のようになっている部分 #links-left { } #links { font-weight:normal; float:left; width:230px; padding-top:30px; padding-bottom:10px; margin: 0px 0px 0px 25px; text-align:left; font-size:12px; text-align:center; } これを以下のように直し、 #links-left { font-weight:normal; float:left; width:230px; padding-top:30px; padding-bottom:10px; margin: 0px 0px 0px 25px; text-align:left; font-size:12px; text-align:center; } http://ipinfo.info/netrenderer/index.php こちらのサイトで確認したところ、カラム落ちはなくなるようなのですが。 #というか前者の記述だと、どのブラウザで見てもカラム落ちすると思うんですが…(^^;

質問者

お礼 2008/08/31 00:13

ご回答どうも有難うございました。修正したにも関わらず、何故か私が見るとIE7でも若干表示がおかしくなる所もあり、 IE6だと依然ズレたままでした。ここまで教えて頂いて直らなかったのなら諦めもつきますので、この辺りで質問を終えたいと思います。この度は大変お手数おかけしました。m(__)m

Muller3
ベストアンサー率81% (800/979)

2008/08/30 17:00 回答No.3

私の環境ではファイルを解凍できませんでしたので、以下推測でいきます。 IE7ではOKなのに、IE6互換・標準モードでだめだということなので。 CSSのどこかにfloat:left;　（またはright）が使われていませんか。それが使われているのは、サイドメニューとかメインのような大きなボックス要素ではないでしょうか。そのボックスにはmarginが指定されていないでしょうか。 IE6ではfloat:leftが指定されたボックス要素のmarginが2倍になるバグがあります。marginが2倍になることで、指定された幅に入りきらず、カラム落ちすることがあります。この場合は、もしできるなら、marginではなくpaddingを使って指定するか、それができなければ、float:leftが指定されているボックスに display: inline; を指定してみて下さい。この指定によってIE7でのレイアウトが崩れる場合は、 _display: inline; とでもしてみて下さい（アンダーバーはIE6だけに適用されるハックです。本当は使いたくない方法ですが…）

質問者

お礼 2008/08/30 21:33

説明不足で申し訳ありませんでした。 ttp://applis.servehttp.com/faq.htmにある zip拡張子を削除するツールを使わないとファイルが開かない様です。（適当に選んだアップローダーだったのでスミマセン） float:left;が使われている場所はいくつか見つけました。スタイルシートの知識が無いので、調べながらも色々paddingに変えたりdisplay: inline;を入れたりしてみましたが、直りませんでした...。自分の記述が間違っているのかもしれませんが....。今一度CSSとHTMLファイルを解凍して頂いて、ご指南頂けないでしょうか？質問が長引いてしまってもご迷惑だと思うので、次でダメなら諦めますので...。

質問者

補足 2008/08/30 21:39

間違ってお礼の欄に書いてしまいました。追加質問は補足内容に書くのでしたね...。お礼の欄に質問が書いてありますのでよろしくお願いします。

Muller3
ベストアンサー率81% (800/979)

2008/08/29 20:24 回答No.2

＞早速IE７にバージョンアップしてみたところ、右メニューが正常に表示されることが出来ました。 HTML先頭に、xml宣言が書かれていますか？ <?xml version="1.0" encoding="Shift_JIS"?> という記述です。もし書かれていれば、削除してみてください。直りませんか？もしこれで直るのであれば、取ってしまうのが一番簡単です（ただし、xml宣言を省略可能なのは文字コードUTF-8の場合のみで、Shift_JISであるseesaaブログでは、本来は付けておくべきではあります。）もし本気で直したいということでしたら、・おおまかなHTML構成・CSSの記述を、個人情報に当たる部分を伏せて、提示してみて下さい。

質問者

補足 2008/08/30 01:23

ご回答ありがとうございます。先頭に<?xml version="1.0" encoding="Shift_JIS"?> という記述はありました。しかし、削除しても直りませんでした...。あまりこういう事には詳しくないので、個人情報に当たる部分というのがよく分からないのですが、 URLの部分等は伏せておきました。文字数の関係で記述出来なかったのでこちらのアップローダーの ttp://applis.servehttp.com/ 00023835.tex（CSS)と00023846.tex（HTML）というファイルがそうです。パスはgoooに設定してます。手が空いた時で構いませんので、誠に勝手ながらよろしくお願い致します。

Muller3
ベストアンサー率81% (800/979)

2008/08/28 00:58 回答No.1

PCではなくブラウザではないかと思います。もしや、どちらかのブラウザがIE6なのではないでしょうか？ IE6にはCSSのバグがたくさんあるので有名です。（「IE6　CSSバグ」で検索してみるといいです）どのバグがひっかかっているかはHTMLやCSSのソースを見ないとわかりませんし（なんとなく想像するところはありますが…）、どのブラウザで正常で、どのブラウザでだめなのかによっても違います。もしどこかのテンプレートを使われているなら、そのテンプレートの名前とか配布先URLを提示された方が、具体的な回答が得られるかと思います。

質問者

補足 2008/08/28 18:39

ご回答ありがとうございます。確認してみたところ別PCはIE６でした。早速IE７にバージョンアップしてみたところ、右メニューが正常に表示されることが出来ました。 CSSのテンプレートは拾い物ではあるのですが.... 探してはみたんですが配布先URL等を忘れてしまいました。私のブログ訪問者の方はIE６の方が結構いるので、せめてIE６とIE７で正しく表示される様にしたいのですが、もし可能であればこちらにCSSソースをコピーして書き込んでみますので、助言を頂けないでしょうか？