サイドバーのブログパーツをトップページのいい感じの位置に移動する

2個目のブログでやったタイル表示のブログで、ランキングのパーツをタイムライン上に埋め込むスクリプトです。

ブログ村のPVランキングのパーツを本文の5個目として埋め込みます。これをやると記事数が1つ増えるので奇数個（13個表示）の設定にしてあります。

やったこと

✅完成図
f:id:kanaxx43:20210306134135p:plain

2個目のブログで確認できます。 moonstera.cc

使った技術

JavaScriptで30行くらいです。純粋なJavaScriptだけで作ってあります。

特に準備をすることなく、簡単に設置可能かと思います。

仕組み

サイドバーのどこか（今回は右下）にブログパーツを設置します
記事と同じ体裁の枠を1つ追加します（今回は5番目）
上で追加した枠にサイドバーのパーツを移動します

これだけです。

移動にするかコピーにするかは、スクリプト内で選択可能にしてあります。

設置方法

ブログ村のランキングパーツを取り出す
設置する
スクリプトを置く
テスト・確認

１．ブログ村からパーツを取り出します

ブログ村の中からランキングパーツのスクリプトを取り出します。

f:id:kanaxx43:20210306131729p:plain

f:id:kanaxx43:20210306131949p:plain

ランキングの種類が、IN／OUT／PVとあり、カテゴリを指定してランキングを表示できるので、自分が表示したいランキングに設定してからスクリプトをコピーしましょう。

２．スクリプトをそのまま置く

ブログ村からコピーしたコードを置いて、表示できるか確認します

サイドバーのHTMLパーツを新規で追加して、コピーしたコードを置いて
f:id:kanaxx43:20210306140149p:plain

表示の確認をしておきます
f:id:kanaxx43:20210306134538p:plain

３．コードを置く

下にあるコードを先ほど作ったサイドバーに置きます。

変更するところは2か所です。3カ所目は好みに合わせて。

上から3行目のblogmuraの<div>を自分のものに変える
partsPositionの数値を変える
isCloneをtrueにすると、サイドバーと記事内の両方にでる

特に最初の数値の部分11084067は、ブログを特定する数値なので変更するのを忘れずに！

<div id="side-bar-blogmura-ranking">
<!-- 自分のranking parts-->
<div class="blogmura-blogparts" data-chid="11084067" data-category="5109" data-type="pv"></div>
</div>


<script>
var isClone = false;
var partsPosition = 4;

var scriptTag = document.createElement("script");
scriptTag.type = "text\/javascript";
scriptTag.src = "https://blogparts.blogmura.com/js/parts_view.js";
scriptTag.onload = moveRankingParts;
document.currentScript.parentNode.insertBefore(scriptTag, document.currentScript);

function moveRankingParts(){
  var newSection = document.createElement('section');
  newSection.className = 'archive-entry test-archive-entry autopagerize_page_element';

  var sections = document.getElementsByTagName('section');
  if( sections && sections.length > partsPosition ){
    var targetSection = sections[partsPosition];
    targetSection.parentElement.insertBefore(newSection,targetSection)

    var rank = document.getElementById('side-bar-blogmura-ranking');
    if(isClone){
      rank = rank.cloneNode(true);
    }
    newSection.appendChild(rank)
  }
}

</script>

４．確認

サイドバーのブログ村ランキングが記事内のN番目に移動（もしくはコピー）されているか確認します。

最終確定しなくても、ブログ管理画面の中のプレビューの中で確認できます。

上手くいってたら確定しましょう。

まとめ

記事のリスト内にランキングを移動するスクリプトを作ってみました。
せっかくなので目立つところに置いてみましたけど、ちょっと迷惑な場所におきましたよね。位置関係は個人で調整してください。

ブログランキングを見えるところに置いて効果があるかは、今のところ不明です。

『７回目の出直し🌻』

好きなことを自分のペースで、のんびり更新