黄昏のスペシャルパンダのブログ

Seesaaブログは無料で大変便利なのですが、スマホで見ると広告が鬼のように出てくるので、どうにかしたくて試行錯誤していました。

今回は、スマホでも無理やりPC向けサイトを表示するようにしてみました。
ただ、動きがいまひとつわからない部分があるので、もしかしたら人によって無限リロードしてしまうかもしれません。

なお、このやり方は旧デザインシステムでの手順です。（このブログが旧デザインシステムなので）
新デザインシステムでも基本的に同じですが、メニュー名など微妙に違う部分があります。

経緯

上で書いた通りですが、Seesaaブログをスマホで見ると広告がたくさん出てくるので、スマホでも無理やりPC向けサイトを表示する方法を模索しました。

調べてみると同じようなことされている方が結構いらっしゃったのですが、試すと、
・最初にアクセスしたときに、無限リロードが発生することがある
・Google Search ConsoleでURL検査をするとエラーになる
という現象が私の環境だと起きたので、いろいろと試行錯誤しました。
と言っても半分以上は、他の皆さんのやり方を真似しています。

今でも裏の動きがいまひとつわからない部分があるため、これでもちゃんと動く確信はありません。
もしかしたら人によって無限リロードしてしまうかもしれません。

Google Search Consoleのエラーについて

Google Search ConsoleのURL検査で「公開URLをテスト」を実行すると、なぜか下記エラーになるという現象が発生していました。
今は解決しています。

「エラーが発生しました
　問題が解消しない場合は、数時間後にもう一度お試しください」

解決手順

やることは大きく３つです。
(1)PCページに強制移動させる
(2)移動前に一瞬見える画面を非表示に
(3)移動後の「スマートフォン専用ページを表示」を消す

(1)PCページに強制移動させる

「デザイン」→「スマートフォン」→「コンテンツ」で、
「ヘッダー」のところに、左の「自由形式」をドラッグ＆ドロップします。
他にあるやつは全部削除。（↓の感じに）


ドロップした自由形式の歯車ボタンをクリック。

 以下のスクリプトを記述
<script>
document.cookie = 'force_pc=1; max-age=15768000; path=/';
document.cookie = 'force_sp=0; max-age=15768000; path=/';
document.write('<meta http-equiv="Pragma" content="no-cache">');
document.write('<meta http-equiv="Cache-Control" content="no-cache">');
document.write('<meta http-equiv="Expires" content="0">');
var url = location.href;
document.write('<meta http-equiv="refresh" content="0; URL=' + url + '?from_sp">');
</script>

補足説明

・１、２行目は、SeesaaブログでPC向け表示を強制するCookieの設定のようです。
普通にスマホで色々見てたら「スマートフォン専用ページを表示」みたいなリンクが勝手に出てきて、そのリンクがこんな感じで1と0が逆になってたので、そういう意味だと理解しています。
max-ageの桁数も要注意です。私の環境だと桁を一つ増やすと変な動きをします。

・３～５行目は、キャッシュを無効化しています。
意味あるかわかりませんが、この手の処理ではキャッシュが原因で変なことが起きがちなので念のため。

・６、７行目で、スマホからPC向けサイトにリダイレクト
最初、クォートの位置を間違えてて、なぜうまく動かないのか悩みました…
「?from_sp」は入れておかないと、Google Search Consoleでエラーになります。

(2)移動前に一瞬見える画面を非表示に

上の設定で不要なものを全部削除していても、PCページにリダイレクトされるまでの一瞬だけ、広告とかいろんなものが表示されます。
それが嫌なので表示されないようにします。

「デザイン」→「スマートフォン」→適用されているデザインのタイトルをクリック。
一番最初に、

body {display:none}

を追加。
もとからあるやつを全部消してから書いた方がいいかもしれないですが、なんとなく不安なので私は残しています。

(3)移動後の「スマートフォン専用ページを表示」を消す

上でもちょっと書いたけど、スマホでPC向けページを見ると「スマートフォン専用ページを表示」というのが表示されて邪魔なので、消します。

「デザイン」→「PC」の「デザイン設定」→適用しているデザインのタイトルをクリック。
一番最後に

 #iphone-link { display: none !important; }

を追加。

参考にさせていただいたサイト様

・これが正解だ！「Seesaa用テンプレートのレスポンシブ化」手順 - Heart on my sleeve
・スマホでも常にPC版を表示させる方法: I Found It!

最後に

これで大体、何とかなったような気がします。
私は、Google Search ConsoleでURL検査もなぜかこれでうまく動きました。

あとは手持ちのスマホで確認してもらって、うまくいけばOKです。
ちゃんと動くか確信がないので、真似する場合は自己責任でお願いします。

Seesaaブログが、見えないところでどういう処理をやっているのかわからないのと、ブラウザのキャッシュの扱いがよくわからなくて、苦戦しました。

今回、Chromeのデベロッパーツールが大変役に立ちました。
デベロッパーツール(F12)を表示して、機能の左上あたりのスマホっぽいボタンを押すと、スマホをエミュレートしてくれるようです(userAgentとか、サイズとか)
これでスマホの種類を切り替えて再読み込みして、動作確認しました。
都度、Cookieを削除したりキャッシュをクリアしたりしながらの動作確認だったので、それなりには面倒でしたが。

以上