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

このブログでボクは広告を消すのではなくて強制的にPC版へ飛ばしてしまう方法を紹介してきました。複数の記事に亘ってるし、ちょっと説明が中途半端だったので Seesaa ブログスマートフォン版の広告の問題を一気に解決する方法を整理してみます。

ここで提案するのは、スマホ版にはアクセスさせないためにでPC版テンプレートをレスポンシブデザインに変える方法です。しかもカンタンに。

カスタマイズの前に必ずお読みください

最初にアクセスのパターンを少し整理します。ブログ閲覧者の方々がスマホでアクセスするかパソコンでアクセスするかによって、表示に使われるテンプレートが変わります。

スマホやタブレット、ゲーム端末などからのアクセスはスマホ版テンプレート。パソコンからのアクセスはPC版テンプレート。何もカスタマイズしていなければアクセスする機器によってテンプレートは固定。

今回のカスタマイズは、スマホからのアクセスでもスマホ版は表示させずにPC版を表示させるという試みです。

スマホは表示幅が狭いのでそのままPC版テンプレートで表示させたら文字が小さくなるか、表示できずに横スクロールバーが出るかのいずれかになる。そこでスマホでもPC版テンプレートの表示を最適化するためにレスポンシブデザインにカスタマイズするという流れです。

もくじ

Sponsored Link

2つの方法から選択してください[2015年6月7日追記]

スマホ版主要ページから全ての広告を非表示にするカスタマイズ方法を公開しました。難しいカスタマイズは苦手というときは、スマホ版の広告を消すカスタマイズでお悩みを解決して下さい。
» Seesaaスマホ版Basic/Photoテンプレート究極のカスタマイズ

トップページ、記事ページなどの主要ページ広告は排除できますが、タグページなどカスタマイズできないページがあって100%ではありません。ひとつ残らず完璧に広告を非表示にするにはPC版レスポンシブ対応しかありません。広告100%消しのときはこのまま進んで下さい。» 免責事項

ここでご紹介するのは右サイドバーのテンプレートだけです。左サイドバーはレスポンシブにすると記事より上に来るのでユーザビリティが恐ろしく低下します。また、両サイドバーは左サイドバーを非表示にする必要があるので簡単に解説できません。左サイドバー、両サイドバーをレスポンシブ対応にする方法は「jQueryで左サイドバーを移動して簡単にレスポンシブ対応にする方法」で解説しています。

それからテンプレートに使われているヘッダーやサイドバータイトルなどの背景画像、ブログタイトル、ブログ詳細説明などなど CSS でレイアウトの微調整しないといけません。細かい部分を調整するのは結構時間が掛かる作業ですからここでは割愛です。

とにかく暫定対応レスポンシブですから。

右サイドバーテンプレートを使っていて上記を了解された方のみ次のステップに進んでてください。

スマホ版をPC版へ強制的に飛ばす

取り急ぎやることは2つだけしかありません。

1. スマホ版をPC版へ強制的に飛ばす
2. PC版のテンプレートをレスポンシブ対応にする


まずスマホ版からPC版に飛ばすやり方は、「Seesaaブログのスマートフォン版を無効にする方法」で投稿しましたが読み返したら恐ろしくなるくらい分りにくい。要するにやっていることは上記の2項目だけなんです。

スマートフォン版にコンテンツを追加

・スマートフォン版のデザインで自由形式コンテンツをヘッダーに追加
・下記のコードを貼り付ける
・この自由形式を残しあとはすべてゴミ箱へ

<style>
body {display:none}
</style>

<script>
document.cookie = 'force_pc=1; max-age=157680000; path=/';
document.cookie = 'force_sp=0; max-age=157680000; path=/';
var url = location.href;
document.write('<meta http-equiv="refresh" content="0; URL="' + url + '">');
</script>

本来、コードの先頭にある style はスマホ版 CSS の body に書きますが、最も簡単な方法ということで。

試行錯誤の上、この meta refresh で 301 リダイレクトにしています。これが一番安定しています(逆に言えば不安定だと永久ループです)。

スマートフォンのデザイン変更は以上でおしまい。

PC版テンプレートをレスポンシブデザインにカスタマイズ

カスタマイズと聞くと引くかもしれませんが、取りあえずコピペでできますから頑張ってください。

テンプレートをカスタマイズしているときに失敗してサイドバーが記事の下に落ちてしまったことありませんか? ざっくり言えばあれがレスポンシブの状態です。

ここでは敢えて失敗の状態を再現することでレスポンシブデザインにします。

CSS の編集

先に CSS を編集してレイアウトが崩れないようにしておきます。
デザイン > PC > デザイン設定 から適用しているデザインを編集モードで開きます(ここで必ず CSS をメモ帳などバックアップにコピーしておいてください)。

CSS の最後に下記を貼り付けます。2015年6月07日更新

