Seesaaブログ スマートフォン専用ページを表示

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

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

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

Sponsored Link

1.「スマートフォン専用ページを表示」を消す
2.以前、設定したスマホページから 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 内部の広告と関係があるかも。少し前までは広告を4,5回の読めば 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版へ強制的に飛ばすカスタマイズをまとめておきます。

1.スマートフォンのテンプレートカスタマイズ

スマホでアクセスしてきたユーザは強制的に 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ブログを超カンタンにレスポンシブにする方法

更新日:
Sponsored Link

この記事へのコメント

19件
seesaaブログでのカスタマイズに参考にさせていただきました
ただ自分のブログですと設定してもかわらず困っております


またスマホでみるとサイドバーが下に表示されたり
すごいカスタマイズされてるな参考にさせていただきたいです
at
自由形式内は
<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>
の方がスマートな気がしますがどうでしょう
所々 at
じばにゃんさん
youkai---watch をスマホで拝見しましたけど、ちゃんとデスクトップ版に飛んでましたよ。
この記事の2点に関しては問題ないように見えますが。どのへんが困っちゃっているのでしょう。
echo at
所々さん、ご指摘ありがとうございます。
はい、確かにスマートです。採用させて頂きました。

最終的にはコレにしようかと。
<SCRIPT LANGUAGE="JavaScript">
<!--
document.cookie='force_pc=1; max-age=15768000; path=/';
document.cookie='force_sp=0; max-age=15768000; path=/';

setTimeout("redirect()", 0); // リダイレクト0秒
function redirect(){
location.href=location.pathname; // スマホ版からデスクトップ版にリダイレクト
}
//-->
</SCRIPT>

これだと、転送が実質的に301リダイレクトになって、スマホ版(ブックマークやインデックス)がデスクトップ版に完全移行できるんじゃないかなと考えてました。Seesaa スマホ版の存在を完全に消してしまいたいという願望の最後の課題は 301リダイレクトなんです。が、記事中のコードでも 301リダイレクト扱いになりますかね?

ただ、ページごとの Google ページランクを比較すると、seesaa側でスマホ版はデスクトップ版の canonical に設定しているような感はあるので、こちらは何もやらないで良いような気もしてます。
echo at
回答ありがとうございました。
後ほど「スマホ〜」の表示はけすことができました。

現在困っているのはGO TOPがスマホ版で動かないのと
レスポンシブをやってみたいと思います。
じばにゃん at
「スマートフォン専用ページを表示」が急にでかでかと表示されてほとほと困り果てていたところ、検索で改善策を探してココにたどり着きました。
ただ単に、表示されていただけなら良かったのですが、スマホから見ると、この表示のサイズ幅がでかかったので、右に空白ができてしまっていたんですよね。
しかし、ここのブログのおかげで解決しました。
ありがとうございました!

検索でたどりついたマン at
検索でたどりついたマンさん
以前はテキスト1行分でしたから気が付かれないこともあったかとは思います。
が、さすがに今回ほどでかでかと表示する必要はないですよね。
echo at
お問い合わせフォームがありませんでしたのでコメントから失礼いたします。
先日seesaaブログのスマフォ版テンプレートが新しく追加され、
新しいテンプレートではこれまでの広告を消す方法が適応されません。
ちなみにbasicというテンプレートです。
ぜひ対策法を新たに記載していただけないでしょか?
お忙しいところ大変恐れ入りますが、可能でしたらどうぞよろしくお願いします。
at
コメントありがとうございます。
Basic テンプレート版の広告非表示について投稿しましたのでご参照ください。
http://myweblogblog.seesaa.net/article/397896909.html
echo at
いつもサイト更新楽しみにしております!

仕様変更で僕も悩んでいたところでした!
さて、実際に変更してみてとても良かったです(((o(*゚▽゚*)o)))

しかし...
スマホ版CSSのbody タグに display: none; を追記すると、以前のような永久ループになってしまうことがわかりました。

実際に僕のサイトでもそうですし、こちらのサイトでも永久ループになっています。

現在の僕サイトでは、bodyタグ追記しないことで、永久ループを脱しているのですが、どうすれば、スマホ版が一瞬表示されることなく、PC版が表示されるのでしょうか?

こちらのレスポンシブデザインめっちゃかっこいいですね!しかしながら、iPhone5sにおいて閲覧すると、文章の右端が一文字分切れて(画面に映らない)います 汗
これって治せるのでしょうか?

もし治るのなら、僕も是非とも導入したいと思います!
at
ポンダ宮さん、コメントありがとうございます。

