フジブロっ!

はてなブログのカスタマイズに役立つ記事やツール、デザインテーマの制作を行なっている、カスタマイズ専門ブログ

ブログが消えた!?落ち着いて原因と対処法を確認する

どうも!フジグチです!

 ここ最近立て続けに「ブログが消えた」「一部しか表示されない」「一部が表示されない」といった悩みを聞きました。

私の読者やフォロワーの数は100人程ですがその中で3、4件もそういう事例があるということは、はてなブログ全体でも同じように困っている方がいるのではないかと思い、なぜそういうことが起こるのか原因と症状をまとめてみました。

ブログが消えた!?諦めずに原因と対処法を確認する

ブログが表示されなくなる原因

ブログが表示されなくなる原因。ほとんどの場合は終了タグの入れ忘れです。

終了タグとは開始タグの最初にスラッシュ(/)を付けたタグのことです。

例:<style> ~ </style> ←赤字部分

カスタマイズやアドセンスの申請、広告のコードなど<style>や<script>というタグを使用することがあると思います。

書き方は<style type="text/css">や<script type="text/javascript">などと記述する場合もありますが、これらは全てHTMLの中にCSSやJavaScriptを記述するために使用します。

<style>と</style>に挟まれた部分は「ここはCSSだよ」という意味です。
<script>と</script>に挟まれていれば、「ここはスクリプトだよ」という意味になります。

何かの記事を参考にカスタマイズしようと、コードをコピーして貼り付けたとします。

その際に終了タグの一部をコピーし忘れる、もしくは先に記述してあった終了タグを消してしまうことがあるかもしれません。

この時終了タグがなくなることで、そのコードの下以降のHTMLが全てCSSやスクリプトの扱いになってしまい、HTMLが正常に表示されなくなります。

はてなブログではコードを入れることが出来る場所が複数あるので、各箇所に誤ってコードを入れた場合にどういう症状が起きるのか、確認していきます。

症状と原因

※この記事の「誤った記述」とは全て</style>や</script>といった「終了タグを入れ忘れた場合」のことを書いています。

ブログがまったく表示されない

原因
headに誤った記述をしてしまった。

headには【ダッシュボード】>【設定】>【詳細設定】>【headに要素を追加】でコードを記述することが出来ます。

アドセンスのコードやカスタマイズで使うjQuery、カスタマイズの記事によってはここにCSSを入れてください。ということもあるかもしれません。

ざっくり言うとサイトはheadとbodyに分かれていて、サイトに表示されるのはbodyの部分です。

headにはサイトの情報やCSSへのリンクなどが入っていて、表示はされません。

なのでheadに誤った記述をしてしまうと、本来なら表示されるはずのbody部分も全てhead内のコード扱いになってしまい、ブログが表示されなくなってしまいます。

この状態を目の当たりにすると、「終わった。。。」という気持ちになってしまいますよね。気をつけてください。

ブログタイトルしか表示されない

原因
ヘッダに誤った記述をしてしまった。

ヘッダには【ダッシュボード】>【デザイン】>【スパナマーク】>【ヘッダ】>【タイトル下】の枠内を選択するとコードを記述することが出来ます。

グローバルナビゲーションやおすすめ記事など、色々なカスタマイズを入れる場所です。

ここに誤った記述をしてしまうと、ブログタイトルのみしか表示されません。

記事のタイトル以降が表示されない

原因
記事上に誤った記述をしてしまった。

記事上には【ダッシュボード】>【デザイン】>【スパナマーク】>【記事】>【記事上】の枠内を選択するとコードを記述することが出来ます。

記事上にはシェアボタンや、アドセンスのコードなどを入れることがあります。

ここに誤った記述をした場合、記事タイトルやカテゴリ、日付は表示されますが記事本文やそれ以降(サイドバーやフッタ)が表示されません。

記事一覧やカテゴリ一覧画面では正常に表示されるので、記事ページを確認しないと気付くことが出来ません。

実は記事が表示されてなかった。。。という事がないように、記事ページをプレビューしながらコードを入れる、もしくはコードを入れたあとは記事ページも確認するのを忘れないで下さい。

記事は全て表示されるがサイドバー以降が表示されない

原因
記事下に誤った記述をしてしまった。

記事下には【ダッシュボード】>【デザイン】>【スパナマーク】>【記事】>【記事下】の枠内を選択するとコードを記述することが出来ます。

ここに誤った記述をした場合、サイドバーやフッタが表示されません。

こちらも記事上と同じく、記事一覧やカテゴリ一覧画面では正常に表示されるので、記事ページを確認しないと気付くことが出来ません。

サイドバー以降が表示されない

原因
サイドバーのHTMLモジュールに誤った記述をしてしまった。

サイドバーのHTMLモジュールには【ダッシュボード】>【デザイン】>【スパナマーク】>【サイドバー】>【モジュールの追加】>【</>HTML】の枠内を選択するとコードを記述することが出来ます。

ここに誤った記述をした場合、その下以降のサイドバーモジュールやフッタが表示されません。

また、HTMLモジュールだけではなくデフォルトのプロフィールモジュール内の「自己紹介を追加」の枠内にも誤った記述をした場合、同じようにサイドバーモジュールやフッタが表示されなくなるので注意してください。

フッタが表示されない

原因
フッタに誤った記述をしてしまった。

フッタには【ダッシュボード】>【デザイン】>【スパナマーク】>【フッタ】の枠内を選択するとコードを記述することが出来ます。

ここにも<script>を記述することが良くあるので、注意が必要です。

フッタに間違いを記述してもフッタを非表示にしている場合(PRO限定)気付かないかもしれません。

確かに表示上は問題なく見えてしまうかもしれませんが、フッタより下にはブクマコメントやはてなスター、注目記事を表示するコードが書かれているため、それらが正常に表示されなくなってしまいます。

これら全てを元々表示する設定にしていない場合、間違いに気付くことはないと思うので、そういった意味では間違うと一番厄介かもしれません。

番外編

CSSが全く反映されない

原因
デザインCSSに誤った記述をしてしまった。

デザインCSSにはCSSのコードのみを入れるので、<style>や<script>は使いません。

誤った記述をしてしまうとCSSが全て反映されなくなってしまうので注意してください。

まとめ

もしブログが表示されなくなってしまった、一部が消えたということがあった場合は直前に行った作業を取り消せば直るはずです。

しかし、頑張って書いてきた自分のブログが消えてしまった時は、パニックになってしまいますよね。

そんな時はこの記事を思い出して、落ち着いて症状の確認をして原因を見つけてください。

大切なブログを諦めることだけはしないで下さいね。

 関連記事
CSSが反映されない?そんな時に確認すべき6つのこと
CSSが反映されない?そんな時に確認すべき6つのこと
 関連記事
はてなブログで使えるフォローボタン【Pinterest、テーマNeumorphism対応】
はてなブログで使えるフォローボタン【Pinterest、テーマNeumorphism対応】
 関連記事
プロフィールをおしゃれにカスタマイズするデザイン10選
プロフィールをおしゃれにカスタマイズするデザイン10選