忍者ブログの記事下に来る広告を消す方法

去年忍者ブログが記事下にドでかい広告を表示したあとブーイングの嵐が巻き起こり、たくさんの利用者が忍者を去っていきました。

忍者ブログへの苦情も相当の数に上ったはずです。
スタッフ側ｊはそうなることを事前に分かっていたのかどうかは謎ですが、広告費を払う方にとっては広告の表示頻度が減ったわけだから、損をしたことになるんじゃないでしょうか？

広告への苦情を受けて忍者側が対応策を出すまで、どれだけの利用者が忍者を去ったのか興味深々ですが、その反面で移行したくてもできない人たちもいて、毎回あの広告を見てうんざりしているわけです。


というわけで、今回はどでかい広告を記事の中から消す方法を紹介します。
と言っても、広告はブログを無料で利用する場合は絶対表示させなければいけないので、プラグインに移動してしまうことにしました。

今までこんなに大きな広告をプラグインに貼りつけることは考えられなかったので、どのテンプレートもプラグインの幅が狭いのですが、どんなに幅の狭いプラグインでも大丈夫。

サンプルはこのブログのプラグインを見ていただければ分かります。
横にスクロールするようにCSSを指定し、後は広告のタグをプラグインに張り付けるだけ。
誰でも簡単にできるので、ぜひとも広告を記事の中から追い出してください！

CSSの指定
まずはCSSの指定ですが、「テンプレートの設定」→「テンプレート編集ページ」へ行きます。
余談ですが、また忍者が仕様を変えましたね。
いつの間にか、右側に実際のブログの内容のプレビューが出るようになってます。
また苦情がきたのかも・・・

左側下のCSSの中からプラグインの指定箇所を探してください。
忍者オリジナルのCSSを使用しているテンプレートなら、PluginContentsと書かれたところがあります。

/* プラグイン表示部分 */

div.PluginContents {
    padding: 5px 10px;
}

上の部分にoverflow: auto;を加えます。
overflow: auto;というのは、内容（この場合は広告）がもしはみ出たら、ブラウザの設定に従って自動的にスクロールを出す指定です。

ただ、上の指定だけだとすべてのプラグインに影響し、カウンターの下に出てくるグラフが見えなくなるので、広告だけがスクロールするように .ninjaad というクラスを追加して書き込みます。
下に忍者オリジナル用のCSSを書きましたので、クラスにPluginContentsを使用しているテンプレートの場合はコピーして使用できます。プラグイン表示部分の指定の下に貼り付けてください。

/* プラグイン忍者広告表示部分 */

div.PluginContents .ninjaad   {
    padding: 5px;
    overflow: auto;
}

忍者ブログとは全く違う方式で書かれている場合は、プラグインの内容が表示される個所を探してください。
変更したら、プレビューがおかしくなっていないか確認してから保存します。

IE6 ではカラム落ちしてプラグインが記事の下になってしまいますが、どうせIE6は中国以外は消滅への道をたどっているし、IE9 が出てから自動的にIE9にアップデートしているPCが多いのでI無視しています。もしIE6 やIE7 を使用している読者から表示がおかしいと言う報告があったら、IE8 かIE9 、またはFirefoxをインストールするように勧めてあげてください。

注）どうしてもIE6のカラム落ちを防ぎたい場合は、上の指定に幅指定を加えてやるとカラム落ちしません。このブログでもIE6だけ幅指定をしてカラム落ちを防止していますが、テンプレートによってプラグインの幅はそれぞれ違うので、HTMLの知識がある人はプラグインの幅に気を付けて指定してみてください。


広告のタグの貼り付け
次は広告のタグの貼り付けです。

管理ページ左側の「プラグインの設定」ページに入り、プラグインの追加をクリックして「フリーエリア」を追加します。
新しいプラグインは自動的にカテゴリー１に入ります。
プラグイン設定ページから新しいプラグインの「表示設定」をクリックして編集ページに入り、タイトルを「AD」に変更して、「プラグインHTMLの変更」部分に広告の独自タグ<!--AD1-->を貼りつければ、記事下にあった広告は自動的にプラグインに移行します。
この時に広告タグの前後にHTMLを付け加え、CSSの指定が有効になるようにします。

<div class="ninjaad"><!--AD1--></div>

プラグインカテゴリーを変更する場合は、ページの一番下で変更したあと、保存します。
また余談ですが、知らない間にいろいろ変わるから、プラグインカテゴリーの変更場所が分からなくて焦りました。前の仕様は簡単でよかったので、ちょっと残念！

以上の作業を行うと、狭い幅のプラグインの場合には自動的にスクロールが出るので、IE6以外ではテンプレートが崩れることはありません。
忍者側では、強制ではないですが広告はできるだけ上の方に貼ってくれるようにとお願いしています。広告料金でブログサービスを運営しているのだし、一番上でなくても、真ん中くらいには持ってきてあげましょう。