>以前のような永久ループになってしまうことがわかりました。
多分、body の display:none じゃないと思います。
非表示にしている Seesaa 広告の JavaScript のいずれかが干渉しているのが原因とボクは見ているのですが。ach.js という広告が怪しいんですよね。

UserAgent の iPhone と呼応して広告を切り替えるタイミングと、非表示にするタイミングが合わなくて、ループしているのは Seesaa 広告のほうで、それに伴いサイトもループする。こんな具合だと思うのです。

最初からスマホページ (/s/付き)ページにアクセスするひともいるので、実はスマホページでは自由テキストで force_pc : 1, force_sp : 0 のクッキーを最初から読ませてるんです。

それでもループするってことは、PC版に飛ばすやり方を JavaScript じゃなくて、meta refresh にすればループは止まるかもしれません。あくまでも、Seesaa 広告のいずれかの js とタイミングが干渉しているという仮説の上の話ですが。(実際、meta refresh で飛ばす検証結果ではループは出ていません)


>iPhone5s において閲覧すると、文章の右端が一文字分切れて
直しました。
スミマセン、iPhone 5s は横持で1,136px なんですね。全然考慮してませんでした。
メディアクエリーで 960 px から 1,024px までは細かく指定してたんですが、1,025px 以上は、その他 デスクトップアクセスの扱いにしてました。
1,136px でのアクセスは右サイドバーを落としましたので、見切れてないと思います。

永久ループの件は、meta refresh で1点だけ気になることがあって実装してませんが、meta refresh で解決できるようにやってみます。
echo at
お返事ありがとうございます!

改修版を楽しみにしております(((o(*゚▽゚*)o)))
at
消せました。ありがとうございます!
at
にゃい!さん、コメントありがとうございます。

#iphone-link { display: none !important; }
これはデスクトップ版の HTML にも書いておいた方が良いような気がします。CSS だけじゃなくて。
どうも最近読み込みが遅い seesaa ブログがたくさんあって(先日のメンテとは無関係に)、そのような状態だと CSS が読み込みできなくて結局、でっかい「スマホ表示」の帯が表示されちゃうんですよね。
HTML にも <style> で書いておけば避けられます。
echo at
たびたび失礼します!
meta refreshで無限ループにならないジャンプの仕方を教えてくださいm(_ _)m

当サイトにもたびたびスマホからは永久ループになって閲覧できないのでパソコンから閲覧してますというお問い合わせが来ておりまして、是非とも無限ループしない方法をご伝授してくださいm(_ _)m
at
ポンダ宮さん、お久しぶりです。
すごいタイミングで、まったく同じご質問をメールで頂いて、その回答をしていたところです。

結論を申しますと、無限ループ回避の方法は見つかっていません。
出来る限りの方法をトライしましたが、結局 Seesaa の提供する広告の JavaScript と干渉してしまってループが避けられません。

で、話が飛びますけど、最初にポンダ宮さんのシーサーブログを拝見して直感的に思いましたが、ボクは引っ越した方が良いと思いますよ。久々に綺麗なブログを見つけたなという感動がありました。無料ブログの Seesaa で運営するブログじゃないなと。独自ドメインを取得してレンタルサーバ+Wordpress で運営したほうがもっと自由度ありますし。このまま Seesaa.net ドメインでページランクを上げても資産にならないかもしれないし。

ページランクの引き継ぎを考えれば、とりあえず独自ドメインを取得して今のシーサーブログに割り当てて、半年から1年で独自ドメインの方にページランクが移行できると思います。Wordpress での運用はそれからでよいのかと。

シーサーブログの独自ドメインはネイキッドドメインで割り当てができず www なり blog なりのサブドメインを付けるわけですが、レンタルサーバを借りなくても wwwizer.com というサイトを使えば www なしでアクセスされても www へリダイレクトできます。レンタルサーバを借りていればサーバスペース側に .htaccess を置いてリダイレクトの記述をしますが、サーバがなくてもできますから。

将来サーバを借りて Wordpress で運用する際でも、Wordpress にはページをリダイレクトするプラグインがあります。/article/123456789.html などのパーマリンクが変わってしまっても、新しい Wordpress ページのパーマリンクへ簡単に301リダイレクトできます。レンタルサーバに引っ越した後は、オリジナルの seesaa.net ブログはそのまま残して全ページを新ブログにリダイレクトする JavaScript をHTML に書いておけば、ページランクや Seesaa 時代のバックリンクなどの資産もそのまま引き継げます。難しくはありません。Seesaa ブログが悪いとはまったく思いませんが、ポンダ宮さんのあの美しいブログがシーサーであることに若干の違和感を感じます。

