『ランキングバナーをどう掲載すれば良いか』続編

2022.5.5 『目印にできそうなもの』の章を追加しました。

ランキングバナーをどう掲載すれば良いか

ブログランキングに参加している方向け記事です。各社の バナー をどこにどう掲載するのが適切か。...

vanillaice000.blog.fc2.com

はじめに

元記事の内容は

• ブログ内のどの領域に掲載するのか
• ランキングバナー スタイリングの雛形
• FC2の仕様によるデフォルト位置をJavaScriptを用いて変更する

概ねこういったものですけれども、どうしても記事の直下にランキングバナーを掲載したいのだ + 毎回記事に書き記すのは嫌なのだ というパターンの場合、そして本記事で補足するのは JS挿入の目印として利用する『関連記事リスト』が無いのだ というパターンです。

【おさらい】テンプレートHTMLにランキングバナーを追加した際のデフォルト位置

元記事を読んで頂ければわかる内容ですが、念の為おさらいとして、FC2のシステムでは以下のような形になります。これは仕様ですからユーザーが個人設定などで簡単に変更することはできません。

ちょっとわかりにくいキャプチャですが、赤い部位をランキングバナーと仮定しています。

記事内掲載の方は『記事内容』を書いてから同様に『ランキングバナー用HTML』を続けて書きますので、当然の結果として記事内容のすぐ下にランキングバナーが表示されます。けれどこの場合は 記事を書く度ランキングバナーのHTMLも書く ということになり手間だよね、と。

テンプレートHTML記載の方は、テンプレートHTMLに書き込むわけですから、ある意味毎回自動で表示されるようになります。そしてこの方法を取った場合は『記事内容』のすぐ下ではなく『関連記事リスト』『テキスト広告(非表示にしていない場合)』を挟んでその下になりますよ、と。でもって、こちらもやはり記事内掲載時と同じように『記事直下に配置』したい、というのが主旨ですよね。

テンプレートにランキングHTMLを追加するには <--more--> ぐらいしか目印にできません。この前に書こうと後に書こうと表示される位置は同じで、記事内容直下ではなく関連記事リストと広告の直下です。

で、元記事の方では JSを用い、関連記事リストを目印にして、その目印の『前』に挿入する という方法を記しています。なので関連記事リストが存在することが大前提です。JSで何かを挿入する場合は必ず目印というか、基準にする要素を決めなければいけないので、それが『関連記事リスト』である、ということですね。

ところが関連記事リストを出したくとも出せない、という方もいるわけですよ。ズバリ

など。上記の場合はどうしたって関連記事リストを表示できないわけで。じゃあ、新規開設者に「ランキングバナーのために記事をUPして増やせ」ですとか、「ランキングバナーのために全カテゴリを2記事以上にしろ」というのはちょっと違う気がします。

対策

ちょっと無理やりといえば無理やりだけども、もうこの方法しかなさそう。ちょっぴり面倒。ちょっぴりだけ。

1. 記事の末尾に目印になるHTMLを記す

   『HTML編集』モードで行います。

2. テンプレートHTMLにJSを追加

   </body> の直前に記載します。

結局記事を書く度にHTMLを書かなきゃいけない、という方法で申し訳ない。とはいえ簡単な内容です。

記事内に記すHTML

<div id="a"></div>

上記内容を記事の最終にペースト。すぐ呼び出せるよう 辞書登録 しておくと便利です。スマートフォンやタブレットでの記事作成が主、という方は是非ユーザー辞書を活用してください。

id名を a としていますが任意です。一文字idやclassなんてのは本来は絶対良くないんですが、目印要素のためにダラダラと長い単語を書きたくはないですよね。そしてclassではなくidにしておいてください。スタイリング対象要素ならclass以外勧めませんが、今回はJSの目印になれば良いだけです。

テンプレートに記すHTML

記載位置は </body> の直前でOKです。

<!--permanent_area-->
<script>
  const tarR = document.querySelector('.relate_dl');
  var lankingBlock = 'ここにランキング用HTML';
  if (tarR) {
    tarR.insertAdjacentHTML('beforebegin',lankingBlock);
} else if (!tarR) {
  document.querySelector('#a').insertAdjacentHTML('beforebegin',lankingBlock);
}
</script>
<!--/permanent_area-->

ランキング用HTMLは元記事を参照してください。必ず ソース改行を行わず横一列で記します。

目印にできそうなもの

ランキング用HTMLをJSで差し込む際に目印にできそうなものを上げておきます。

• .relate_dl 関連記事リスト, おすすめ
• .fc2_footer ブログ拍手, イマイチ
• 任意 FC2拍手, ダメ
• .fc2_text_ad テキスト広告, 絶対ダメ

以下は表示優先順位です。

1. ブログ拍手
2. 関連記事リスト
3. テキスト広告
4. FC2拍手

ブログ拍手が順位では最優先なので、『拍手よりも上』を希望する場合はこちらを目印にするしかありません。この場合は元記事のJSのセレクタを .relate_dl から .fc2_footer に変更します。

ただし拍手を目印にするのはおすすめしません。なぜならFC2拍手に変更したくなる可能性があるでしょうし、拍手自体の掲載をやめたくなることもあるかと思います。FC2拍手に変更してしまえばランキングの表示位置が結局記事下にできなくなりますし、拍手掲載をやめてしまえばランキングも表示できません。
* FC2拍手の目印が『任意』としたのは、ラッパーを作成する必要があるためです。

拍手掲載を辞めたい、というのはチラホラ目にしますが、関連記事リスト表示を辞めたい、というのはあまり目にしません。というか見たことないので、継続利用の可能性が高い『関連記事リスト』目印が最もおすすめです。

まとめ

今回の方法は先に記したように『関連記事が表示できない』に該当する方向けです。ブログ歴が長くとも、新規カテゴリを開設することもあると思います。新規カテゴリは1件からスタートですから、この場合もあてはまりますね。

しばらくは記事末尾にHTMLの付加を忘れないようにして、関連記事が表示されるようになったら付加をストップしても構いません。過去記事からHTMLを取り除かず放置しても問題ありません。

私にはこのぐらいしか思い浮かびませんでした。他にも方法あるかしら。とにかくテンプレート変数周りでは操作が難しいので記事に何かしら目印を入れるしか無く。それとも気づいていない方法があるのかしら。

今回のパターンにあてはまり、かつ既存記事数が多い、という方はこの方法でも難しいですよね。何か思いつけばまた記事にしたいと思います(でもたぶん無理。ごめん。)