Seesaa ブログ スマートフォン版Basicテンプレート

Seesaa ブログの広告を消す件に関して、コメントを頂きました。ありがとうございます。

新しいスマートフォンテンプレート Basic シリーズでは、以前紹介した広告非表示が適用されないというのがコメントの内容です。

改めて Basic テンプレートを見てみましたがこれがなかなか良い。ですが、ご質問にお応えしてスマホ版テンプレート Basic から全ての広告を消してみます。

Sponsored Link

※この記事には最新版の追記があります。文末のリンクを確認してください。

ボクのとある秘密ブログやこのブログでは、既に Seesaa スマホテンプレートには見切りをつけていて、デスクトップ版をレスポンシブにカスタマイズし、スマホでのアクセスを強制的にデスクトップ版に飛ばすという仕組みにしています。

なので Basic というスマホテンプレートがあることは知っていましたが中身は分らず、ソースも真剣には見ていませんでしたので今回じっくりと。以前のテンプレートに1つだけ変更点があるみたいです。

Seesaa ブログ 新 Basic テンプレートから広告を消す。それも全部

最初にお伝えしますが、今回は追加された Basic シリーズにも対応していますということで、このカスタマイズは以前のスマホテンプレートにも有効です。

Basic テンプレートの広告表示では、ad-area というクラスが追加されているようです。以前、CSS に広告非表示のタブを追加しまくりましたが、ちょっと変更してますので新しい ad-area も含めて再度ここに紹介します。

まずスマートフォンのデザイン一覧から Basic の CSS を開き ad-area 関連の定義をすべてコメントアウトします。ad-area をキーワードに CSS を検索してください。執筆現在で12箇所あります。

.ad-area:before, // 329行目
.ad-area:after, // 330行目

.ad-area:after, // 359行目

/*
* Ad // この Ad ブロックすべて
*/
.ad-area{// 1711行目 .ad-area から

}// 1743行目 .ad-area.ad-footer div まで

削除しても構わないと思いますが、該当部分の直上に /*、直下に */ を挿入し、念の為コメントアウトだけにしておく方が良いかもしれません。

ad-area の定義を無効にしなくても、次項の広告非表示だけで広告は消えます。しかし、このコメントアウトをやっておかないと、広告があった場所に無駄な空白行が残ってしまいます。

引き続き Basic の CSS に下記を追記します。

/*--- 広告を非表示 ---*/
[id*="adArea"]{display:none;visibility:hidden;height:0px !important;}
[class*="ad-area"]{display:none;visibility:hidden;height:0px !important;}// 新スマホテンプレート対応
[id*="jt:seesaa_seesaa"]{display:none;visibility:hidden;height:0px !important;}
[class*="adlantis"]{display:none;visibility:hidden;height:0px !important;}
[id*="adblock"]{display:none;visibility:hidden;height:0px !important;}
[class*="ad_block"]{display:none;visibility:hidden;height:0px !important;}
[class*="seesaaAdA"]{display:none;visibility:hidden;height:0px !important;}
.seesaa-adLink, .adlink, .adBoth, .adText, .adUrl, .adImage, .adSponsor, .adSponsorUrl, .adHr{display:none;visibility:hidden;height:0px !important;}
[class*="ad_frame"]{display:none;visibility:hidden;height:0px !important;}
[class*="adlantis_sticky_zone"]{display:none;visibility:hidden;height:0px !important;}
[id*="androidGame"]{display:none;visibility:hidden;height:0px !important;}
[class*="ichioshi"]{display:none;visibility:hidden;height:0px !important;}
[class*="top-ad"]{display:none;visibility:hidden;height:0px !important;}
[class*="im_ad"]{display:none;visibility:hidden;height:0px !important;}
[class*="androidgame"]{display:none;visibility:hidden;height:0px !important;}
[id*="iphonead"]{display:none;visibility:hidden;height:0px !important;}
[id*="iphoneFooterAd"]{display:none;visibility:hidden;height:0px !important;}
[id*="androidFooterAd"]{display:none;visibility:hidden;height:0px !important;}
[id*="adstir_ad"]{display:none;visibility:hidden;height:0px !important;}
[class*="seesaa-adBox"]{display:none;visibility:hidden;height:0px !important;}
[class*="adBox"]{display:none;visibility:hidden;height:0px !important;}
[class*="adTitle"]{display:none;visibility:hidden;height:0px !important;}
[id*="adcon"]{display:none;visibility:hidden;height:0px !important;}
[id*="imobile_adspotdiv"]{display:none;visibility:hidden;height:0px !important;}
[id*="nend_adspace"]{display:none;visibility:hidden;height:0px !important;}

