はてなブログのサイドバーが知らない間に消えていた！解決した意外な方法
はてなブログでサイドバーが消えました。
探してみると、なんと本文の記事の下に移動してました。サイドバーなんだから横に固定されてるものだと思ってました。しかもサイドバーが空白になるんではなく、本文が画面いっぱいになって横広くなっているパターンです。
まだ空白だったら、早く気付けたかも・・・・
いつからこの状態かもわからないです。
普通、直前の操作を疑うものだけど、サイドバーがいつ消えたかわからないので、どうしようもない。原因なんて心当たりもない。
どなたか、はてなブログでサイドバー消えた方いませんか？
はてなブログで同じようにサイドバーが下に表示された人がいないか探してみると・・・いました！
ｈｅｒｍｉｏｎｉさんがサイドバーが下に表示されたのを元に戻す方法を書いてくださっていました。
ｈｅｒｍｉｏｎｉさんの場合、「記事」の中にある「記事下」枠にあるコードだったそうです。👇
結論から言うと、私の場合は、この方法では解決しませんでした。残念です。
ＨＴＭＬタグは基本的に開始タグ＜div＞と終了タグ＜/div＞がセットで一つのくくりとして解釈されるそうです。ブログの表示の崩れは記事本文中やブログに追加したコンテンツ内に入力したＨＴＭＬタグにおいてのエラーである可能性を多くの方が示されていました。終了タグ＜/div＞だけが多いとか、＜div＞タグが閉じられていないとかが原因となってブログのサイドバーが記事下に表示される場合があるようです。
古い記事ですが、＜div＞タグで解決された方がいらっしゃいました。すごくわかりやすいので参考までに。
私の場合の解決法
私の場合の解決法はちょっと自分でも意外でした。あれやこれやと調べたにもかかわらず、解決したのは偶然だったように思います。また同じことが起こるかもしれないんでメモしときます。
参考になったのがこの記事です。👇
こちらで紹介されていたコードををコピーしてデザインＣＳＳに貼り付けてみました。
ダッシュボードのデザイン⇒カスタマイズ⇒ｃｓｓ⇒下記をコピー⇒貼り付け
#content-inner {
display: flex;
}
するとサイドバーがちゃんと横に出てきました！うれしい！
でも、何か以前とちょっと違うような・・・あまりにサイドバーが中央に寄りすぎているような気がするんですけど。そういえば、参考にさせてもらったエンジニアさんの元記事もサイドバーと本文がくっつきすぎてます。ご本人もおっしゃってます。
記事とサイドバーの横幅が１：１になっているのが気になる・・・と。
もう一回やり直すつもりで、一度貼り付けたコードをデザインｃｓｓから消してみました。
消した状態でもう一度画面を見直すと、ちゃんとサイドバーが正常になってます。中央寄りだったのが、きれいに空間ができて、見やすくなりました。
一度デザインｃｓｓに入れたコードを消したんです。要するに下から横にサイドバーを持ってくる操作をしたんですけど、中央寄りになりすぎてるので一度貼ったｃｓｓのコードを削除したんです。本来なら、一度やった操作を取り消したのだから、サイドバーは以前のように下に来るはず。それが、サイドバーは下には戻らず、一番最初の正常なサイドバーに戻ったんです！なぜ？
よくわかりませんが、私はこれで解決しました。
何はともあれ、良かったです。それにしても、ＣＳＳだのＨＴＭＬだの、素人には難しいですよね。でも、起こったトラブルには自分で対処するしかありませんからね。
追記です。
実はこの記事を書いてプレビュー画面を見たら、サイドーバーがまた消えてました。直前にやった操作が見出し枠（二重のブルーの線）を入れるために、ＨＴＭＬ編集した後でした。一旦、見出し枠を削除し、再度やり直すとサイドバーが戻ってきました。
まとめ
サイドバーが下に表示されるようになったときは、まず一番最初にやるのが直前の操作をいったんキャンセルし、やり直してみること。次にＨＴＭＬ編集画面で、開始タグ＜div＞と終了タグ＜/div＞がセットになっているか？おかしいところはないか？（これ、私には難しかったです）を確認すること。それでもだめなら、私が試してみたturgureエンジニアさんのデザインｃｓｓコードを貼り付ける方法も試してみてください。そしてサイドバーがくっつきすぎたらコードは消す。何でこれで直ったのか、不思議です・・・・。