先頭にSeesaaフローティング広告を下に潜り込ませるため #container に z-index を設定しています。テンプレートをカスタマイズしていて一番外枠のブロックが#container ではないときはテンプレートに併せてCSSを修正してください。ちなみにz-indexは無くても広告は消えると思いますが将来の変更に備えて念の為に追加しています。

下の方の @media screen and ... がメディアクエリでこれは必要です。上の方のパートは既に記述があるようだったらダブりを削除してください。

CSS の編集は以上でおしまい。

HTML の編集

デザイン > PC > HTML と進み適用してる HTML を編集モードで開きます(ここで必ず HTML をメモ帳などにバックアップコピーしておいてください)。

上の方の <meta name= で始まるメタデータの記述にビューポートを追加します。

viewport の追加

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=2.0">

Viewport については、時間があるときにレスポンシブ計画の記事もご参照ください。

HTML 編集の作業は以上です。
これですべてのカスタマイズは完了しました。

暫定対応なんちゃって版ならコレだけで十分ではないでしょうか。PCならブラウザの幅を狭めて行くと 768px 以下でサイドバーが落ちます。スマホからの閲覧であれば最初からスマホ仕様のレスポンシブです。

メディアクエリを少し拡張

CSS に追記したメディアクエリを少し拡張する例を挙げます。
全ての Seesaa ブログテンプレートに対応することはできないので、代表的なバナー(banner)の背景画像、ブログタイトル(h1)、サイドバータイトル(sidetitle)の背景画像だけ、少し見栄えを整えたものです。

@media screen and (min-width:0px) and (max-width:768px) {
#container, #banner, #content, .blog, .blogbody, .text, #links, .side, #footer {overflow:hidden;}
#container {width:100%; margin:0 auto; padding:0;}
#banner {width:100%; height:50%; margin:0; padding:0 2%; background-size:cover;}
h1, h1 a, h1 a:visited {margin:0; padding:10px 0;}

#content {width:96%; margin:0; padding:0 2%;}
#links {width:96%; margin: 2em auto; padding:0 2%;}
.blog {width: 100%;}
.blogbody {font-size 16px;}
.sidetitle {background-size: 100% 100% !important;}
}


背景画像をレスポンシブに対応させるには、background-size を使います。表示画面内に収める一番簡単なオプションは cover を使うこと。contain やパーセンテージは調整が結構面倒です。

サイドバータイトルの背景画像も同様に background-size ですが、こちらはパーセンテージを使い幅の 100% で納めます。

まとめ

  • 最も簡単なレスポンシブカスタマイズです。
  • スタイルシートのメディアクエリでは 768px をブレイクポイントとしています。
  • iPhone など主要スマートフォンで表示に違和感はありません。
  • 768px だと iPad や Google Nexus 7 などタブレット縦持ちでもサイドバーは落ちてます。
  • タブレット横持ちだと PC と同じ右サイドバーのレイアウトで表示されます。

上のやり方がレスポンシブデザインだと言ってしまうと専門の方々から怒られます。超ナンチャッテレスポンシブであることはご理解ください。

ところで、スマホ版のクリックが効かなくなったのはボクだけですか?
広告を消す情報発信者だけのペナルティなら良いのですが。HTML を読んでクリックを無効するモジュールが組み込まれたのであれば影響する範囲は広い。もしペナルティ発動なら、これ結構大変です。

もうスマホ版テンプレートのことは忘れましょう。広告だらけのブログをみて訪問者が直帰するんじゃないかとか、タイトル下や記事下の広告ばかりクリックされて自分のアフィリエイトリンクのクリック率が落ちているんじゃないかとか。考え始めたらキリがないです。

レスポンシブにカスタマイズして、あとは記事を書くことに時間を費やしたほうが生産性も収益も上がりますよね。

スーパー超シンプルテンプレート

シーサーブログのアドセンス向けテンプレートを作ってみました。

  • スマホからのアクセスをPC版へ強制的に飛ばします
  • もう広告だらけのスマホ版テンプレートのことは忘れてしまってオッケー
  • PC版では完全レスポンシブで iPhone, Android からの閲覧にも最適化済み
  • アドセンス最適化済み
  • etc.

シーサースマホ版の広告を消すことにウンザリというシーサーブロガーの方にオススメです。
» Seesaaブログ スーパー超シンプルテンプレート

最終更新日:
Sponsored Link

この記事へのコメント

38件
とても有益な情報ありがとうございます。
スマホ版の広告に嫌気がさしてなんとかしたいとおもい検索していたところ貴サイトにたどりつきました。

上記のとおり変更してみたのですが、うまくいきませんでした。右カラムのテンプレートなのですが、
seesaaブログから提供されているテンプレートではないためなのか、スマホでみたときに右カラムが落ちてきません。

seesaaブログから提供されているテンプレート超シンプルに変更して試してみたらうまくいきました。
ただ、こちらは更新を押すごとに、また、ページを変わるごとにブログが縮小され左側に細長くよってしまいます。
ダブルタップするとうまく幅も調整されて見やすくなるのですが・・