/* 「スマートフォン版で表示」のデカいリンクを非表示 2014年5月追記*/
#iphone-link{display: none !important;}

この記事のCSSは更新していません。「Seesaaブログスマホ広告を消す悩みを消す方法」のCSSを随時更新しているのでそちらをご参照ください。

以前、紹介したものですと visibility:hidden と height:0px で非表示にしていました。そのころ紹介されていた情報の趨勢がそんな感じだったもので。右に倣えで。

ただボク個人的には height を 0px にする、何か要素を 0px に指定するということにずっと違和感と危機感を持ってました。スパムの臭いがプンプンするのであります。そこで今回は、 display: none という目クソ鼻クソの変更をしています。

Basic テンプレート対応での追加は赤文字の1行です。

Seesaa 広告を独自広告に置き換え

上記のコードにより非表示になった広告は以下の6件。
1. ヘッダーの 320 x 50 広告
2. 記事ページでのタイトル直下テキスト広告
3. 記事ページでの記事最後(ブックマーク直下)のテキスト広告
4. 記事下ナビ直下の 320 x 100 広告
5. フッターの 300 x 250 広告
6. フローティング広告

全部で6件も広告が消えてしまいました。

Seesaa Basic テンプレートに広告を追加この中で赤文字の3つは、独自広告の挿入が簡単でクリック率も高い位置になりますので、この3箇所を独自広告に差し替えてみます。

スマートフォンのデザイン一覧からコンテンツを選択し、「自由形式」のコンテンツを図を参考に3箇所に追加します。

図の上から順番に、320x50広告、320x100広告、300x250広告になります。

この3つの広告が差し替われば、広告だらけだった Seesaa ブログの Basic テンプレートが、あっという間にあなたの独自広告だらけのブログに早変わりです。

スマートフォンの PC 版閲覧でフローティング広告を非表示にするにはスマートフォン版を無効にするしか方法が見つからない

上記のカスタマイズの結果を整理します。本来はスマホ版と PC 版を切り替える cookie (force_pc, force_sp)について触れるべきですが、ややこしくなるので割愛し、現象面だけで解説します。

デスクトップ(PC)で閲覧した場合
全ての広告が非表示になります。
・PC版表示:広告なし
・スマートフォン版表示:広告なし(フローティング広告も非表示)
※デスクトップからスマホ版の閲覧はブラウザの User Agent 仮想の結果です

スマートフォンで閲覧した場合
一部でフローティング広告が表示されます。
・PC版表示:フローティング広告が表示
・スマートフォン版表示:広告なし(フローティング広告も非表示)

デスクトップ PC からの閲覧している訪問者は、PC 版・スマートフォン版ともに一切の広告を見ることがありません。
スマートフォンから閲覧している訪問者は、スマートフォン版では一切の広告を見ることがありません。しかし、スマートフォン版から PC 版に切り替えて表示した際に、フローティング広告のみ見ることになります。

つまり、Seesaa広告が表示されるケースは唯一、「スマートフォンからの閲覧者が PC 版を表示したときのみ」ということになります。「スマートフォン版の広告を消したい」が目的であれば、これで達成したことになると思います。

スマートフォンからの閲覧者を PC 版に誘導しないためには、スマホテンプレートのフッターにある "PC版を見る"リンクを無効にしてしまうことです。

スマートフォンのデザイン一覧から適用しているデザイン(CSS)を開き、changedeviceLinks を非表示にします。

.changedeviceLinks{
display: none; // PC版を見るリンクを非表示
background:#ffffff;
margin:0 0px;
text-align:center;
padding:5px 5px 5px 5px;
}

※ CSSに記述した // は解説用コメントです。正しい結果が得られないことがありますので必ず削除してください。


"ログイン" のリンクも同時に表示されなくなりますが、管理者寄りのリンクですから無くても支障はないはずです。これでスマホから PC 版への導線を切りました。いったんクッキーを削除して PC版の URL 叩いたとしても、force_pc という cookie が生成できませんから、PC 版に飛んでフローティング広告を見ることはありません。

