忍者ブログ

CriCri

クリエイティブになりたいクリクリ工房

   

[PR]

×

[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。

デモランキングバナー

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

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

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

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


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

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

サンプルはこのブログのプラグインを見ていただければ分かります。
横にスクロールするように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の知識がある人はプラグインの幅に気を付けて指定してみてください。


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

管理ページ左側の「プラグインの設定」ページに入り、プラグインの追加をクリックして「フリーエリア」を追加します。
新しいプラグインは自動的にカテゴリー1に入ります。
プラグイン設定ページから新しいプラグインの「表示設定」をクリックして編集ページに入り、タイトルを「AD」に変更して、「プラグインHTMLの変更」部分に広告の独自タグ<!--AD1-->を貼りつければ、記事下にあった広告は自動的にプラグインに移行します。
この時に広告タグの前後にHTMLを付け加え、CSSの指定が有効になるようにします。
<div class="ninjaad"><!--AD1--></div>
プラグインカテゴリーを変更する場合は、ページの一番下で変更したあと、保存します。
また余談ですが、知らない間にいろいろ変わるから、プラグインカテゴリーの変更場所が分からなくて焦りました。前の仕様は簡単でよかったので、ちょっと残念!

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

拍手[28回]

デモランキングバナー
  

COMMENT

NAME
TITLE
MAIL (非公開)
URL
EMOJI
Vodafone絵文字 i-mode絵文字 Ezweb絵文字
COMMENT
PASS (コメント編集に必須です)
SECRET
管理人のみ閲覧できます
 

邪魔だった広告

はじめまして。
Webstyle #02 butterfly 3Cテンプレートを使用させてもらってます。

元々、プラグインを記事の左右に分けられないかと思いココを訪問させて頂いたんですが、
思いかけずこの記事を見つけ早速、広告を移動させました!
これだけで随分と記事がスッキリしました。
ありがとうございますm(_ _)m

でも、やっぱりプラグインは左右に分けたいなぁ・・・なんて(苦笑)
いや、これはもう少し自分で頑張ってみます。
  • ピンクモモンガ さん |
  • URL |
  • 2013/01/20 (05:21) |
  • Edit |
  • 返信

ピンクモモンガ様

はじめまして、ピンクモモンガ様
テンプレートを使用していただいているそうでありがとうございます。

広告が出るようになってだいぶ経ってからこの記事を書いたので、こういう方法があるのを知らない方が多いようです。
見つけてくださってありがとうございます(^―^)

butterfly の画像は記事部分の大きさに合わせて配置してあるので、3カラムの場合はプラグインを左右にするとデザインのバランスが崩れてしまうために右寄せにしました。
しかし、プラグインを左右にすること自体に問題はありません。

もしプラグインの位置変更に手こずるようでしたら、また聞いてみてください。
記事内でお答えできると思います。
  • from くろろ |
  • 2013/01/22 (09:31)

もしかして

わざわざ.plugincontentsに幅指定をしなくても
プラグインブロック(widthが指定してあるところ)に、
overflow: auto; を追加すると
カラム落ちしなくて良いのでは・・?
試してないので微妙なのにこんな提案をすみません。。。

私は元々、IEだけでサイトを作ったりしていて
IE6のクセには慣れているほうなのですが
IEの嫌われように心が痛みます(苦笑)
  • Lenny さん |
  • 2013/02/24 (07:56) |
  • Edit |
  • 返信

Lenny さんへ

こんにちは、Lenny さん。
プラグインブロックへの指定は試しましたが、スクロールがプラグインブロックの最下位に出ます。
そして、私のWebstyle #02 シリーズでは、はじめからプラグインブロックに指定がしてあるにもかかわらず、はみ出てしまいます。
へまをした覚えはないんですがねえ・・・

それと、デザインによってはプラグインブロック全体へのスクロールが出ると具合が悪い場合があると思うので、ここはコンテンツに独自指定をしたほうが無難だと思います。

Lenny さんはIE 愛好者ですか。
その人の前で申し訳ないですが、やっぱりIE は大嫌いです。
テンプレを作ると、Firefox、 Safari 、Chrome 、Opera の表示は最新版で調べればいいけど、IE側はIE6、 IE7、 IE8、 IE9のすべてで調べないといけないし、それぞれのバージョンの表示具合が全部違うんですもの。IE10 も出てきたから、また全部のテンプレを調べなおしましたよ。

らばQの記事で面白いのがあるので、覗いてみてください。
みんなIE には苦労してるんですよ。
http://labaq.com/archives/51391927.html
  • from くろろ |
  • 2013/02/25 (17:31)

カレンダー

03 2017/04 05
S M T W T F S
1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 29
30

AD

PR

ブログ内検索

素材サイト様

White Board様
White Board Banner
妙の宴様
妙の宴 Banner
もずねこ様
Mozneko Banner
押し花とアイコン様
押し花 バナー
petit sozai emi様
petit sozai emi
幕末維新新選組様
幕末維新新選組
The Heart of Eternity 様
thoe バナー
Crambon様
Crambon バナー
DragonArtz Design 様

プロフィール

メール de コンタクト

このブログへのリンク

Firefoxを支援しています

管理人はFirefoxの愛好者です。Internet Explorer は大嫌い。IEよりはるかに優れたFirefoxをお試しあれ。ダウンロードは下のバナーから無料でできます。
Firefox ブラウザ無料ダウンロード

現在の閲覧者

Copyright ©  -- CriCri --  All Rights Reserved

Design by CriCri / material by DragonArtz Desighns / powered by NINJA TOOLS / 忍者ブログ / [PR]