これはどうすることもできないのでしょうか?


この現象についてもし何かわかればお教えいただけたら幸いです。
さくら at
さくらさん、コメントありがとうございます。
返事が遅れてすみません。

>seesaaブログから提供されているテンプレートではないためなのか、スマホでみたときに右カラムが落ちてきません。

コメントに書いて頂いた現象でどんなことが起こっているかはイメージできました。

テンプレートというかCSSを見ていないので的確にお答えできないのですが、恐らく、CSS の header とか banner とか global-navi (ヘッダーのメニュー)もしくは footer あたりで幅を900px などのように固定値で指定されているクラスセレクタがあるのではないでしょうか。

PC版の CSS で固定されていても別に問題ないので、CSSのメディアクエリーで該当の固定値を 100% などに指定しなおしてみてください。
要するに何かのパーツがサイドバーが落ちる必要のないほど余分に幅を取っているということですので。

超シンプルテンプレートに変えるとちゃんと動作するということですから、
・超シンプルにはないお使いのテンプレート固有のクラスセレクタが使われている
・そのクラスセレクタが記事中で紹介しているメディアクエリに含まれていない
・故にそのクラスセレクタが幅を利かせている
ということです。

それから広告も臭いです。
記事の「CSS の編集」あるCSS は確実に貼り付けましたか?
この中には Sessaa ブログで表示される広告を消す指定が入っています(小声)。
ボクの経験ですが、広告が一部残っていたために広告の幅でサイドバーが落ちないということもありました。本来は無いはずなんですけど。

もしブラウザが Google の Chrome であれば F12キーで Developer Tools が起動します。上から順番にコードをなぞっていくと、どこがはみ出ていて、CSS の何行目に記述してあるということまでわかります。
ボクはこれを使い始めてからテンプレートのカスタマイズが何十倍も速くなりました。大袈裟ではなく迅速かつ確実にエラーを見つけることができますから、これを機に使ってみてはいかがでしょう。

支障なければメールでこっそりブログのURLを送って頂ければちょっと見てみますが。
echo at
追記

echo >支障なければメールでこっそりブログのURLを送って頂ければちょっと見てみますが。

さすがにブログのURLはイヤでしょうから、お使いのテンプレートの配布元のURLでも。
既に消えてなくなっているということであれば、そのテンプレートの名前でも。
echo at
こちらこそ返信遅くなり申し訳ありません。

アドバイスどおりに自分で幅が固定のところをメディアクエリーの100%に追加するなどトライしてみたら右カラムが落ちました!

しかし、フッターのオレンジ部分を見るとどうもブログの右端がすこし切れているようです。(濃い赤いわく線が消えているので)

これはどうしたら良いか分かりますでしょうか?

もし可能であればお時間のあるときにでも、チェックしてただけたら幸いです。
urlはメールで送付させていただきます。
見ず知らずの方にここまでしていただいて恐縮です<(_ _)>

こちらのブログの情報は本当に助かっています。
さくら at
さくらさん、ご連絡ありがとうございます。
メールでお答えしましたのでご覧ください。
echo at
私のサイトでは、クリックは以前と変わりなく出来ます。ただ、新しいスマホ用広告が続々と出てきて、すべてを消すことができなくなり困っていました。

もうシーサーなんて使いたくないのですが、以前作ってたまたま当たったサイトがあるので、なかなか縁を切れないでいます。
HAT at
HATさん、コメントありがとうございます。

>クリックは以前と変わりなく出来ます。
そうですか。。。なんでしょうね。コードが邪魔しているんでしょうかね。

>なかなか縁を切れないでいます。
ボクは FC2 ブログと Google Blogger はすべて、Sessaa もゴミみたいなブログ以外は全部独自ドメイン+Wordpress に移植がほぼ完了しました。
FC2 は移植というより、放置してて気が付いたら全サイトが凍結されてたんですよね。もうビックリです。

もう Google ページランクも表面上は機能してませんから、Seesaa に独自ドメインを割り当てて 301 リダイレクトでページランクが復帰するのを待って・・・などと考えなくてもよさそうなので、レンタルサーバへ一気に移行ってのもタイミング的にはよろしいのかもしれませんね。

独自ドメインで Wordpress に移行した弊害は、Seesaa時代にリンクされたページが Webmaster Tools のインデックスにゾンビのように出現していることですね。
これをひたすら削除するのが日課になってます。
echo at
はじめまして。こちらのブログを参考にSeesaaブログをレスポンシブ化とスマホページから強制的にPCページにリダイレクトさせていたのですが、レスポンシブ化させたブログをスマホでみると最近になって広告が表示されてしまうようになってしまいました。

Seesaaがなにか対策を打ってきたのでしょうか・・・?
ダックス at
ダックスさん、コメントありがとうございます。

>Seesaaがなにか対策を打ってきたのでしょうか

