研Q135.ブログのサイドバーが突然消えたらどうすればいいの? - ネットビジネス研Q室(新館)

このエントリーをはてなブックマークに追加

研Q135.ブログのサイドバーが突然消えたらどうすればいいの?

サイドバーが消えてしまっても慌てることはありません。

東京都庁と紅葉 (Autumn Leaves and Tokyo Metropolitan Government) - 無料写真検索fotoq
fotoq.net
photo by cyber0515

希にですが、ブログのサイドバーが消えてしまうことがあります。
僕が管理しているブログでも、右サイドバーが消えてしまったこともあります。
そんなときに僕はどうやってなおしたかということを書いてみたいと思います。

サイドバーが消えているというのは、こんな感じです。

ブログのサイドバーが消えた
画像を加工して右サイドバーを消してみました。

僕が経験した範囲では、サイドバーがホントに消えたのではなく、
ほとんどはメインカラム(記事本文が書いてある部分)の下からサイドバーが表示されているという状況でした。

つまりサイドバーが消えてしまったのではなくて、サイドバーが下に落っこちてしまった「カラム落ち」という状況だったのであります。

今まではちゃんと表示されていたのに、記事本文を手直ししたあとでカラム落ちが発生したということがほとんどでした。

場合によっては、サイドバーのカラム落ちではなく、
サイトバーの内容を手直ししたあとにメインカラムがカラム落ちしてしまったこともありました。

つまり、手直ししたときに間違えると、記事本文を手直ししたにもかかわらずサイドバーがカラム落ちすることもあるのです。

サイドバーの上のほうにはどの記事を表示していても見てほしいことが書いてあるので、サイドバーが見えないと困ります。

メインカラムがカラム落ちしたらもっと困ります。

ああ、カラム落ちね。とすぐにわかってスクロールしてカラム落ちした部分を見てくれる人なんてほとんどいらっしゃらないからです。


僕の今までの経験では手直ししたときの間違いを直すことによって、カラム落ちから回復することができました。

今までちゃんと表示されていたのにカラム落ちしてしまった。

こんなときは
あらら、やっちまったか~ とタバコでも一服して落ち着いてから回復に取りかかりましょう。

リキッドデザインのテンプレートだと、とか
CSSにfloatを使っている場合は、とか
いろいろややこしい解説もあるのですが、今まで正常に表示されていたサイドバーがカラム落ちしてしまったのです。

この記事ではそんなときにどうやって回復したのか。ということだけに問題を絞ります。

カラム落ちの原因を見つけ出す。

もちろん、今手直しした記事の中にカラム落ちの原因になった間違いがあるに決まっています。

いつの間にかカラム落ちしていたことに気がついて、どこを手直ししたときに間違いがあったかわからないときは、

カラム落ちに気がついてから「次のページ」や「前のページ」を見てみます。

そこでカラム落ちしていなかったらさっきカラム落ちしていたときに表示されていたページの中に間違いがあります。

さらに記事を単独で表示して「次の記事」や「前の記事」を表示すれば、どの記事に間違いがあるのかがもっと詳しくわかります。


カラム落ちの原因

僕の経験ではカラム落ちの原因は記事の中で</div>などの終了タグをつけ忘れていたことがほとんどでした。
終了タグとは
HTMLタグは、
開始タグと終了タグで対象をはさむことが基本ルールです。

(改行タグ<br />は単独で使用できる例外のタグです。)

たとえば<div>タグだったら。

<div>この部分をブロック化する。</div>と書きます。

この終了タグ</div>つけ忘れてしまったことが、カラム落ちの原因であることが多いです。

終了の</div>をつけ忘れるだけでなくて、</div>が一個多くてカラム落ちが発生したこともありました。
その他の終了タグの付け忘れ。
<font>~</font>

文字の色を指定したりサイズを指定する<font>タグの終了タグをつけ忘れると開始タグ以降の部分(サイドバー内も)文字色が指定色になったりサイズが変わったりします。

<strong>~</strong>

太字を指定する<strong>タグの終了タグ</strong>をつけ忘れると
<strong>以降が(サイドバー内も)太字になってしまいます。


