attention admin about comments trackbacks you may also like

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

2020年01月22日
カスタマイズ
5
中級者向け HTML CSS Tips

多くの方がランキングやアフィリエイトのバナーを 記事の直下に掲載したい という希望をお持ちのようです。しかしFC2の仕様により現実は結構それが難しい。というわけでパターン別の解消法です。テンプレート内容の操作をしますので中級以上向け… ですが初心者さんでもできます。基本コピペだけなんで (´・ω・`)

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

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

ユーザーが例えば「某(なにがし)のバナー」などを 記事の直下 を期待して掲載しようと思った場合、該当の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の移植必須です。この設定変更のことを失念して「新しいテンプレートに不具合がある。関連記事リストが表示されない」という勘違いもよくあります。自分で行った作業はしっかりと把握しておくことも大事です。

関連する記事
vanillaice (Akira)
Author: vanillaice (Akira)
* Internet Explorerはサポートしておりません。
* メールでの返信をしておりません。
ブログ内で必ずお返事はしておりますので
ご面倒ですがリコメの確認に再度お越しくださいね *

コメント(5)

There are no comments yet.

M

2020/01/22 (Wed) 14:50

凄く参考になります

Akiraさま

こんにちは。いつもお世話になっております。

今回の記事。とても興味深い内容で、凄く参考になりました。ありがとうございます。

ところで、FC2ユーザーさんの中には記事下だけでなく、記事中で任意の場所にバナーなどを埋め込みたいと思っている方も多いと思います。

これに関しては、moreの直下に記載すれば簡単ですが、例えば、AkiraさまのテンプレートのTOC(目次)と連動させて何か工夫することは物理的に可能でしょうか?

1記事にh3の見出しが5つあった場合、3つ目の後ろにバナーを設置するとか…。

もしもそんなことが出来たら凄いなぁと思ってしまいました(^^;;

Akira

2020/01/22 (Wed) 16:05
vanillaice (Akira)

To Mさん

Mさん、こんにちは ('0')/

それは難しいですね (´・ω・`)
記事に書いた通りJSをJSで操作することがまず危険です。ajaxを使ったりdocument.writeを使ったりすることになり、それが果たして上手く機能するか、またあるいは規約をクリアできるのか。
そして確実に基準にする要素が存在するのかどうか(例えば見出しの構成によっては3つ以下の場合がありはしないか)
TOCは記事内容を読み込んだ後にしか起動できないので、さらにTOCの動作を待った後に広告を起動させる必要がある、asp側に見出し要素が含まれてはいないか、
など色々と問題があります。
何より本文中に紛れ込む広告は閲覧者にとって疎ましいものです (´・ω・`)

M

2020/01/22 (Wed) 18:55

To Akiraさん(お返事不要)

Akiraさま

ご多忙の中、お返事ありがとうございます。

なるほど!JSのJSになってしまうのですね!

専門の方から、いろいろな不具合の可能性があるということが聞けてとても勉強になりました。記事中の広告配置については、昔から疑問を抱いていましたので…。

長年の疑問がスッキリした思いです。

いつもありがとうございます!

-

2020/01/25 (Sat) 08:20

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

Akira

2020/02/02 (Sun) 20:21
vanillaice (Akira)

To バナー掲載位置の件 内緒さん

お返事大変遅くなりました (*_ _)

お役に立てたのならば幸いです。ご丁寧にありがとうございます :)

テンプレートに関するご質問・不具合のご報告の際はご自身のブログアドレス記載必須です。
ご質問の前に 必ずお読みください
テンプレートに関するご質問時のお願い

必ず該当テンプレートの専用記事にお願いします。無関係な記事・別のテンプレート専用記事でのコメントはお控えください。
テンプレートカテゴリ
テンプレート一覧