ボクの検証した範囲では、システム上、完全に Seesaa 広告を非表示にする唯一の方法は、スマートフォン版を無効にすることです。唯一非表示にできなかったフローティング広告を含め100%すべての Seesaa 広告を消すことができます。その方法はこちらの投稿を参考にしてください。

Basic テンプレートは悪くない

今回、コメント頂いたので Basic を改めて見た印象は悪くないです。 操作性も悪くないし、スマートフォン用のサイトをここまで独自にカスタマイズはできません。HTML5 で書かれているのでサイトを表示してソースを確認しながら HTML5 の書き方や Seesaa のアウトラインの考え方も真似できます。

ボクはすべてのアクセスをデスクトップ版に飛ばしているのでスマホ版テンプレートは使いませんが、Basic シリーズはとても魅力的です。

最後に

無料ブログの広告表示を消すことは規約に反することがあります。技術的にできるということをご紹介しましたが、広告の非表示化を推奨するものではありません。従いまして、実装することでのブログ削除、アカウント停止、その他の不利益に対しては一切責任を負いません。自己責任でお願いします。


※コード変更を含めた最新版の追記はこちらの記事をご覧ください。(2014年5月28日)

更新日:
Sponsored Link

この記事へのコメント

5件
先日はありがとうございました。
ぜひレスポンシブのCSSの書き方を記事にしていただきたいです。
at
コメントありがとうございます。
なるべくご期待に添えるようにしますが、ボクのSeesaaブログをレスポンシブに移行する作業に時間がかかってます。テンプレートがまちまちなものですから。そのうちに共通項が見つかってくると思いますので、なるべく急ぎます。
echo at
管理人さま、お世話になります。
iPhone5ユーザーのYasuと申します。

削除したはずのスマホ用広告が表示されるようになってしまい、非常に困っていたところでしたので、コチラの記事が大変参考になり、助かりました。
どうもありがとうございます。ただ・・

14'0702現在、記事のとおりにスタイルシート編集してみたのですが、まだ広告表示されてしまいます。
状況は下記の通りです。

<トップページ>
4. 記事下ナビ直下の 320 x 100 広告
5. フッターの 300 x 250 広告

<記事ページ>
2. 記事ページでのタイトル直下テキスト広告
3. 記事ページでの記事最後(ブックマーク直下)のテキスト広告
5. フッターの 300 x 250 広告

お忙しいところ、大変恐縮ですが、もし対応法がお解りになりましたら、改めてご紹介頂けると大変ありがたいです。
それでは失礼致します。
Yasu at
Yasu さん、コメントありがとうございます。

まず最初にごめんなさいしちゃいますが、Seesaa ブログ スマホ版の広告を消すことに関しては「いたちごっこ」なのでもう更新はしていません。そこをご理解頂いた上で、ボクが適用している2014年6月5日現在のスマホ広告を消すための CSS を参考にしてみてください。
http://no-ad.up.seesaa.net/css/nodisplay.css

ちなみに、これを適用した basic テンプレートはこちらのサンプルブログで確認できます。
http://no-ad.seesaa.net/

スマホ版をパソコンで見ると amoad.com のフローティング広告 320 x 50 が表示されますが、スマホだと表示されません。ただ、ボクはアンドロイドユーザで、アンドロイド+ドルフィンブラウザ(ユーザーエージェントをiPhone)の環境なので、iPhone から見ると広告が表示されているかもしれません。

nodisplay.css をそっくりそのまま CSS にコピペして広告が表示されるかどうか確認してみてください。
できれば、結果を教えて頂けるとありがたいです。
広告消しについては更新しないとは思いますが、1つでも広告が表示されるとあらば消したい衝動が燃え上がる可能性もあります。
echo at
管理人さま、こんにちは。
iPhone5ユーザーのYasuと申します。

さっそく対応して下さったのに、お返事遅くなってすみません。
この度は本当にどうもありがとうございました。

結果はというと・・

一部が消えて一部が残りました。

たしかに見本として紹介して下さったサンプルブログでは、キチンと全て消えているのに不思議でなりません。

「関連記事」の下に追加される「PR」とページ下のどでかいバナーが残ってしまいました。

私としては残念な結果だったのですが、管理人さまにはお忙しい中、ご対応頂き本当にどうもありがとうございました。
Yasu at
コメントをどうぞ
お名前:[必須入力]

メールアドレス:

ホームページアドレス:

コメント:[必須入力]

Sponsored Link