記事の上に来るプラグインのタイトルの表示方法

最近はアフェリエイトに励むブロガーが増えてきているようですね。
記事の上や下にプラグインがあると、幅広広告や幅広プラグインをつけたい人には好都合です。
広告でなくてもお知らせに使えるし、要らなくなればすぐに削除できる。
記事だと更新とともに下へずれていくけれど、プラグインならいつも一番上に表示しておけます。

新しいテンプレを作っている間にその気になり、広告対応テンプレを作ってみました。
もともとプラグイン5が記事の上に来ていたテンプレも、この機会に新システムに変更していきます。
要らなければ、そのプラグイングループを使わなければ表示されることはありませんから、これがあって迷惑する人はいないでしょう。

それでは説明に入ります。

プラグイン4
トップページとそれに続く記事一覧ページで、記事の上に表示されます。
プレビューにはなぜが表示されませんが、あの表示されているページがトップページではないからです。つまり、トップページだけに特別なデザインをしても、プレビューでは見られないということ。

プラグイン4はお知らせに使うとき用にタイトルが用意されていますが、デフォルテは広告用に非表示になっています。これを表示させたい場合は、テンプレート編集ページの右上にあるHTMLを直接変更することになりますが、ご心配なく。誰でも簡単に変更できるように、HTML内に説明書きがあります。

HTMLを少しスクロールすると、下記のところが出てきます。
オレンジで囲まれたところにある、style="display:none;" を削除すればタイトルが現れ、コピペでまた貼り付けるとタイトルはまた消えてなくなります。
とっても簡単ですから、タイトルを表示させたい方は試してみてください。

広告はトップページと記事一覧ページのみの表示ですが、全ページに表示させたい場合、ピンク色の<!--if_page-->と<!--/if_page-->を削除すれば、すべてのページで表示されます。
が、カテゴリーやアーカイブなど各検索ページにプラグインを表示させたくない場合は、緑色の<!--if_entry-->と<!--/if_entry-->をピンク色に付け加えれば、検索ページでは非表示となります。

<!--　==========▼▼ プラグイン　4　========== -->
        <!--if_page--><!--if_entry-->
        <!--plugin4-->
        <div class="Plugin4InnerBlock">
        
<!-- ▽▽▽ プラグインタイトルの表示方法　
style="display:none;"を削除してください ▽▽▽ -->
          <h3 class="Plugin4Title <!--$plugin_title_align-->" style="display:none;"><!--$plugin_title--></h3>          
<!-- △△△ --------------------------------------- △△△ -->
          <div class="Plugin4Explanation <!--$plugin_explanation_align-->">
            <!--$plugin_header_explanation-->
          </div>
          <div class="Plugin4Contents <!--$plugin_contents_align-->">
            <!--$plugin_data-->
          </div>
          <div class="Plugin4Explanation <!--$plugin_explanation_align-->">
            <!--$plugin_footer_explanation-->
          </div>
        </div>
        <!--/plugin4-->
        <!--/if_entry--><!--/if_page-->
<!--　==========▲▲ プラグイン　4　エンド　========== -->

プラグイン5
こちらは個別記事ページ（詳細記事ページ）だけに表示されます。
トップページに広告があっても、検索で来る訪問者が見るのはこの詳細記事ページだけです。
また、プラグイン4をお知らせ等広告以外に使う場合も考えて、プラグイン5を記事ページに設置。
こちらは記事の下、コメントとの間に表示されます。

テンプレートによってはここにランキングバナーを貼り付けて使えるものもありますが、デザイン上の問題が出る場合が多いと思うので、ランキングバナーはできれば記事の中にあるバナー設置箇所に貼り付けてください。

プラグインを一時的に非表示にする

記事の上にプラグインがあるテンプレートでは、フリーエリアに幅広広告やブログパーツ、お知らせなどが入れられます。
広告やブログパーツは常に表示されることが多いと思いますが、お知らせなどは期間限定ですね。
一度お知らせ期間が終わると、それが書かれているフリーエリアを削除してしまわないと表示が消えませんが、またお知らせを使いたい場合や、何かの都合で広告やブログパーツを一時的にだけ表示させたくない場合などは、いちいちそこを削除してまた書き入れるのは面倒です。

そこでここでは、プラグインを削除したり動かしたりせずに、表示させたり非表示にさせたりする方法をご紹介します。
また、プラグインはブログの全ページ（コメント編集ページを除く）に表示されますが、お知らせなどで詳細記事ページには表示させたくない場合のカスタマイズも一緒に載せておきます。

これはプラグイン全体に有効ですが、こういう使い方をするのは記事の上や下にあるプラグインだけだと思うので、ここでは私のテンプレにある、記事上部のプラグイン5で説明します。
他の作者のテンプレではHTMLが違いますので、その個所を探してください。

カスタマイズされたい方は、追記を開けてください。

プラグインのタイトルを非表示にする

