このブログでボクは広告を消すのではなくて強制的にPC版へ飛ばしてしまう方法を紹介してきました。複数の記事に亘ってるし、ちょっと説明が中途半端だったので Seesaa ブログスマートフォン版の広告の問題を一気に解決する方法を整理してみます。
ここで提案するのは、スマホ版にはアクセスさせないためにでPC版テンプレートをレスポンシブデザインに変える方法です。しかもカンタンに。
カスタマイズの前に必ずお読みください
最初にアクセスのパターンを少し整理します。ブログ閲覧者の方々がスマホでアクセスするかパソコンでアクセスするかによって、表示に使われるテンプレートが変わります。
スマホやタブレット、ゲーム端末などからのアクセスはスマホ版テンプレート。パソコンからのアクセスはPC版テンプレート。何もカスタマイズしていなければアクセスする機器によってテンプレートは固定。
今回のカスタマイズは、スマホからのアクセスでもスマホ版は表示させずにPC版を表示させるという試みです。
スマホは表示幅が狭いのでそのままPC版テンプレートで表示させたら文字が小さくなるか、表示できずに横スクロールバーが出るかのいずれかになる。そこでスマホでもPC版テンプレートの表示を最適化するためにレスポンシブデザインにカスタマイズするという流れです。
もくじ
２つの方法から選択してください[2015年6月7日追記]
スマホ版主要ページから全ての広告を非表示にするカスタマイズ方法を公開しました。難しいカスタマイズは苦手というときは、スマホ版の広告を消すカスタマイズでお悩みを解決して下さい。
» Seesaaスマホ版Basic/Photoテンプレート究極のカスタマイズ
トップページ、記事ページなどの主要ページ広告は排除できますが、タグページなどカスタマイズできないページがあって100%ではありません。ひとつ残らず完璧に広告を非表示にするにはPC版レスポンシブ対応しかありません。広告100%消しのときはこのまま進んで下さい。» 免責事項
ここでご紹介するのは右サイドバーのテンプレートだけです。左サイドバーはレスポンシブにすると記事より上に来るのでユーザビリティが恐ろしく低下します。また、両サイドバーは左サイドバーを非表示にする必要があるので簡単に解説できません。左サイドバー、両サイドバーをレスポンシブ対応にする方法は「jQueryで左サイドバーを移動して簡単にレスポンシブ対応にする方法」で解説しています。
それからテンプレートに使われているヘッダーやサイドバータイトルなどの背景画像、ブログタイトル、ブログ詳細説明などなど CSS でレイアウトの微調整しないといけません。細かい部分を調整するのは結構時間が掛かる作業ですからここでは割愛です。とにかく暫定対応レスポンシブですから。
右サイドバーテンプレートを使っていて上記を了解された方のみ次のステップに進んでてください。
スマホ版をPC版へ強制的に飛ばす
取り急ぎやることは２つだけしかありません。
1. スマホ版をPC版へ強制的に飛ばす
2. PC版のテンプレートをレスポンシブ対応にする
まずスマホ版からPC版に飛ばすやり方は、「Seesaaブログのスマートフォン版を無効にする方法」で投稿しましたが読み返したら恐ろしくなるくらい分りにくい。要するにやっていることは上記の２項目だけなんです。
スマートフォン版にコンテンツを追加
・スマートフォン版のデザインで自由形式コンテンツをヘッダーに追加・下記のコードを貼り付ける
・この自由形式を残しあとはすべてゴミ箱へ
本来、コードの先頭にある style はスマホ版 CSS の body に書きますが、最も簡単な方法ということで。<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>
試行錯誤の上、この meta refresh で 301 リダイレクトにしています。これが一番安定しています（逆に言えば不安定だと永久ループです）。
スマートフォンのデザイン変更は以上でおしまい。
PC版テンプレートをレスポンシブデザインにカスタマイズ
カスタマイズと聞くと引くかもしれませんが、取りあえずコピペでできますから頑張ってください。
テンプレートをカスタマイズしているときに失敗してサイドバーが記事の下に落ちてしまったことありませんか？ ざっくり言えばあれがレスポンシブの状態です。
ここでは敢えて失敗の状態を再現することでレスポンシブデザインにします。
CSS の編集
先に CSS を編集してレイアウトが崩れないようにしておきます。
デザイン ＞ PC ＞ デザイン設定 から適用しているデザインを編集モードで開きます（ここで必ず CSS をメモ帳などバックアップにコピーしておいてください）。
CSS の最後に下記を貼り付けます。2015年6月07日更新
下の方の @media screen and ... がメディアクエリでこれは必要です。上の方のパートは既に記述があるようだったらダブりを削除してください。
CSS の編集は以上でおしまい。
HTML の編集
デザイン ＞ PC ＞ HTML と進み適用してる HTML を編集モードで開きます（ここで必ず HTML をメモ帳などにバックアップコピーしておいてください）。
上の方の <meta name= で始まるメタデータの記述にビューポートを追加します。
viewport の追加
Viewport については、時間があるときにレスポンシブ計画の記事もご参照ください。<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=2.0">
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ブログ スーパー超シンプルテンプレート