[id*="imobile_adspotdiv"]
恐らくこれ↑ですね。
CSSを修正しました。記事中の CSS を参考にして下さい。
imobile_adspotdiv のスタイルと先頭の #container の z-index を追加すれば消えるはずです。

昨日あたりから PC でスマホ版を見ると横に拡大されるので何か変だなとは感じていましたが、今日になって画面下にフローティング広告が表示されるようになってましたね。
echo at
こんなにも早く対策方法をご教授いただけて感謝です!!無事にフローティング広告を非表示にできました!

スーパー超シンプルテンプレートも拝見したのですが、非常に素晴らしかったので使ってみようかと思っています。自分はWordPressも使っているのですが、SeesaaブログにWordpressのSEOを適用させるというのは興味深いです。これからも参考にさせて頂きますm(__)m
ダックス at
ダックスさん
広告が出ているという指摘を頂けるのはとてもありがたいです。


> SeesaaブログにWordpressのSEOを適用させる
ちょっとニュアンスが違います。
スーパー超シンプルテンプレートは All In One SEO 的な SEOの考え方を適用しているということで、All In One SEO のモジュールをSeesaaに適用するとか、そういう意味ではないです。

具体的にはSeesaaの記事作成画面の中で使っていないフィールドをカスタムフィールド的に使って meta description を手書きの説明文にしたりとか、記事以外は noindex, follow にするとか、他愛もないことです。
echo at
最近、気づいたのですが、seesaaのブログをクロームのデペロッパーツールにてスマホ表示を確認すると、ブラウザが延々読み込み中のようになり固まるようになっていました。クリックもできません。適当に他のシーサーブログを選んでも同じ症状が出ます。ただし、実際に本物のスマホでアクセスすると何も問題が起きません。シークレット・ウインドウでは問題なく動くので、クッキーが関係しているのかも。個別の事象かもしれませんが、情報共有のために一応報告しておきます。
HAT at
HATさん、お久しぶりです。

情報ありがとうございます。
ボクの環境ではその現象は出てないです。
クロームのキャッシュってことはないですかね?
デベロッパーツールで固まる現象を調べてみましたが、完全にクラッシュしたときに表示されるエラー窓が表示される件は結構報告あるみたいですが、クラッシュ手前で固まっているという報告が見つかりませんでした。

一度初期化するっていのも方法かと。
Chromeの環境バックアップ
http://mbsupport.dip.jp/mb/chrome06.htm

Chrome設定の初期化
http://www.forest.impress.co.jp/docs/news/20131106_622388.html

過去に何回かクロームがまったく起動しなくなったことがあって、その原因がキャッシュの肥大化だということを知りました。なので起動できるうちに隔週くらいでキャッシュをクリアしてます。そのたびにGoogleアカウントログインやら facebook で再認証を求められるので結構面倒臭いですけど。
echo at
こんにちは

シーサーブログを市販のレスポンシブテンプレートで
作成して、こちらのサイトを参考にして
リダイレクトの設定をしてみました。


これを Mobilizer で確認すると

広告リンク(テキストリンク)と
サイドの広告バナーがクリックできません。

もしよろしかったら対処方法を教えて下さい。

よろしくお願いします。
at
こねこさん、こんにちは

リンク先のブログをスマホ実機で開いてみました。
仰っている広告リンクも広告バナーも普通にクリックできます。
Mobilizerでダメでも実機でオッケーですから問題ないと思いますが。
こねこさんのニュースサイトをMobilizer 経由でしか見ない変人はいないでしょうし。

