Paroday

Paroday：ニュースやアニメのレビュー、FC2ブログのテンプレート・プラグインなどを配信しています。

もしかして Parody ではありませんか？　yes

最初の記事下に広告などのコンテンツを表示する方法

　トップページやカテゴリページなどで、最初の記事下に、指定した広告などのコンテンツを強引に表示する方法です。

　livedoorやSeesaaブログなどはループの最初のみを判定する構文があるようですが、FC2ブログにはそういったものはないので、同様の方法は利用できません。

　[A]記事コンテンツ下 と [B]記事本文下（位置指定） のどちらかを利用します。自己責任でお願いします。

　広告を入れる場合は、配信元の利用規約に抵触しないかどうかをご確認ください。必要以上のコードを貼り付けたり、複製したり、コードを触ったりしない（Google Adsenseは禁止行為）のがベストだと思います。[B]より[A]の方が規約的にいいような気がしないでもありません。

デモ[A] - 記事ブロック下 / FC2広告がある場合は2番目下
デモ[B] - 記事本文下（位置指定）

[A] 記事ブロック下 - テンプレートの編集

　コードは触らず、余分なコードも出力せず、動作の変更も行いません。最初の記事ブロックをアドセンスの手前に移動させます。また、個別ページには影響しません。同じ階層に配置するので、大抵のテンプレートで動作すると思います。

　エリア変数のコピーミスなどには注意してください。ページが真っ白になります。

（1）記事表示開始部分（<!--topentry-->）の前後に次のコードを追加します。間にはタグなどが入らないようにします。

<!--not_permanent_area--><!--not_titlelist_area--><!--not_edit_area--><!--eq1/4-->
<div id="eqfirst">

ここに最初の記事ブロック下に表示させたい広告などのコンテンツを入れる

</div>
<script type="text/javascript"><!--
function eqSortBefore(e){var f=document.getElementById('eqfirst'),
s=document.getElementById('eqsort'+e);if(f){if(e){f.id='eqlast';}
if(s){f.parentNode.insertBefore(s,f);}}}
--></script>
<!--/not_edit_area--><!--/not_titlelist_area--><!--/not_permanent_area-->

<!--topentry-->

<!--not_permanent_area--><!--not_titlelist_area--><!--not_edit_area--><!--eq2/4-->
<div id="eqsort<%topentry_no>">
<!--/not_edit_area--><!--/not_titlelist_area--><!--/not_permanent_area-->

（2）記事表示終了部分（<!--/topentry-->）の前後に次のコードを追加します。

<!--not_permanent_area--><!--not_titlelist_area--><!--not_edit_area--><!--eq3/4-->
</div><script type="text/javascript"><!--
eqSortBefore('<%topentry_no>');
--></script>
<!--/not_edit_area--><!--/not_titlelist_area--><!--/not_permanent_area-->

<!--/topentry-->

<!--not_permanent_area--><!--not_titlelist_area--><!--not_edit_area--><!--eq4/4-->
<script type="text/javascript"><!--
eqSortBefore('z');
--></script>
<!--/not_edit_area--><!--/not_titlelist_area--><!--/not_permanent_area-->

（3）スタイルシートに表示するコンテンツ #eqlast のデザインに関するコードを追加します。

body #eqfirst {display: none;}
#eqfirst,#eqlast {
 display: block;
 margin: 15px 8px 20px; /* 余白: 上部　左右　下部 */
}

　以上で設置は完了です。

　上下の余白が必要ないときは次のように変更します。

 margin: 0px 0px 0px;

　1行目の none を block に変更すると、JavaScriptオフのときでも最上部にコンテンツが表示されます。

body #eqfirst {display: block;}

　「FC2のアカマイ広告や1ヶ月広告が最初の記事下に表示される場合は、2番目の記事下に表示する」には、（1）で追加したscriptコードの中身（function eqSortBefore～）を次のように変更します。ページあたりの記事が3つ以下の場合は最下部に表示されます。

