原因は、以下のようなものが考えられます。
ブログの表示が崩れた場合は、主に下記のような原因が考えられます。
・決められたサイズよりも大きな画像や表がある
・おかしなHTMLタグが設定されている
・ブラウザの設定を変更した
・段組を変更した
・ブログの横幅を変更した(ワイド ⇔ 標準)
・ヘッダーメニューに制限数以上のメニューを追加した
(縦幅の大きいデザインのヘッダーメニューは、入れることができるメニュー数に、6〜7つまでという制限があります)
可能性が高いのは、1番です。
本システムで作成するブログは、横幅のサイズが決まっています。
決められたサイズよりも大きな画像や表を挿入した場合、表示がうまくいかずに、サイドバーが下にずれるなどの表示崩れが起こります。
対処方法
表示崩れに気づく直前に、画像や表を挿入したという場合は、それが原因となっている可能性が高いですから、サイズの見直しを行ってください。原因がよくわからないという場合は、下記のヒントをご参考にしていただき、原因を探してみてください。よくわからない場合や解決できない場合は、恐れ入りますが、お問い合わせください。
▼原因がよくわからない場合
【1】 表示崩れの原因を探すためのヒント
▼大きい画像や表を入れた場合
【2】 画像のサイズを変更する方法
【3】 表のサイズを変更する方法
▼段組やブログの横幅を変更した場合
【4】 段組を変更後、崩れた
【5】 ブログの横幅を変更したら崩れた(ワイド ⇔ 標準)
▼ブラウザ(InternetExplorerなど)の設定を変更した場合
【6】 ブラウザの設定を変更したら崩れた
【1】表示崩れの原因を探すためのヒント
全てのページで、同様の表示崩れが発生している場合
どのページにも共通で表示されている、ヘッダーエリア、サイドバーエリア、フッターエリアを確認しましょう。
大きな画像や表が挿入されていないでしょうか? それらしき画像や表がある場合は、サイズを確認してみましょう。
例えば、「ヘッダーメニュー」のメニュー数が、制限数より多い場合は、表示が崩れます。ヘッダーメニューに入れたメニュー数を確認してみましょう。
ブログの表示が崩れた
特定のページだけ、表示が崩れている場合
特定のページだけ崩れているという場合は、そのページにしか表示されない部分である、メインエリアを確認しましょう。
大きな画像や表が挿入されていないでしょうか? それらしき画像や表がある場合は、サイズを確認してみましょう。
【2】画像のサイズを変更する方法
ブログに画像を入れる前に、画像ファイルのサイズを小さくしておきます。その後に、ブログに挿入しなおしてください。
1.あらかじめ画像ファイルを縮小しておきます。
操作マニュアル:画像を縮小する
2.大きすぎた画像は、ブログから削除します。
操作マニュアル:画像を削除する
3.1で準備した画像を、ブログに追加します。
【3】表のサイズを変更する方法
下記マニュアルの操作方法で、変更することができます。
操作マニュアル:表全体の横幅を変更する
【4】 段組を変更したら崩れた場合
以下の手順で、レイアウト変更画面で、保存と再構築を実行してください。
1.「デザイン管理」-「レイアウト変更」を開きます。
【5】 ブログの横幅を変更したら崩れた場合(ワイド ⇔ 標準)
ワイドにした場合、崩れているように見えても、デザインの仕様の場合があります。
詳細は、当てはまるパターンの対処方法をご確認ください。
パターン1:ヘッダー画像のサイズが合わない
ヘッダー画像のサイズが合わないのは、ブログ全体の横幅を標準からワイドへ(またはその逆へ)変更した際に、ヘッダー画像がブログの横幅サイズと異なるためです。
以下ではヘッダー画像がお試し型の手順をご案内します。
ヘッダー画像が完成型の場合、画像加工用ソフトでヘッダー画像の横幅を変更してください。
1.「デザイン管理」−「デザイン変更(トップページ)」をクリックします。
→「デザイン変更(トップページ)」画面が表示されます。
2.詳細設定で、「ヘッダー背景」の「ヘッダー背景を選択」をクリックします。
→「ヘッダー画像一覧」画面が前面に開きます。
3.表示されたヘッダー背景選択画面から、該当するヘッダー画像の下にある「小」「中」「大」のいずれかお好みをクリックし、「決定」ボタンをクリックします。
→「ヘッダー画像一覧」画面が閉じます。
4.最下部の「デザインの設定を保存する」ボタンをクリックします。
→変更内容がブログに反映されます。
表示崩れがなおっているかどうか、「サイトの確認」で確認してください。
サブページも崩れている場合は、「デザイン変更(サブページ)」を開き、同様に崩れを修正してください。
できあがりを確認する(「サイトの確認」)
パターン2:ヘッダーメニューのサイズが合わない
段組変更後に、「再構築」を実行していない場合にヘッダーメニューのサイズが合わなくなる場合があります。
以下の手順で再構築を実行してください。
1.再構築を行います。「ブログの再構築」タブをクリックします。
2.「再構築を実行する」ボタンをクリックし、ブログ管理画面の情報と実際のブログの情報を同期します。
表示崩れがなおっているかどうか、「サイトの確認」で確認してください。
サブページも崩れている場合は、「デザイン変更(サブページ)」を開き、同様に崩れを修正してください。
できあがりを確認する(「サイトの確認」)