シーサーブログユーザーはスマートフォンでもPCサイトを表示させよう

 シーサーブログのスマートフォンサイトは広告がいっぱいだ。

 ん?「スマートフォンサイトは設定して無い」って?

 残念でした。

 スマートフォンサイトは自動的に出来ちゃってるのだ。

 シーサーブログユーザーは、一度スマートフォンで自分のブログにアクセスしてみるといい。

 いつの間にかスマートフォンサイトが出来ているから!

 しかも、べたべたと広告がいっぱいである。

シーサーブログユーザーはスマートフォンでもPCサイトを表示させよう

 シーサーブログのスマートフォンサイトの広告、消すことも、場所を動かすことも出来ない。

 なぜなら、シーサーブログはスマートフォンサイトのHTMLを公開していないから。

 そのくせ、なぜか携帯用のサイトでは広告がほとんど無い。

 しかもスタイルシートもHTMLも公開されている。

 まあ、無料ブログにとっては、広告収入がほしいってところだろうから仕方が無いといえば仕方が無い。

 が、あまりにも広告が多すぎる。

 シーサーブログはスマートフォンでもPCテンプレートで表示させた方がいいと思う。

スマートフォンでPCサイトを表示させるには?

 スマートフォンでシーサーブログを見たときにPCサイトを見せるための方法はちゃんとある。

1、『デザイン』→『スマートフォン』→『コンテンツ』とクリック。

2、『自由欄形式』を『ブログタイトル』の上に設置し、『自由形式』以外のコンテンツを削除。

3、『自由形式』をクリックし、以下を記載。

<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;
setTimeout("autoLink()",1000);
// -->
</SCRIPT>

4、『保存』ボタンをクリック。

5、『保存』ボタンをクリック。

 これで、スマートフォンで閲覧してもPCサイトが表示されるようになる。

 さあ、シーサーブログユーザーはスマートフォンで自分のブログを見てみよう。

 PCサイトで表示されているものと同じサイト表示が見れる。

 が、そこには大きな「スマートフォン専用ページを表示」の表示が!!!

 さあ、この「スマートフォン専用ページを表示」をどうする?

シーサーブログの「スマートフォン専用ページを表示」を消そう

 「スマートフォン専用ページを表示」は、PC用テンプレートのHTMLの中にも、コンテンツHTMLの中にもそれらしい記載が無い。

 どうも、シーサーブログにデフォルトで設定されているらしい。

 ここはスタイルシートにdisplay: noneというのを追加して、「スマートフォン専用ページを表示」を表示されないようにしてしまおう。

display: noneの効果

 display: noneで指定した部分は、表示されない。

 表示されないだけでなく、領域もなくなる。

 「スマートフォン専用ページを表示」という表示が出ていた部分が隙間無く表示されなくなる。

display: noneの使用で表示を消すとSEO上問題があるか?

 ここで、気になるのは、検索エンジンなどでスパムとみなされないかという点だが、「正当な理由で利用する限り問題がない」という話が米GoogleのエンジニアMatt Cutts氏から出ているそうだ。

 要は、display: noneで表示させない部分に、やたらに複数のテキストを入れたりしない限り今のところ問題ないということらしい。

シーサーブログの「スマートフォン専用ページを表示」を消す方法

1、「デザイン」⇒「デザイン設定」⇒適応しているスタイルシートをクリック。

2、#iphone-link { display: none !important; }を追加。

3、保存をクリック。

 これで、「スマートフォン専用ページを表示」が消える。

 後は、PC用のテンプレートやスタイルシートをPCでもスマートフォンでも閲覧できる形に変えるだけ。

 この、PCでも、スマートフォンでも適切な表示がされるサイトのデザインをレスポンシブWebデザインというのだそうだ。