<a href="○○○○">~</a>

リンクを指定する<a href="○○○○">タグの終了タグ</a>をつけ忘れると
<a href="○○○○">以降がすべて(サイドバー内も)リンク(のように)なってしまいます。

これらの例は見た目ですぐにわかるので修正しやすいですが、
問題なのは</div>タグの場合です。

HTMLタグの間違いの見つけ方。

HTML文法チェッカーのような便利なソフトやサイトをご存知の方は記事のHTMLソースを文法チェックすればいいのですが、僕はそんな便利なソフトをもっていないので、ひたすらHTMLソースからタグの閉じ忘れがないかどうか探し出します。

どうしても閉じ忘れが見つからないときは、悪あがきで記事の最後に</div>をつけてみてプレビューでカラム落ちが改善されないか見てみます。
(メクラ打ちで</div>をつける方法は、あまり成功したことはありません。)


それでもカラム落ちが解消されない場合は。

あきらめて問題がある記事を書き直します。

書き直すといっても過去記事の場合はその記事がGoogleにインデックスされたりどこかのサイトからリンクされた可能性があるので、
絶対に「記事を削除」してはいけません。ほとんどのブログで記事のURLはランダムな番号が割り振られるので。

記事の【内容】をすべて削除して、記事の下書きから新しい(けど同じ内容の)記事をもう一度書きます。

記事の内容をすべて削除して、たとえば「工事中」などに書き換えて保存してからまた同じURLを見てみて正常に「工事中」が表示されれば万全ですね。

そこで記事の下書きを元にしてもうブログ記事エディタで記事をもう一度書き起こします。

そうすれば同じ記事URLで同じ内容の記事が再現されます。

ブログ記事の下書きを行っていない方はカラム落ちしているけど表示はされている記事の内容を全選択してテキストでコピー&;ペーストしておくか、全画面キャプチャーしておくか表示したウィンドウを閉じないなどの方法で記事になったものを見ながら再現することができます。

てか、それよりも記事をテキストエディタで下書きする方法をぜひおすすめします。

一見二度手間のように思われるかもしれませんが、使い慣れたテキストエディターで下書きを書くことはスピーディーで時間が短縮できるし、考えながら記事下書きを書く⇒ブログの記事エディターでブログ記事にする⇒プレビューで見直しをする⇒公開してから見直しをする。3回の見直しを強制的にすることになるので記事の書き間違いがほとんどなくなります。
(ブログの記事にするときに書き間違いや表現を変えたほうがいい箇所に1ヶ所以上気づくことは必ずあります。)

ブログの下書は、ブログの間違いを減らしてクォリティーを上げ、所要時間を短縮するためのシステム的な方策なのです。


ということで、カラム落ちした状態を見られてしまう(しまった)ことは潔くあきらめて、今後は正常に表示されるように努めることがいちばんいいと思うのであります。

直しておかなくてもなんとかなるのではありますが、「何このブログ?」と思われて信用を失うことになるので。


 クリエイティブ・コモンズ 表示 - 継承 2.1
表示 - 継承 2.1
初めて当ブログに訪れた方や何度か当ブログにお越しいただいているみなさま。
もしブログの内容を気に入って頂けましたらRSSリーダーの登録よろしくお願いします。
Subscribe with livedoor Reader My Yahoo!に追加 
ツイッター でも、更新案内を流しています。                          
RSSリーダーとは?⇒ RSSってなんなの
  リンク切れ、動画削除などを発見されましたら、コメントで教えていただけると非常にありがたいです。
▲ネットビジネス研Q室のトップページに戻る▲  ●ネットビジネス研Q室の記事一覧●
記事末尾200posted by +M Inamura (水村亜里)
関連記事
このエントリーをはてなブックマークに追加
コメント
非公開コメント

ブログでつながり隊のバナー(横長)

トラックバック

http://aminamura.blog.fc2.com/tb.php/135-1b3263e1

QLOOKアクセス解析
Related Posts Plugin for WordPress, Blogger...