多くのテンプレートは、変化のないプラグインが一列に並んでいるだけです。
忍者ブログにプラグインが５つもあるのは、記事の上や下に置いたり、３カラムで左右に置いたりするためだと思いますが、折り畳みなどの変化のあるプラグインを作るのにも役立っています。

このプラグインの多さを利用して、タイトルのないプラグインを加えたテンプレートが他にもありますが、今回の私の新作でダメが出たため、今後はタイトル無しのプラグインは作れなくなりました。

カウンターやアクセス解析、広告などでプラグインにタイトルを付けたくない場合もあると思いますので、ここではタイトルをなくす仕方を説明します。
とても簡単なので、気軽に試してみてください。


HTMLの変更の仕方
テンプレート編集ページへ行き、右上にあるHTMLを変更します。
忍者から出ている基本テンプレートをそのまま使用したテンプレートは、HTMLを見やすくするための見出しがついていないので、自分でプラグインの場所を探さなければなりません。

いったんHTMLを一番下まで一気にスクロールして、今度はゆっくりと上にスクロールしていくと、「コメントを編集する」と書いてある少し上のところにプラグインのブロックがあり、下のような部分が出てきます。
しかし、中にはプラグインが上のほうに来ているテンプレートもあるので、その場合はHTMLの上からスクロールすれば、プラグインブロックが出てきます。
プラグインの番号は下の緑の部分でわかります。この場合はプラグイン5なわけです。
下の赤い部分がタイトルなので、ここを削除すればプラグインのタイトルはなくなります。

      <!--plugin5-->
        <div class="PluginInnerBlock">
           <div class="PluginTitle <!--$plugin_title_align-->">
            <!--$plugin_title-->
          </div>
          <div class="PluginExplanation <!--$plugin_explanation_align-->">
              <!--$plugin_header_explanation-->
          </div>
          <div class="PluginContents <!--$plugin_contents_align-->">
            <!--$plugin_data-->
          </div>
          <div class="PluginExplanation <!--$plugin_explanation_align-->">
              <!--$plugin_footer_explanation-->
          </div>
        </div>
      <!--/plugin5-->

私のテンプレにはSEO向けとそうでないものの２種類あります。
SEO向けでないものは上の説明どおりです。プラグインブロックがHTMLの上部にあるものと下部にあるものとがありますが、HTMLには見出しがついているのですぐに見つけられるでしょう。

SEO向けはタグが下記のようになっています。
他のSEO向けテンプレートもたいていこのように見出しタグ（h3とかh4）がついていますが、赤字の部分を削除すればタイトルはなくなります。
プラグイン5が記事の上にあるテンプレートはプラグインが4で終わっているので、プラグイン4のタイトルを削除します。

      <!--plugin4-->
      <div class="PluginInnerBlock">
        <h4 class="PluginTitle <!--$plugin_title_align-->"><!--$plugin_title--></h4>
        <div class="PluginExplanation <!--$plugin_explanation_align-->">
          <!--$plugin_header_explanation-->
        </div>
        <div class="PluginContents <!--$plugin_contents_align-->">
          <!--$plugin_data-->
        </div>
        <div class="PluginExplanation <!--$plugin_explanation_align-->">
          <!--$plugin_footer_explanation-->
        </div>
      </div>
      <!--/plugin4-->

Webstyle #01 シリーズでプラグインの左右を変える

Webstyle #01 シリーズで、プラグインの左右を入れ替えたい方用にカスタマイズの仕方をご紹介します。
簡単にできますので、気軽にカスタマイズしてみてください。

1. まずテンプレート設定 / 編集ページで変更したいテンプレートを選び、表の右側にある修正をクリックします。
2. そうするとテンプレート編集ページになります。左側にあるのはテンプレート編集用エディターです。
3. ページの右下にあるCSSをスクロールして、「プラグインブロック」の見出しを見つけてください。
4. ここの一番上のPluginBlock と、もう少し下の「記事ブロック」の一番上のEntryBlock の指定を変えます。下に訂正済みCSSを載せましたので、コピーして差し替えるだけでOKです。

更新後は３つとも同じＣＳＳになりました。下の部分をコピーしてください。

/*************************************************
  プラグインブロック
*************************************************/

.PluginBlock {
    float: right;
    width: 220px;
    margin-top:25px;
    text-align: left;
    overflow:hidden;
}

.PluginInnerBlock {
    margin-right:10px;
    padding:10px 10px 10px 0;
    line-height:150%;
}

.PluginInnerBlock2 {
    margin-right:10px;
    padding:0 10px 10px 0;
    line-height:150%;
}

/*************************************************
  記事ブロック
*************************************************/

#EntryBlock {
    float: left;
    width:570px;
    margin-top:25px;
    text-align: left;
    overflow:hidden;
}

更新前のテンプレートについては追記に入れました。更新前のテンプレートを変更されたい方は追記を開けてください。