【はてなブログ】footerをcontainer要素の後ろに移動する（物理的に）

はてなブログの自作フッター（設定 > フッタ）から指定できる項目で自作のフッターを

タグで記述した場合

f:id:Takachan:20200821002235p:plain

要素が container-inner > bottom-editarea に配置されてしまいます。

なので footer が一番下に表示されずに記事の末尾に表示されてなんか違う…一部デザインでなってしまいます。そうならないようにCSSで表示を指定することもできますが面倒な場合があるので一律で footer をタイトルの通りスクリプトで正しい位置まで移動したいと思います。

以下が通常のはてなブログのフッタの配置です。

// 何もしないとこのように配置される
<html>
  <head>
    <title>サンプル</title>
  </head>
  <body>
    <div id=container>
      <div id="container-inner">
        <div id="bottom-ditarea>
          <footer>フッター部</footer> ★★なんか随分中の方にある
        </div>
      </div>
    </div>
  </body>
</html>

で、footer 要素は本来以下のように並んでいてほしいのです。はてなブログの仕様として上記の編集できる部分で指定したヘッダーとフッターは container-inner の前後に挿入されるみたいです。

// 本当はこう並んでいてほしい
<html>
  <head>
    <title>サンプル</title>
  </head>
  <body>
    
    <header>
      <p>ヘッター部</p>
    </header>
    <div>コンテンツ</div>
    <footer>フッター部</footer>
  </body>
</html>

なので JavaScript を使用してこの位置を上記の通り変更したいと思います。

以下のコードを [詳細設定] > [headに要素を追加] に追記します。

<script>
window.onload = function () {
  const fo = document.getElementById("footer");
  const m_parent = document.getElementById("container").parentNode;
  const m_reference = document.querySelector('#container').nextElementSibling;
  m_parent.insertBefore(fo, m_reference);
};
</script>

そうするとあら不思議、画面のロードが完了した時点で footer が正しい位置に移動されます。

f:id:Takachan:20200821003808p:plain

footer を設置して思うように表示されない場合試してみるといいと思います。