コメント

  • ありがとうございます。あなたは神様みたいな存在です。助かりました。

    by 匿名    2015年2月26日 3:24 PM

  • 出来るわけ無いと思っていたので、かなり満足です!
    ありがとう!

    by 匿名    2015年3月13日 8:37 AM

  • 記事中の
    「『自由欄形式』を『ブログタイトル』の上に設置し、『自由形式』以外のコンテンツを削除。」
    を実施すると、デフォルトの「ブログタイトル」と「ブログ説明」が表示されなくなりませんか?

    by 匿名    2015年3月31日 10:14 PM

  • 元に戻方法を教えてください。

    by サッチー    2015年4月4日 1:25 PM

  • 本当にありがとうございました。
    ブログにお店の情報を載せていて、
    スマホの時代になり勝手にスマホ表示されるように悩んでました。
    ホームページを作らずにすんで良かったです。
    感謝、感謝です!

    by miki    2015年5月6日 9:28 AM

  • この記事を見て、これでやっていたんですけど、モバイルフレンドリーには対応してないですよね。
    モバイルフレンドリーに対応するにはやはりスマホサイトも作らないとダメでしょうか?

    by 匿名    2015年5月20日 1:07 AM

  • >モバイルフレンドリーに対応するにはやはりスマホサイトも作らないとダメでしょうか?
    「レスポンスウェブデザイン」にすればいいでしょ。
    そうすれば、PCもタブレットもスマホもすべての画面に適合し、モバイルフレンドリーなブログに仕上がるよ。

    >サッチー
    上の説明の逆をやれば、もとに戻るよ。
    要は、入力した部分を削除せよ。

    by xxx    2015年6月10日 1:42 PM

  • こんなにも簡単にできる方法を無料公開とは恐れ入ります。
    そしてありがとうございました。

    by 名無し    2015年7月3日 11:12 PM

  • 利用させて頂いてます。ありがとうございます。

    質問なのですが
    コメント欄のサイズが大きいらしく
    画面が動いてしまいます。
    cssでサイズを変えればいいのでしょうか。
    初心者ですみません・・・。

    by aya    2016年2月3日 8:57 AM

  • めちゃめちゃ参考になりました。
    ありがとうございます。

    by ひろのゴルフ日記    2016年5月5日 3:27 PM

  • HTML?の知識が全くない私でもできました!
    ありがとうございました(*´∀`)♪

    by 匿名    2016年6月6日 11:32 AM

  • クッキーが無効になっているブラウザで、無限ループになってしまいました。、

    by daikon    2016年8月15日 8:14 AM

  • シーサーブログの「スマートフォン専用ページを表示」を消す方法ですが、#iphone-link { display: none !important; }は、
    どこに追加すればよろしいのでしょうか?

    by 匿名    2016年8月22日 10:45 PM

  • スマホで、PCサイトを表示できました!
    どうもありがとうございます。

    ちなみに、シーサーブログの「スマートフォン専用ページを表示」を消す方法ですが、#iphone-link { display: none !important; }をスタイルシートのどの部分に追加したらよいのでしょうか?

    by mick    2016年8月24日 6:59 AM

  • 出来ました☺
    これでアドセンスpv少しは上がります!
    助かりました。ありがとうございます❗

    by 匿名    2016年11月10日 6:57 PM

  • 「デザイン」⇒「デザイン設定」⇒適応しているスタイルシートをクリックしました。
    #iphone-link { display: none !important; }
    はHTMLのどこに追加すれば良いですか?
    よろしくお願いします。

    by kenta    2016年11月18日 11:09 AM

  • >#iphone-link { display: none !important; }
    はHTMLのどこに追加すれば良いですか?

    でお悩みの皆様、私のケースでは、/* twitter quote */の直前の行に追加したところ、うまくいきました!

    >管理人さま
    上記の方法に誤りがありましたら、ご指摘いただけますと幸いです。
    非常に役立つ情報、ありがとうございました!!!

    by つきいち Rider    2017年7月22日 2:10 PM

  • こんにちは、貴重な情報をありがとうございます。

    質問があります。

    2、『自由欄形式』を『ブログタイトル』の上に設置し、『自由形式』以外のコンテンツを削除。

    と書いてある通りにしたかったのですが、

    『デザイン』→『スマートフォン』→『コンテンツ』とクリックして開いても、まず自由欄形式と書かれているものが見当たらず、

    どこをクリックしてもなんの反応もありません。

    わたしが開いて見ているページを写真で送って見ていただくことは可能でしょうか。

    by pan    2017年8月18日 1:02 PM

  • 上の方の補足で

    >#iphone-link { display: none !important; }
    はHTMLのどこに追加すれば良いですか?

    デザイン→PC→デザイン設定→今設定してるデザインをクリック→スタイルシート編集
    で一番下にある/* twitter quote */の直前の行に追加してうまくいきました!
    “PC”のスタイルシート編集ってことに気が付かずスマートフォンの方ばかりでやって苦戦していたので、同じような方がいれば参考になればと思います!

    >つきいち Riderさん
    お陰様で「スマートフォン専用ページを表示」を削除出来ました!ありがとうございました!

    >管理人さん
    めちゃくちゃ分かりやすく感謝しています(;O;)ありがとうございました!

    by hana    2017年9月13日 2:35 PM

コメントを残す




*

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)

関連記事

function.phpを含めたwordpressテーマの子テーマ化
FC2ブログのテンプレートの中に、ナビゲーション(パンくずリスト)を入れ込む
wordpressは半角のダブルクォーテーションが勝手に全角に変換されて表示される
FC2ただいま混乱中?
FC2ブログの管理画面が新しくなったけど、使いにくくなった
URLの形式は?ディレクトリ形式?サブドメイン形式
WordPressテーマPrincipleで更新日を表示する
FC2ブログの全記事リストを表示する時のHTMLタグと注意点
コードを収得して、サイトにGoogleアドセンスの広告を貼り付けよう
人気のフィード(RSS)リーダーfeedlyを設置してみた
無料ブログのドメイン形式によって、アクセス数に差が出てくる
GoogleAdsenseのはじめ方・まずは登録用のサイトを作ることから始めよう
Googleアドセンスを設置したページ読み込みパフォーマンスを向上させるための対策
Googleアドセンスのサイト内検索ボックスのトラブル
スクロールバーをスタイルシートで表示する

Menu

HOME

 TOP