ランキングバナーやアフィリエイトバナーを好きな位置に表示するには

本ページを補足する内容の記事を書いていますので、よろしければご一読ください。

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

以前UPした『ランキングバナーをどう掲載すれば良いか』という記事を補足するための記事です。...

vanillaice000.blog.fc2.com

本記事は「個別記事(個別ページ)」のみを対象とし、トップページへの言及はありません。

表示順序は固定されている

ユーザーが例えば「某(なにがし)のバナー」などを 記事の直下 を期待して掲載しようと思った場合、該当のhtml内容あるいはJS内容を記す場所はテンプレートhtmlの <!--/more--> の直下。この一択です。ここしか書く場所が無い。

<!--/more--> というFC2独自変数は「追記の終わり」を意味しています(追記が存在しない場合には無視されます)
追記が終わったすぐ後、追記が無い場合には本文が終わったすぐ後、を意味する位置なのでこれ以上「本文」あるいは「追記」に近い場所というのはありません。
* 記事の「直前」でなく「直後」に掲載する場合を説明しています。念の為。

ところが実際の表示は以下の通り。横に長い赤い棒が仮に「ランキングバナー」とした場合のサンプルです。

記事内容のすぐ下にはまず 拍手ボタンやSNSボタン が表示されます。表示する設定にしている場合は、です。もちろん。次に来るのは 関連記事リスト ですね。そして次に FC2テキスト広告 が表示され、そしてようやくユーザー任意掲載の某が表示されます。

「記事の直下」を期待したとしても、実際には

• SNSボタン
• 関連記事リスト
• テキスト広告

がバナーよりも先に表示されてしまうんですね。そこをなんとかしようじゃないか、ということです。ここからはパターン別対処法です。

SNSボタン, 関連記事リスト, テキスト広告不要

邪魔をするこの3要素の表示が「不要」と思われる場合には個人設定だけで完結できます。

環境設定ページ
該当の3要素を全て非表示に設定。任意掲載要素(バナーなど)はテンプレートhtmlの <!--/more--> の直下に記載。それで終了です。

テキスト広告を非表示化する場合には代償があります。画像高速表示 の権利が失われます。画像高速表示とはつまり CDNサーバーの利用 なんですが、これが使えなくなる。CDNというのは画像をひとつのサーバーで管理するのではなく、複数のサーバーにコピーを置いておき、距離的に最も都合の良いサーバーを経由して表示させる、という仕組みで高速化に繋がります。このCDNの利用権を得るためにはテキスト広告を表示させる、というのがFC2ブログでのお約束。ここを納得できるのであればテキスト広告非表示もアリだと思います。選択は自己責任で。

html内容が複雑でない場合

主にランキングバナーなどはhtmlの簡単ソースコードだけで掲載できます。そういった類の場合には以下の手順でいけると思います。

SNSボタンよりも「下」関連記事よりも「上」

<!--permanent_area-->
<script>document.addEventListener('DOMContentLoaded',function(){document.getElementsByClassName('relate_dl')[0].insertAdjacentHTML('beforebegin','ここにhtml内容');},false);</script>
<!--/permanent_area-->

ここにhtml内容 の部位に実際の任意コードを掲載しますが注意点あり。例えば以下のようなコード。

<a href="https://xxxx.com" target="_blank">
  <img src="https://yyy.jgp" alt="">
</a>

このようにソース内で改行やインデントが行われている場合には取り除いて横一列に繋げてから記載します。

<a href="https://xxxx.com" target="_blank"><img src="https://yyy.jgp" alt=""></a>

内容をあてはめたらテンプレートhtmlに記載します。記載位置は </body> の直前で構いません。

SNSボタンよりも「上」

つまりこれが「記事直下」ですね。

<!--topentry-->
<script>document.addEventListener('DOMContentLoaded',function(){document.getElementsByClassName('fc2_footer')[0].insertAdjacentHTML('beforebegin','ここにhtml内容');},false);</script>
<!--/topentry-->

注意点は前章と同じです。

html内容が複雑な場合, htmlでなくJSの場合

