【はてなカスタマイズ】サイドバーの要素を記事内に設置する方法。要素を別の場所に移す

表示システム
javascript
2022-09-11公開

要素を別を場所移すとは?

サイドバーの要素を記事内に設置するとは、例えば、ブログのトップページを作ったときに最新記事の表示が必要ですよね?最新記事の表示はサイドバーに設置することができます。そのサイドバーに設置した最新記事の表示をこれから紹介するコードでトップページに表示することができます。

コード

以下のコードを要素の移動先(記事内等)に貼り付けてください。

<div id="destination"></div>

そして以下のコードをデザイン>カスタマイズ>フッターに貼り付けてください。

<script>
    var destination = document.getElementById("destination");
    var hatena_module = document.getElementsByClassName("hatena-module-recent-entries")[0];
    destination.innerHTML = hatena_module.innerHTML;
</script>

コードの説明

div

記事内に貼り付ける用のdivはその中に要素が入るようになっています。

移動させる要素名

移動させる要素名は移動させたいものによって異なるでしょう。2つ目の方のコードの3行目を書き換えることで対象要素を変更することができます。
参考程度にはてなブログにおけるサイドバーの要素名は一覧にしておきます。このコードの場合はhatena-module-recent-entriesで最新記事となっていますね。
なおいずれもclassです。

   種類   |       要素名
===========================
検索ボックス  | hatena-module-search-box
プロフィール  | hatena-module-profile
人気記事    | hatena-module-entries-accrss-ranking
最新記事    | hatena-module-recent-entries
最近のコメント | hatena-module-recent-comments
リンク     | hatena-module-links
category     | hatena-module-category
アーカイブ   | hatena-module-html
===========================

元の要素を非表示に

これを使うと移動させた先と元々あった場所に同じものが表示されます。
もし元々あったものを表示させたくない場合は以下のコードをcssに貼り付けてください。

.移動させた要素名{
  display: none;
}

タイトルを非表示

サイドバーの要素を移動させたのですから、タイトルも付随してきます。使い方によってはタイトルがいらない場合があるでしょう。その場合はこのコードを。

#destination .hatena-module-title{
  display: none;
}

コレをcssに貼り付ければ非表示になります。

あとは調整!

移動させたらあとは調整です。記事は綺麗に整列させて、サイズを調整して。など頑張ってください!