ブログの表示が崩れた

ブログの表示が崩れた

原因は、以下のようなものが考えられます。

ブログの表示が崩れた場合は、主に下記のような原因が考えられます。
 ・決められたサイズよりも大きな画像や表がある
 ・おかしな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.「再構築を実行する」ボタンをクリックし、ブログ管理画面の情報と実際のブログの情報を同期します。

表示崩れがなおっているかどうか、「サイトの確認」で確認してください。
サブページも崩れている場合は、「デザイン変更(サブページ)」を開き、同様に崩れを修正してください。

できあがりを確認する(「サイトの確認」)