もしかしてコメントはボクに広告をクリックさせるための釣りでしたか?
それなら10クリック分くらいの報酬をボクに下さい(笑

P.S.
Mobilizer というツールを初めて知りました。参考になりました。
echo at
どうもありがとうございました。

実は、スマホを持っていないので
いつも Mobilizer に頼っていました。

賢威で作った方もきっと、クリックできるのでしょう。

本当にありがとうございました。

こねこ at
有用な記事をありがとうございます。
早速、適用させていただいたのですが
残念ながら、今はデスクトップ版へは飛ばず
永久ループとなるようです。
それとも私のサイトだけでしょうか?
もし、解決策がございましたら
ご教示いただけますと幸いです。
よろしくお願いいたします。
クルミット at
度々すみません。
私のスマホ(nexus5)では、
http://supersimple-template.seesaa.net/
(スーパー超シンプルSeesaaテンプレートのサイト)でも
永久ループとなってしまいます。

seesaaが対策を売ってきたということでしょうか?
クルミット at
何回も何回もすみません。
原因がわかりました。
クッキーが非表示になっていたのでした…(;´Д`)
クッキーを有効にしたら、ちゃんとPC版に飛びました。
ありがとうございます。
クルミット at
クルミットさん、コメントありがとうございます。

>Seesaaの対策

いえ。Seesaa側の対策ではなくスマホ広告の仕様の問題だと推測します。


>永久ループとなるようです。
>解決策がございましたら

残念ながら今のところ解決策はないです。今後も見つからないと思います。
なので永久ループは不可避と割り切っています。

理由は以下の4点。
1.スマホテンプレートの広告の鬱陶しさに耐えられない
2.PC版テンプレであれば、Seesaa広告は1つたりとも出さないようにカスタマイズできている
3.永久ループしても2回目からのアクセスは5年間のクッキーを読ませているので確実にPC版に飛ぶ(クッキーをクリアしない限り)
4.スマホ版テンプレートは使わなくなるので、PC版のカスタマイズ1本に集中でき時間が節約できる

断言できませんが、永久ループはスマホ版Seesaa広告のJavaScriptのループが原因と見ています。必ず起こるのではなく、例えば↓コレのように全く無反応の広告が出現したときにループしています。

「TANGANKANAN.NET って何だ?」
http://myweblogblog.seesaa.net/article/399456924.html

Seesaaスマホ広告はタイマーで切り替わっているか、1つの広告に連鎖して別の広告がリフレッシュされているかもしれません。それが広告JavaScript自体の永久ループになって、PC版に飛ばすスクリプトが実行できない。

ループする時間帯が決まっているわけでもない。
クルミットさんのコメントを見てスーパー超シンプルをスマホで見ましたが(もちろんクッキーはクリアしてから)、こちらでは開いています。

ホントウにいつループするのか見当が付かない。
でも、ループしてもなおPC版に飛ばしたいのです、ボクは。

記事中に掲載しているクッキーを読ませる単純なスクリプトに至るまで、主に読み込みのタイミングを変えた数パターンのJavaScriptを数か月掛けて検証しました。その結果、記事中のものがループしにくかったので採用しています。

Seesaaスマホテンプレについては別の記事に書きましたが、HTML5だしメニューもちゃんとしてるし、スゴク良いです。うっとうしい広告を除いては。
どうやっても消すことができなかった記事の上下にあるYahoo!広告はもう致命傷です。あんなところに広告があったら自分の広告のクリックはかなりの数もって行かれているはずです。

★★★★★★★★★★
ちなみに、スーパー超シンプルテンプレートでは、スマホ版デザインのCSSで body を display:none にしていません。ブランクにしないで「自動的に飛ぶからちょっと待ってね」コメントを表示し、(ループしているようであれば)画面下の「PC版で見る」のリンクがクリックできるようにしています。ここ1週間くらいで表示されるようになった画面下のフローティング広告も消したので、PC版で見るリンクがダマしリンクみたいになりませんし。
★★★★★★★★★★

「スマホ広告の数や非表示にする手間」と「1回目ループでも2回目以降は確実にPC版に来る」の2つを天秤に掛けて判断すればよいのかなと。
echo at
>クッキーが非表示になっていたのでした…(;´Д`)
よ、よ、よ、よかったですね...とと飛んで。
echo at
お世話になります。
スマホで1箇所消えない広告が増えてしまいました。
スマホで見た時に画面下に表示されます。
chromeのデベロッパーでも確認できます。
何とか消す方法は無いでしょうか。
画面上にもってくるボタンにかぶっちゃって非常に鬱陶しいです・・・

くまのみ at
くまのみさん、こんにちは。

記事中のスタイルシートを2015年4月21日に更新して以降、ボクの管理しているSeesaaブログでは新しい広告は確認できていません。もう一度、4月21日版のCSSとくまのみさんのCSSを比較してみてください。

ただ、気になっていたことが1点あります。
20150424更新版[id*="imobile_adspotdiv"]のmargin-topを-100px としていましたが、たまにフッターの下に隙間ができる現象がありました。

これとは別に今回 Seesaa 標準スマホ版テンプレを見たところ、imobile_adspotdiv1 という 1 の付いた別種の画面下フローティング広告がありました。(但し、PC版では本日現在未確認)。

この2点により[id*="imobile_adspotdiv"]のmargin-top値修正と、[id*="imobile_adspotdiv1"]の新規追加しました。

記事中のコピペ用スタイルシートは20150507版として修正済です。
at
おせわになります。
最新のものに差し替えましたが依然表示されます。
画面下のフローティング広告です。
私もimobile_adspotdiv1については気づいていたので、追加したのですがそうすると別の広告が表示されてきます。
複数の広告がローテーションするような構造になっているようで、ひとつ潰しても別の広告が表示されるような形になっています。
埋め込まれるDIVタグにはIDが振られていない時もあります。
これらはスマホ実機かchromeのデベロッパーモードを利用することでPCでも確認が出来ます。
「とある秘密ブログの更新うぇぶろぐ」さんをチェックしたところ、どうも画面下よりも更に下に広告を飛ばして見えなくしているような表示になっています。
(Googleデベロッパーツールのデバッグ画面で見るとキャンバスの下にフローティング広告の枠が薄っすら表示されているため)
この方法を教えてもらえればありがたいです。
くまのみ at
くまにみさん、こんにちは。

記事中のCSSを再度見直してみました。
4月21日の更新で #container に z-index 999を追加した際、既存の z-index 2 を残したままでしたのでz-index 2 は削除して、(原則)アルファベット昇順にソートしました。見つけやすいように。
くまのみさんのスタイルもチェックしてみてください。

画面下のフローティング広告は z-index より margin-top をマイナスで下方に追いやる方がメインだと考えているので結果は変わらないかもしれませんが。


>この方法を教えてもらえればありがたいです。
このブログに適用しているスタイル以外には特に何もやってないし、手元に比較材料がないので、申し訳ないのですが思いつきません。

脳裏をよぎるのはCSS変更後の、
・Chrome のキャッシュクリア
・Ctrl + ブラウザ更新で強制再読み込み
・Internal Server Errorが出るようなSeesaa自体の不安定な時間帯のコード更新は避ける
くらいです。


最近気になっているのが Internal Server Errorで、更新にやたら時間が掛かり始めて更新したのに反映されない→500エラーが出る→コードを書き換える→直ぐに反映されない→コード改悪→知らないうちにデグレードの悪循環。


>Googleデベロッパーツールのデバッグ画面で見るとキャンバスの下にフローティング広告の枠が薄っすら表示されている

記事中のCSSを適用しているボク管理のSeesaaブログでの再現性のある動きをキャプチャしたので確認してみてください。
https://youtu.be/MQtd1RC0mGg

動画上では動作が見えませんが、画面下までスクロールダウンしてからマウスのホイールで何回かスクロールダウンを繰り返しています。

画面領域よりも下にびよよんと伸びているのは margin-topマイナスでずっと下にあるフローティング広告が表示されている瞬間だと思います。

この下に向かうびよよんが表示されないということでしょうか?
echo at
わざわざ有り難うございます。

>この下に向かうびよよんが表示されないということでしょうか?
おそらくそうなのかもしれません。

ただ1点、ものすごく嫌な予感がするのが、私が持っているもう一つのSeesaaアカウントでは画面下のスマホの広告は表示されていないということです。

そのサイトではソースを見る限り、htmlの終わりがechoさんと同じようになっているのですが、広告が出る方のブログはhtmlタグの最後に余計なタグが追加されています。

もしかしたらなのですが、ペナルティで余計に広告が表示されるように強制表示するタグが最後に埋め込まれているのかもしれません。
前にseesaaで作っていたブログも強制的に広告が記事本文の頭に入るようにされたことがあります。エグいことしやがります。

PR3ついてるので今更引っ越しづらいのではありますが……正直Seesaaには嫌気が差してきたのでWP等で引っ越すことも考えます。
ありがとうございました。
くまのみ at
くまのみさん、こんにちは。

>WP等で引っ越すことも考えます。
引っ越しをおススメしますよ。
もうPRは表面上は更新されないし、アフィリエイトの競合相手じゃない限り一般の閲覧者はPRは気にしないし、第一、プラグインやPR確認のツールを使わないとPRは見えないし。

基本、Seesaa+独自ドメインは301リダイレクトのはずなので、WP等に移植する前にSeesaaに独自ドメインを割り当てドメインにチカラを付けてからって、以前はそういうやり方で引越ししてましたが、面倒なだけでリソースも引き継がれている気配がないのでやめました。
最近は一気にWP+独自ドメインに移植してます。

ボクは旧Seesaaブログの bodyタグを display:none にして、記事は本文だけ残し、追記は消して、追記の先頭に meta refresh 0秒で新しいWPの記事URLだけ書いて飛ばすようにしています。PR3だと記事数も多いから大変かもしれませんが、リンクもたくさん貼られているはずなので Sessaa(のURL)は生きている状態にしておかないといけないし。

head に JavaScript 書いて飛ばすやり方がググれば出てきますが、どうもあれ上手くいかないんですよね。301リダイレクトになりますって謳ってますけど眉唾です。リダイレクトチェックのオンラインツール数種類で確認すると何度確認しても301になってない。よくて302で、ほとんどリダイレクトが検出すらされないんですよね。ちゃんと飛ぶんですけど。

300記事くらいだったら頑張って記事ごとにmeta refresh 書きます、ボクは。meta refresh は head 内だけってことなくて、ちゃんと301でリダイレクトされます。

ボクのブログに限って言えば無料ブログのPR4くらいまでだったら、引っ越し後のWPでPR0の窓すら開いてないブログの方がよっぽどアクセスが増えます。FC2はもうヤベーんじゃないかななんて予感もあるし、Seesaaだってどんな風にサービスを変えてくるか分らないし。ドキドキ、イライラするのは精神衛生上よくないですわ。


>私が持っているもう一つのSeesaaアカウントでは画面下のスマホの広告は表示されていない

WinMerge っていうテキストを比較するフリーソフトがあるんですけど、バージョン管理がおかしくなったときや、どこを修正したのかわかんなくなっちゃったときなど便利です。
http://winmerge.org/

テキストファイルを2つの窓で開いて差異を探してくれます。広告が出るブログと出ないブログのソースを並べて比較して見ると原因が分るかもしれません。
もうやっているということだったらすみません。
echo at
くまのみさん、再びこんにちは。

ちょっと閃いたんですが、HTMLのSeesaa広告関連のJSを切ってないってことはありませんか? デフォルトHTMLにある ad_plugin.js

このJSは記事下にSeesaa広告を出すものだと思いますが、それ以外も呼んでるかもしれないですよね。

それと設定画面の記事設定と広告設定、それから記事毎の「広告の表示」。
これらに違いはありませんか?
HTMLソースの common footer 辺りのscriptが違うとしたら、この辺↑ではないでしょうか?
echo at
そうですか。一気に移行ですか。
私も最初はドメインをseesaaに設定して徐々にって思ってましたが、一気にやっちゃっていいんですね。
なるほどmeta refreshで移行後に記事にリンクさせちゃうんですか。たしかにこれだと消さなくていいですね。
リンクされてるページを消しちゃったら、リンクしてくれてるサイトさんも困るだろうし、経由して情報探してる人も困るだろうなぁと思ってたので、この方法使わせてもらいます。

ad_plugin.jsですが、取っちゃってます。
現状、スマホでページを見るとスマホでPCのフルを無理に見ようとした時みたいに、ページのもう一つ外に自動で枠が作られて、画面下にフローティング広告が入るような挙動をしているようです。
なので、右に少し予期していない隙間ができています。
ただし見た目は普通にレスポンシブされてるという不思議な状態です。
フローティング広告は発見次第ワイルドカード指定でidかclassで消せるものは消してます。
javascriptのdom使ってページ表示完了後に最下部のdivを消しこむようにスクリプトを書いてみましたが無駄な抵抗でした……。

足掛け二桁年使ってたシーサーにこんな形で決別するとは思っても見ませんでした^^;
アドバイスありがとうございます。
くまのみ at
くまのみさん

健闘をお祈りします。

Seesaa広告はクラスなしの divだけとか、span だけとか、ハードコーディングでスタイルを書かれたりとか、もうね。手が出ません。


>経由して情報探してる人も困るだろうなぁと思ってたので
旧Seesaaブログと新独自ドメインブログのデュプリケーションだけですよね、気にするのは。いつどのタイミングで旧Seesaaブログのインデックスを削除するか悩むところです。

これもボクは一気です。
301リダイレクトの考え方と同じように、徐々に徐々にというやり方で新ブログでインデックスされたページを見て、それに対応する旧ブログのインデックス削除をウェブマスターツール(WMT)から申請する。こうやってましたが、やめて一気です。

もう新ブログを開設したらWMTで旧Seesaaのインデックスもキャッシュもルートごと削除依頼しちゃいます。記事毎の301リダイレクト処理はあくまでも外部サイトに貼られたリンク対策のためだけ。

インデックスがWMT上で確認できるまでにタイムラグがあるはず。実際にはWMTに表示されるよりもずっと前に処理が終わっているんじゃないかと。インデックスされてないから、まだ重複コンテンツになっていないはず、とはならないような。とっくにコピーブログ認定されて新ブログのインデックスに障害が出るよりは、Seesaaは無かったことにしてキレイさっぱり。ゼロの状態にして新ブログに注力。

旧Seesaaのインデックスが完全に削除されたことをWMTで確認することを待たずに、もう新ブログのメンテに完全移行。とにかくWMTのサイト申請系はフル活用してクローラを呼んでインデックスさせることに集中してます。グーグルカスタム検索も作って、そこにあるインデックス申請も併用します(ま、WMTと根っこは同じでしょうけど)。とにかくクローラを呼ぶことなら何でもすると。

https://www.google.com/webmasters/tools/submit-url
これ↑で記事1件1件インデックス申請したりもします。

http://totalping.com/
これ↑でping打ちまくりますし。

SEOはよく分からなくて、これまでいろいろ小細工をしながら実験しましたけど、変な色気を出すよりも、こと引越しに関してはシンプルにズバッと処理したほうが結果は良いです。(echo比)

いずれにしても、インデックスがなくなっても旧Seesaaブログは死守、WMTのサイト認証も残しておくことです。FC2だと301リダイレクト設定のみのブログはあっという間に削除されたりしますけど、Seesaaはそのへんが甘...(ry

以上、あくまでも個人的な意見です。
echo at
はじめまして、大変有用な情報を見せて頂き助かりました。

ただ、私はスマホ環境がなくて、firefoxのエニュレータでの確認しかできないのですが、本日から「imobile_adspotdiv1」の広告が表示されるようになってしまいました。

発生条件は
・iphone3のエミュレータでページを表示
・width=768px以上(?)
です。

上の記事中に書いてくださっているCSSコードには既に対策が入っていると思うのですが、広告が表示されてしまいます。

エミュレータ独自の動作かもしれませんし、高解像度スマホでないと表示されないはずなのでレアケースかもしれませんが、お時間があるようでしたら、済みませんが確認してみて頂けないでしょうか。
ネモ at
ネモさん、こんにちは。

imobile_adspotdiv1 広告は記事更新でCSSに追加していますが、既出の imobile_adspotdiv(1なし)スタイルでワイルドカードを使って定義しているので本来は要らないんです。

もしimobile_adspotdiv1(1あり)が表示されるのであれば、[id*="imobile_adspotdiv"]のスタイルを再チェックしてみましょう。

margin-top:-9999px!important;
position:relative!important;

この2つは必須です。
このON/OFFで広告表示・非表示の再現性がありますから間違いないです。

margin-top がクリティカルでこれが無いと広告が出ます。
position relative は広告の高さ分の余白を開けないために必須です。

この2つ以外だったらちょっと原因は分りません。
echo at
早速のご返答ありがとうございます。

試しに、CSSコードの内の

[id*="imobile_adspotdiv"]{(中略)position:relative!important}

の部分の最後に「;」だけ加えた

[id*="imobile_adspotdiv"]{(中略)position:relative!important;}

に変更したところ、広告がでなくなったのですが、そこを元に戻しても広告が表示されなくなりました。

なので、エミュレータか私のPCの環境の問題で、何か変な状態になっていたようです。詰まらないことでお手数をおかして申し訳ありませんでした。

お見苦しいようでしたら前回のコメント共々私のコメントは削除しておいて下さい。

スマホ広告に困っていたので、この記事のおかげで助かりました。更に詰まらない質問にご返答まで頂き、本当にありがとうございました。
ネモ at
ネモさん

全然お見苦しくないです。
同じ現象で悩んでいるユーザの助けになりますし。

キャッシュやクッキーとかそのあたりがクサいですけどね。ボクも画面のど真ん中にフローティング広告が固定されてぶっ飛んだことありましたけど、キャッシュとクッキーをクリアして直りました。

Firefox 以外にも、IEとかChrome にもデベロッパーツールがあります。
みんな F12キーで出てきます。

IEのデベロッパーツールにもエミュレーションがあって、画像のheight autoをIEのバージョンによってどんなふうに違うのか確認するときに大変役に立ちました。
オンラインツール15選で紹介したオンラインのレスポンシブ確認ツールも便利ですよ。
http://myweblogblog.seesaa.net/article/399456945.html
echo at
記事大変参考にさせていただきました。
貴重な情報誠にありがとうございます。
早速私のサイトでも試してみましたが、スマホでのレスポンシブデザインでの表示がどうしても右寄りになってしまうのですが、もう少し中央に寄せることはできませんでしょうか。

tensyokudokuritu.seesaa.net

お忙しいところ誠に恐れ入りますが、教えていただきますと助かります。
何卒、お願いします。
くわっぴ at
くわっぴさん

ブログの見た目は個々の好みですから、ボクがくわっぴさんのブログを修正するならこうするかもしれないという参考例まで。

これ↓をCSSの最後にコピペするとボクのお好みのデザインになります。

@media screen and (min-width: 0px) and (max-width: 768px){
#banner{background-size:contain;height:105px}
#banner h1{font-size:20px;text-align:center}
#banner .description{display:none}
#content{width:100%;margin:0;padding:0}
.blog{padding:0}
.blogbody,#links{width:96%;padding:0 2%}
.text{padding:0}
.text img{max-width:100%}
#comment{padding:0 2%}
#trackback{padding:0 2%;margin:25px 2%}
}

padding 左右 2% はお好みで変えてください。


あとValuecommerceの広告ですけど、レスポンシブじゃないので728px広告はみ出ますよね?
ここだけの話ですが、ボクはiframeのコードを全部使わずにJavaScript非対応ブラウザ用に追記されている noscript で囲まれた部分だけを採用してます。

予めメディアクエリで img{max-width:100%}と指定するので noscript部分の広告バナーは常に画面に対して100%に実質縮小されハミ出ることがありません。ちょっとグレーなやり方なので詳しくは書きませんけど。
echo at
管理人さん
早速、ご回答頂き誠にありがとうございます。
教えていただいた通りにしたところ、奇麗に表示されるようになりました!
本当にありがとうございます!

最近シーザーでのスマホ表示が広告ばかりで困っていたましたので、本当に助かりました。
有益な情報誠にありがとうございます。

確かにバナーはみ出ちゃいますね。。。。
iframe部分を削除したのですが、こちらはうまくいきません。。。
もしくはスマホ用の広告とPC用の広告とを分けて表示させるのもありかなと思っています。

色々と試してみたいと思います。

くわっぴ at
くわっぴさん
よろしゅうございました。
echo at
コメントをどうぞ
お名前:[必須入力]

メールアドレス:

ホームページアドレス:

コメント:[必須入力]

Sponsored Link