ご参考までに、ボクのブログで最初は Seesaa、独自ドメインを割り当て、今はレンタルサーバ+Wordpress (レスポンシブ) のパターンがあります。レンタルサーバに引っ越す前のページランクは2で、日次のPV は5ooくらい。で、レンタルサーバに引っ越して恐らくレスポンシブデザインでモバイルユーザが上手く取り込めた効果だと思うのですが、今は日次で4,000PV くらいにアップしてます。そこでアドセンスやちょこっと物販アフィリエイトをやっていますので、余裕で年間の維持費は出る予定です(まだ移行して1年経ってませんが)。

と、ひとしきり個人的な願望を述べさせていただきました。

本題です。
現在の日々の営みスマホ版はスマホテンプレートのブログ説明にコメントを入れているじゃないですか。今のパターンで良いと思います。
変更すべきはボクがブログで紹介したJavaScript を自由形式コンテンツから削除してしまい、もう自動的には飛ばないようにすることです。
その代わりに、Seesaa オリジナルのクリックしてデスクトップ版に飛ばす下記リンクを追記します。今のままだと JavaScript のせいでループしてますからデスクトップ版へ飛ばすリンクすら表示できていないこともありそうです。

<a href="javascript:document.cookie='force_pc=1; max-age=15768000; path=/'; document.cookie='force_sp=0; max-age=15768000; path=/'; document.location='/?from_sp'; ">PC版を見る</a>

最後の /?from_sp は不要ですね。PC版を見るの文言も適当に変えて。(それからボクは15768000 に 0 を1つ追加してクッキー有効期限を 10年にしています、ここだけの話...)

ボクのとある秘密ブログは、どうしても Seesaa で運営しているということをなるべく知られないようにしています。上記のようにいったんスマホ版でワンクッションおいてしまうと、Seesaa という表記が出てしまうので間髪入れずにデスクトップ版に飛ばしたいのです。ドメインが Seesaa.net ならそこらへんは気にすることないので、ワンクッションいれても問題ないと思われますが、如何でしょう?
echo at
先日、検索でこちらのサイトを拝見させていただき、過去の記事も併せてとても参考になりました。ありがとうございます!

やはり、私もスマホ版の永久ループで困っており、現在はこちらの記事で教えていただいた javascript を削除して、一つ上のコメントでもおっしゃられた「PC版を見る」リンクに変えました。

ただ、初めてスマホ版 /s/ を訪れた閲覧者に対しては不便なのかな?と思うこの頃です。

その後、meta refresh を使った改善策や、違う方法による永久ループ回避策がおわかりになられていたら是非ご教授していただければ幸いです。

宜しくお願いいたします!
sinfuji at
こちらのテクニックで無事スマホからもPCテンプレートを表示するようになりました!
ほんとにありがとうございます。
ただ、一つ困っていることがあって、このテクニックはlocation.hrefを使ってのリダイレクトを行っているので、アクセス解析上はリンク元URLが「xxxx.seesaa.net/s/~~」みたいになってしまいます。なので、リンク元URLもわからないし、Yahoo検索などのキーワードもわからなくなってしまいます。(アクセス解析はi2iというのを使っています)
このあたりのどのように対策していますでしょうか。
あーきー at
あーきーさん、こんにちは。

アクセス解析にはGoogle Analyticsしか使っていないので、ボクにはあーきーさんと同じ悩みはありません。

スマホ版からPC版に飛ばした目的や理由を明確にする必要があります。
レスポンシブ対応もあるでしょうが、メインの目的はスマホ版の広告対策(広告消し)だったのでは?

無料アクセス解析などの無料サービスを提供する企業の主な収入源は「広告収入」が一般的です。以前 i2iを使ったことがありますが、スマホでフローティング広告が出た記憶があるので外しました。Ninjaも広告が出た記憶があります。(間違っていたらごめんなさい)

無料=広告が出る、もしくは将来広告がでる可能性がある
と考えているのでボクは相当なことがない限りGoogle以外の無料サービスは使いません。


無料サービスを使わないもうひとつの理由があります。
JavaScriptやアプレットを多用することになるので、どうしても表示速度が遅くなります。サイトの表示高速化、モバイルフレンドリー、モバイルファーストなどの観点から、外部のJavaScript, jQueryは必要最小限にしています。

・広告消しの目的に反する
・表示速度が遅くなる

この2点により Google Analytics に移行することをお勧めします。初めてであれば多少戸惑うかもしれませんが、そちらのほうが、あーきーさんの目的に叶っているはずです。
echo at
コメントをどうぞ
お名前:[必須入力]

メールアドレス:

ホームページアドレス:

コメント:[必須入力]

Sponsored Link