コード内容が非常に複雑であったり、コード自体がhtmlではなくJS(JavaScript)などの場合はこちらの方法を取る方が良いでしょう。例えば Google Adsenseなどのアフィリエイトバナー などがこれにあたるかと思います。これは「関連記事リストを環境設定による自動表示ではなく、テンプレートhtmlに直書きする」という方法です。これが一番面倒な作業ではありますが、作業するのは一度だけです。

この方法を取る場合、SNSボタン, テキスト広告よりも「後」に関連記事リストが表示されますので、任意要素を関連記事リストの「前」に表示させることはできてもSNSボタン, テキスト広告よりも「前」にはできません。

任意コードがhtmlであるならばなるべくこの方法ではなく前章の方法を取った方が自由が効きますね。ただしアフィリエイトの多くはJSコード掲載ですから、表示位置基準はよくいっても「関連記事リスト」にするしかありません。JSコード掲載内容をさらにJSで位置変更、となると規約の問題等ちょっと怖いというのもあります。

関連記事リストhtml

アイキャッチ画像(サムネイル)あり ↓

<!--relate_list_area-->
<dl id="fc2relate_entry_thumbnail_area" class="relate_dl fc2relate_entry_thumbnail_on">
  <dt class="relate_dt">関連記事</dt>
  <dd class="relate_dd">
    <ul class="relate_ul">
      <!--relate_list-->
      <!--relate_entry_other-->
      <li class="relate_li">
        <span class="relate_entry_thumbnail">
          <a href="<%topentry_relate_url>"><img src="<%topentry_relate_thumbnail>" alt=""></a>
        </span>
        <span class="relate_entry_title">
          <a class="relate_entry_title_text"><%topentry_relate_title></a>
          <span class="relate_entry_date"><%topentry_relate_year>/<%topentry_relate_month>/<%topentry_relate_day></span>
        </span>
      </li>
      <!--/relate_entry_other-->
      <!--/relate_list-->
    </ul>
  </dd>
</dl>
<!--/relate_list_area-->

アイキャッチ画像(サムネイル)なし ↓

<!--relate_list_area-->
<dl class="relate_dl fc2relate_entry_thumbnail_off">
  <dt class="relate_dt">関連記事</dt>
  <dd class="relate_dd">
    <ul class="relate_ul">
      <!--relate_list-->
      <!--relate_entry_other-->
      <li class="relate_li">
        <a href="<%topentry_relate_url>">
          <%topentry_relate_title> (<%topentry_relate_year>/<%topentry_relate_month>/<%topentry_relate_day>)
        </a>
      </li>
      <!--/relate_entry_other-->
      <!--/relate_list-->
    </ul>
  </dd>
</dl>
<!--/relate_list_area-->

上記がFC2ブログ関連記事リストのデフォルト内容、環境設定ONにより自動で表示される内容とほぼ同一です。アイキャッチ画像の「あり・なし」によって内容が異なりますので事前の選択必須です。コードの記載位置はいずれも <!--/more--> の直後です。

必須個人設定

関連記事リスト 表示場所「テンプレート変数のみ」
表示場所を「テンプレート変数のみ」に変更します。この設定を怠ると作業が台無しになりますので必ず行います。

アイキャッチ画像「なし」を選択する場合、関連記事リストの表示作業については終了です。

関連記事リストCSS(アイキャッチ画像ありの場合のみ)

#fc2relate_entry_thumbnail_area .relate_dl,
#fc2relate_entry_thumbnail_area .relate_dd,
#fc2relate_entry_thumbnail_area .relate_dd .relate_ul{
  padding: 0;
  margin: 0;
  list-style: none;
}

#fc2relate_entry_thumbnail_area .relate_dd .relate_ul .relate_li,
#fc2relate_entry_thumbnail_area .relate_dd .relate_ul .relate_li_nolink{
  list-style: none;
  background-image: none;
  padding: 0;
  margin: 0;
  display: table;
}