<script type="text/javascript"><!--
var eqSortBefore={k:1,m:function(e){var d=document,f=d.getElementById('eqfirst'),
s=d.getElementById('eqsort'+e),v=0;if(f){if(eqSortBefore.k){
if(d.getElementById('ovtAdContainer')||d.getElementById('overtureAds')){eqSortBefore.k=0;}}else{v=1;}if(e){if(eqSortBefore.k||v){f.id='eqlast';}}
if(s){f.parentNode.insertBefore(s,f);}}}};
--></script>

　そして、（2）で追加したscriptコードの『eqSortBefore』を『eqSortBefore.m』に変更します（2箇所：上から3行目と下から3行目）。

eqSortBefore.m('<%topentry_no>');

eqSortBefore.m('z');

　使用しているテンプレートによっては記事下の余白が多く取られている場合があるかもしれません。そのようなときは次の変更を行います。この方法は、id付要素が記事ブロック全体を内包している場合のみ有効です。

　（2）のscript内のコードを変更します。『f.id='eqlast';』の直後に追記します。後の『}』などはここでは省いていますが、そのまま残します。

f.id='eqlast';document.getElementById('hoge'+e).style.marginBottom='20px';

　『20px』の数値を増減させると、表示させるコンテンツと記事の間の余白が変わります。（3）の上部余白とあわせて調整します。

　『hoge』にはテンプレートで使用されているidを指定します。

　多くのテンプレートは <!--topentry--> の直後に id="hoge<%topentry_no>" のように <%topentry_no> 付きのid属性が指定された要素があると思います。

例：
<div id="e<%topentry_no>">
<div id="entry<%topentry_no>">
<div id="title<%topentry_no>">
<div id="post<%topentry_no>">

　この <%topentry_no> の前にある文字をhogeの部分に指定します。
（例）id="e<%topentry_no>" の場合

f.id='eqlast';document.getElementById('e'+e).style.marginBottom='20px';

[B] 記事本文下（位置指定） - テンプレートの編集

　コードは触らず、余分なコードも出力しません。挿入するコンテンツを一度格納して、そのまま指定した場所に出力します。また、個別ページには影響しません。

（1）記事表示開始部分（<!--topentry-->）の直前に次のコードを追加します。間にはタグなどが入らないようにします。

<!--not_permanent_area--><!--not_titlelist_area--><!--not_edit_area--><!--eq1/3-->
<div id="eqfirst">

ここに最初の記事内に表示させたい広告などのコンテンツを入れる

</div>
<script type="text/javascript"><!--
var eqSortBefore={k:1,m:function(e){var d=document,f=d.getElementById('eqfirst'),
s=d.getElementById('eqsort'+e);if(f&&e){if(eqSortBefore.k){
if(d.getElementById('ovtAdContainer')||d.getElementById('overtureAds')){eqSortBefore.k=0;return;}}
f.id='eqlast';if(s){var r=f.parentNode.removeChild(f);s.appendChild(r);}}}};
--></script>
<!--/not_edit_area--><!--/not_titlelist_area--><!--/not_permanent_area-->

<!--topentry-->

（2）記事本文追記判定表示部分（<!--/more-->）の直後に次のコードを追加します。more変数がトップページなどで表示されない場合（検索ページのスポンサーサーチを消す）は、記事本文表示部分（<%topentry_body>）の直後に次のコードを追加します。

<!--/more-->または<%topentry_body>の直後
<!--not_permanent_area--><!--not_titlelist_area--><!--not_edit_area--><!--eq2/3-->
<div id="eqsort<%topentry_no>">
<script type="text/javascript"><!--
eqSortBefore.m('<%topentry_no>');
--></script>
</div>
<!--/not_edit_area--><!--/not_titlelist_area--><!--/not_permanent_area-->

　<%topentry_body> 直前に入れれば、記事本文前に挿入されます。

（3）記事表示終了部分（<!--/topentry-->）の直後に次のコードを追加します。

<!--/topentry-->

