カラム落ち(ブログのレイアウト崩れ)の対処法

風花初芽の購入者さんから、ブログのスマホ表示がおかしいのですがなぜでしょうか、というご質問をいただきました。

 

風花初芽とは?⇒風花初芽のレビュー~「プチリッチ」への扉の鍵がここにある
その方のブログを見てみたら、私のスマホでは表示はごく普通でした。しかしPCのほうでカラム落ちしているのを発見。

 

こちらを指摘したら、「いつのまにかそうなっていた」とのこと。カラム落ちを放置している人が多いのですが、読者にとって非常に使いにくいブログになりますので、気づいたらすぐに直してください。

 

カラム落ちの原因は1つではありませんが、考えられる理由をいくつか書きます。

 

カラム落ちとは?

 

そもそもカラム落ちをご存知ない方がいます。カラム落ちとは、サイドバーが下に落ちるレイアウトの崩れです。

 

風花塾で講師をしていたとき、ある塾生に、カラム落ちを指摘したら「これが普通なんだと思っていました」という返事が返ってきました。普通じゃありません。

 

カラムは、テンプレートの列です。英語の column のこと。新聞や雑誌などの縦の欄のことです。

 

3カラムのテンプレートは左サイドバー、真ん中の記事が入るところ、右サイドバーがあります。2カラムのテンプレートは右か左にサイドバーがあって、記事が入るところがあります。右に2つサイドバーがある変則デザインもありますね。

 

カラム落ちはテンプレートのサイドバーが下に落ちてしまう状態です。3カラムのテンプレートを使っている場合、どちらか片方か両方落ちる可能性があります。

 

一見、ワンカラムのテンプレートに見えますが、下のほうにスクロールしていくと、サイドバーが見えます。ブログのページすべてがカラム落ちする時もあれば、個別記事の1ページだけカラム落ちする時もあります。

 

プラグイン(FC2で言うと、カテゴリ、とか、コメントというかたまりです)が、意図せずして、記事の下に来ることもあります。

 

ブログの見え方はブラウザによって違い、最新の Google Chrome では普通に見えるのに、古い Internet Explorerだと表示が崩れていることもあります。

 

カラム落ちする原因

 

カラム落ちする考えられる原因にはこんなものがあります。

 

●記事に貼った画像や動画がはみ出ている。
横幅が500ピクセルのところに、幅、800ぐらいの大きな画像を貼ると、テンプレートの構造によってはサイドバーが落ちます。

 

●そのテンプレートと相性の悪いプラグインを使ってしまった。

 

●たまたまサーバーエラーだった。

 

●変なところに変なタグを入れている。タグを閉じ忘れている。たいてい記事下。

 

この他にもあると思いますが、ブログを更新していて突然カラム落ちする理由は、だいだいこんなところです。原因を見つける1番いい方法は、カラム落ちした直前に何をしていたか、思い出すことです。

 

記事を更新したなら、その記事を書いたときにやっていたことが関係ある可能性が高いです。

 

新しくプラグインを入れたなら、そのプラグインのせいかもしれません。アドセンスの広告を入れたなら、ソース(広告の文字列)のコピペがきっちりできなかったのかもしれません。

 

私の場合1番多いのは、記事の中にディヴィジョンタグ(div)を入れて閉じ忘れているときです。またディヴィジョンタグを閉じるタグを1つよけいに入れていると変になります。

 

このあたりをチェックしてみてください。

 

ちなみに、タグとはHTMLのことです。テンプレートに書いてある文字がHTMLです。

 

プラグインその他のソース(文字列)をコピペ(コピー&ペースト)する場合に、タグのとじ忘れを防ぐ方法は、コピーする部分を確実に選択することです。

 

マウスのドラッグで選択するのではなく、右クリックから選択するか、コントロールキー+A のショートカットキーを使って全選択してください。

 

fudeline

スマホ表示の不具合の解消法について聞かれたこともありますが、私はテンプレートの作者ではないのでどうすることもできません。

 

表示の不具合に遭遇したら、私ならテンプレートの作者に問い合わせをします。実際、以前 WordPressで不具合があったとき、サポートに聞いて解決法を教えてもらいました。

 

FC2ならユーザーフォーラムを参照するという手もあります⇒「テンプレート・プラグイン」コミュニティトップ – FC2ブログ ユーザーフォーラム