#fc2relate_entry_thumbnail_area .relate_entry_thumbnail {
  width: 90px;
  height: 90px;
  padding: 4px 0;
  display: table-cell;
  vertical-align: middle;
}

#fc2relate_entry_thumbnail_area .relate_li .relate_entry_thumbnail a,
#fc2relate_entry_thumbnail_area .relate_li_nolink .relate_entry_thumbnail a{
  display: block;
  padding: 0;
  margin: 0;
}

#fc2relate_entry_thumbnail_area .relate_dd .relate_ul .relate_entry_thumbnail img {
  width: 90px;
  height: 90px;
  margin: 0 auto !important;
  vertical-align: middle;
}

#fc2relate_entry_thumbnail_area .relate_dd .relate_ul .relate_entry_thumbnail a {
  text-decoration: none !important;
}

#fc2relate_entry_thumbnail_area .relate_dd .relate_ul .relate_entry_thumbnail .relate_entry_thumbnail_noimg {
  border: 1px solid #ececec;
  width: 88px;
  height: 88px;
}

#fc2relate_entry_thumbnail_area .relate_entry_title {
  display: table-cell;
  padding-left: 1em;
  vertical-align: middle;
  line-height: 1.2em;
}

#fc2relate_entry_thumbnail_area .relate_entry_title .relate_entry_title_text {
  display: inline-block;
  max-height: 3.5em;
  overflow: hidden;
}

#fc2relate_entry_thumbnail_area .relate_entry_date{
  display: block;
  font-size: 80%;
  opacity: 0.8;
  margin-top: 6px;
}

@media screen and (max-width: 479px) {
  #fc2relate_entry_thumbnail_area .relate_entry_thumbnail {
    width: 72px;
    height: 72px;
  }
    #fc2relate_entry_thumbnail_area .relate_dd .relate_ul .relate_entry_thumbnail img {
    width: 72px;
    height: 72px;
  }

  #fc2relate_entry_thumbnail_area .relate_dd .relate_ul .relate_entry_thumbnail .relate_entry_thumbnail_noimg {
    width: 70px;
    height: 70px;
  }
}

上記内容は リセットCSSよりも「後」テンプレート付随の関連記事リスト関係CSSよりも「前」 に記載しなければいけませんので、スタイルシートの末尾、というわけにはいきません。なのでリセットCSSの直後が良いと思います。

テンプレートのスタイルシートに「reset」「normalize」などの文字列がある場合にはそれが対象です。多くの作者さんがわかりやすいよう目印をつけているはずなので、そのまとまりの直後に記すと良いでしょう。例えば弊テンプレートの場合はこんな感じです。

関連記事リストを環境設定に頼らず表示させる作業は以上で終了です。

任意コードの記載

関連記事リストのhtmlは <!--/more--> の直後に記載されているはずなので、任意で表示させたいバナーなどのJSコードは関連記事htmlよりも「前」に掲載したいならば関連記事リストhtmlの前に記すだけです。この方法を取れば関連記事リストを表示位置の基準として確実に「前」あるいは「後ろ」に掲載することが可能です。

アイキャッチ画像「あり」でこの方法を取る場合には、記事に毎回アイキャッチを設定するか、個人設定でNo image画像の指定を行ってください。

サムネイル代替画像の指定
htmlベタ打ちの場合はFC2ブログのユニコーン画像は表示されなくなりますので「画像アドレスなし(src属性なし)」のhtmlバリデートエラーになってしまいます。

* 実際にはユニコーンのNo image画像は表示されません。

まとめ

アフィリエイトバナーについて触れましたが、もちろん自動広告は対象にしていません。表示位置を任意で指定できるコードのみ効力があります。そしてアフィリエイトの場合にはそれぞれの規約がありますので各自しっかりと確認を行ってください。

また、最後の方法(関連記事リストのベタ打ち)の場合には個人設定を変更しますので、テンプレート変更時にhtml, CSSの移植必須です。この設定変更のことを失念して「新しいテンプレートに不具合がある。関連記事リストが表示されない」という勘違いもよくあります。自分で行った作業はしっかりと把握しておくことも大事です。