<!--not_permanent_area--><!--not_titlelist_area--><!--not_edit_area--><!--eq3/3-->
<script type="text/javascript"><!--
eqSortBefore.m('z');
--></script>
<!--/not_edit_area--><!--/not_titlelist_area--><!--/not_permanent_area-->

（4）スタイルシートに表示するコンテンツ #eqlast のデザインに関するコードを追加します。

body #eqfirst {display: none;}
#eqfirst,#eqlast {
 display: block;
 margin: 15px 0px 20px; /* 余白: 上部　左右　下部 */
}

　上下の余白が必要ないときは次のように変更します。

 margin: 0px 0px 0px;

　1行目の none を block に変更すると、JavaScriptオフのときでも最上部にコンテンツが表示されます。

body #eqfirst {display: block;}

1ページあたりの記事が指定件数以上ない場合は削除する

　表示したものを削除するので、もしかすると動作変更処理に該当するかもしれません。突き詰めていけば、広告を内包するコンテンツの表示・非表示を切り替えるサイトも該当することになりそうなので、解釈はお任せします。
　[A]記事ブロック下は[A]を、[B]記事本文下（位置指定）は[B]の変更を行います。

[A] （2）で記事表示終了部分（<!--/topentry-->）の直後に追加したコードをまるごと変更します。

<!--/topentry-->

<!--not_permanent_area--><!--not_titlelist_area--><!--not_edit_area--><!--eq4/4-->
<script type="text/javascript"><!--
(function(a){if(a[0]===''){a.pop();}if(a[3]){eqSortBefore('z');
}else{var e=document.getElementById('eqfirst')||document.getElementById('eqlast');
e.parentNode.removeChild(e);}
}([<!--topentry-->'<%topentry_no>',<!--/topentry-->1]));
--></script>
<!--/not_edit_area--><!--/not_titlelist_area--><!--/not_permanent_area-->

[B] (3)で記事表示終了部分（<!--/topentry-->）の直後に追加したコードをまるごと変更します。

<!--/topentry-->

<!--not_permanent_area--><!--not_titlelist_area--><!--not_edit_area--><!--eq3/3-->
<script type="text/javascript"><!--
(function(a){if(a[0]===''){a.pop();}if(a[3]){eqSortBefore.m('z');
}else{var e=document.getElementById('eqfirst')||document.getElementById('eqlast');
e.parentNode.removeChild(e);}
}([<!--topentry-->'<%topentry_no>',<!--/topentry-->1]));
--></script>
<!--/not_edit_area--><!--/not_titlelist_area--><!--/not_permanent_area-->

　3行目の if(a[●]) の数値で最低件数を指定します。上記の場合は[3]となっているので、1ページに3件以上の記事がなければ、挿入するコンテンツを削除します。

備考

　（1）のscriptコード内の記述については、head要素内の外部jsファイルに移動させることができます。

　<!--eq1/4--> などは後から削除（元に戻す）しやすいようにつけた目印です。必要ない場合は削除します。

関連記事
  1. comment

  2. ミナミ 2011-12-11 00:05 No.848 #-URL

    最初の記事1下,記事2下,記事3下,と同時に表示は出来ないのでしょうか？
    宜しくお願い致します。

  3. magickingdom 2012-02-06 14:40 No.950 #-URLhttp://magickingdom33.blog109.fc2.com/

    大変参考になりました

  4. raidin 2012-04-29 20:33 No.1156 #-URLhttp://raidoin.blog.fc2.com/

    こんにちは　複雑な方法なのにありがとうございます。
    試してみました。

    記事の　連続表示では問題無くできましたが、
    entry記事の単独の表示では、下に表示されませんでした、残念です。
    　例　http://raidoin.blog.fc2.com/blog-entry-62.html

    ブログの構造は複雑で自分でも調べてみましたが、さっぱりわからなかったです。
    そこまでに対応するのは難しいのかもしれませんね。
    とにかくありがとうございます。

コメント

Icon ※必須 :
Pass 　※入力した英数字を識別コードとしてNoに表示(123→LkZag.iM)

トラックバック

https://paro2day.blog.fc2.com/tb.php/779-a03c8216

  1. trackback