はてなダイアリーのサイドバーが画面下に飛んでしまったときの対策メモ

本ブログにていつの間にかサイドバーが下に吹っ飛んで表示されるようになっていました。同じ症状を持つはてダがあるかもしれませんので、参考までに原因と対策をまとめておきます。

原因

本来こうあるべきHTMLが

<div class="hatena-body">
  <div class="main"></div>
  <div class="sidebar"></div>
</div>

以下のようになってしまっている。

<!-- 例1 -->
<div class="hatena-body">
  <div class="main"></div>
</div>
<div class="sidebar"></div>

<!-- 例2 -->
<div class="hatena-body">
  <div class="main">
    <div class="sidebar"></div>
  </div>
</div>

対策

デザインの設定を修正する必要があります。なお私の場合はかんたんデザインによる初期化は期待通りの動作をしませんでしたので、管理画面からHTMLを編集する必要がありました。

管理＞デザイン＞詳細デザイン設定を開き、「ページのヘッダ」「ページのフッタ」を確認します。「ページのヘッダ」で記述した（閉じていない）開始タグと同数の終了タグが「ページのフッタ」に記述されているか確認し、一致しない場合は調整を施します。

修正例

以下に修正すべきヘッダ・フッタの例を提示しています。
ヘッダには開始タグが1つありますが、フッタにはそれに対応する終了タグがありません。このため多くの場合、ブラウザが原因の節で解説した「例2」と同じ文書構造として解釈してしまいます。

<!-- ページのヘッダ -->
  <div class="main">

<!-- ページのフッタ -->
  <div class="sidebar">
    <hatena name="profile" template="hatena-module">
    <hatena name="calendar2" template="hatena-module">
    <hatena name="section" template="hatena-module">
    ...

  </div><!-- /div.sidebar -->

この場合、フッタの最上部分にdiv.mainを閉じるための終了タグを追加することで解決することができます。

<!-- ページのフッタ 修正例 -->
  </div><!-- /div.main -->
  <div class="sidebar">
    <hatena name="profile" template="hatena-module">
    <hatena name="calendar2" template="hatena-module">
    <hatena name="section" template="hatena-module">
    ...

  </div><!-- /div.sidebar -->