今朝(2014年5月16日)、Seesaaブログをタブレットで見たら、画面の上部に「スマートフォン専用ページを表示」と表示されていました。それもかなりデカく (´・ω・`)

ボクは Google Nexus 7 で７インチだからまだましだけど、これ、iPhone を横にして見たら一体どんな光景になっているのでしょう。画面下の広告を含めると、画面の半分近くをスマホページ案内と広告で占められる。記事が半分しか見えない。

タダで使わせて頂いている Seesaa ブログには申し訳ないけど、これ何とかしたいのでテンプレートを２点カスタマイズです。

１．「スマートフォン専用ページを表示」を消す
２．以前、設定したスマホページから PC ページへ強制的に飛ばすスクリプトの修正

前提条件の整理

この記事を読んで頂いている方のために少し経緯を整理します。

ボクが何をしたいのかというと、スマホのページを無効にしたいのです。（詳しくはこちらの記事で）

スマートフォンデバイスからアクセスしてきたユーザにも、スマホ版テンプレートではなく、強制的に PC版 テンプレートで表示させたい。なんでそうしたいかというと、ボクのとある秘密ブログはPC版テンプレートをレスポンシブにカスタマイズしているので、わざわざスマホ版に飛ばす必然性がないのであります。

スマホ版テンプレートは HTML が編集できないので Seesaa 主導の広告だらけ。ま、本音を言えば、なるべく広告表示を抑えたカスタマイズHTML版のデスクトップ表示に飛ばしたい。（無料ブログなので文句を言ってはいけないにしても広告が多すぎると思う。）

従いまして、単に「スマートフォン専用ページを表示」を非表示にしたいということであれば、ひとつめのカスタマイズだけでオッケーです。

スマートフォン専用ページを表示を消す

CSSをいじれば結構簡単なんですけど、ポイントはスマホ版とPC版のそれぞれの CSS を修正するということです。

スマホで PC版のページを開いたので「スマホ専用ページがありますよ」と案内が出るわけです。だから、スマホ版の CSS だけでもいいのかなと思っていたら、スマホからデスクトップ版を見るというパターンがあるので PC 版にも追記します。

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

PC版はデザインから「デザイン設定」ー CSS、スマホ版は「デザイン一覧」− CSS をそれぞれ開いて、適当な場所に上記を追記します。
これで、あのバカでかい案内が表示されなくなります。

PC版・スマホ版共通で iPhone-Link をはじめ Seesaa ブログの広告を非表示にした CSS をご紹介しています。»Seesaaブログスマホ広告を消す(非表示にする)悩みを消す方法

スマホからPC版へ強制的に飛ばす JavaScript の改修

以前書いた記事に、まつきさんからコメントを頂いております。
Seesaaブログのスマートフォン版表示をごにょごにょ | なんにもない(です)

まつきさんが強制的に PC版に飛ばすスクリプトを教えてくださったので、ずっとこれを採用させて頂いていました。が、スマホ専用ページへの案内がデカデカと表示されると同時に、Seesaa 側にコードの修正があったようです。
結果、以前のコードのままだと永久ループしてしまい、PC版にもスマホ版にも戻れなくなります(執筆現在)。

スマホ版ページの最下部に表示される Seesaa の広告が iframe で、frame 内部の広告と関係があるかも。少し前までは広告を４，５回の読めば PC 版に飛んだんですが、今は永久ループという状態です。

それはそれとして、新たにクッキーを作らなくてはならないようなので、まつきさんのコードを修正します。(※まつきさんコード改修版+所々さん案(コメント参照))

<SCRIPT LANGUAGE="JavaScript">
<!--
document.cookie='force_pc=1; max-age=15768000; path=/';
document.cookie='force_sp=0; max-age=15768000; path=/';
location.href=location.pathname; // 所々さん案
// -->
</SCRIPT>

今回の Seesaa 側コード変更に伴い、赤文字の force_sp というクッキーも作らないとダメみたいです。

追記：2014年5月17日現在、所々さんよりコメントを頂き、コードを修正しています。

まとめ

それではボクのとある秘密ブログで採用している、スマホからのアクセスをすべてPC版へ強制的に飛ばすカスタマイズをまとめておきます。

１．スマートフォンのテンプレートカスタマイズ

スマホでアクセスしてきたユーザは強制的に PC 版表示に飛ばします。スクリプトが実行されている数秒の間に画面にはいろいろ表示されてしまうので、スマホ版は何も表示しないようにしてリダイレクトしていることをなるべく気付かれないようにします。

1-1. CSS

• 「スマートフォン専用ページを表示」の案内を非表示
  #iphone-link{display: none !important;}


• スクリプトが実行されている間、ページには何も表示されないようにする
  body タグに display: none; を追記

1-2. コンテンツ

• 「自由形式」を追加（既に追加済みのときは既存コードを修正）
  上記のまつきさんコード改修版+所々さん案を追記

1-3. スマホ版で表示される Seesaa 主導広告を(可能な限り)非表示にする

• カスタマイズ不要
  PC版に飛ばしてしまうので、スマホ版のことはもう気にする必要がありません。

2．PC版のテンプレートカスタマイズ

恐らくメディアのスクリーンサイズ（画面の解像度）の取り方だとおもうのですが、完全に消すには PC版の CSS にも追記しておいた方が確実のようです。デスクトップ版にも下記を追加します。

2-1. CSS

• 「スマートフォン専用ページを表示」の案内を非表示
  #iphone-link{display: none !important;}

永久ループしていたので一時はどうなることかと思いましたが、完全に以前の状態に戻せました。とある秘密ブログは結構アクセスが多いので、半日放置していたらヤバかったかもしれません。スッキリしました。

余談ですが、こうやって無料ブログ（Blog Service Provider）主導の表示や広告に対応するほど時間が無駄になることはありません。独自ドメインを取得して、レンタルサーバを借り、 Wordpress でブログを運営することを検討したほうが良いと思います。

その他Seesaa広告を消す関連の記事

スマホテンプレートはそのまま使う。でも広告は消したい。
» Seesaaスマホ版Basic/Photoテンプレート究極のカスタマイズ

PC版をレスポンシブにしてスマホアクセスを広告の無いPC版に飛ばしたい。
» Seesaaブログを超カンタンにレスポンシブにする方法