（ちょっとメモ）FC2ブログで PC用テンプレートをスマホで適用させる
最終更新日：2017年11月16日 （初回投稿日：2014年10月23日）
FC2ブログは、スマートフォンではスマホ用のテンプレートが適用されます。
普通のテキストと写真のブログなら、それでも十分楽しいのですが、この「ほんっとに...」だと自分で見ていて違和感が...。
そこで、iPhone、Android でも PC用のテンプレートを適用できるようにしてみました。
（今回は FC2ブログユーザーにしか意味無いネタでごめんなさい）
（2015年1月追記）コレ、GoogleのAdSenceには不適切でした。
この「ほんっとに...」は、GoogleのAdSenceをやっていますが、スマホでPCビューのみにしたら、G様からさっそく「critical mobile usability errors（重大なモバイルユーザビリティエラー）」ってメールが来たわ。それほど重篤なエラーではないのですが、G様コワさに結局スマホビューでも表示できるように修正。（また広告消されちゃたまらん。めっちゃ面倒くさいから）
詳細は、こちらに追記しておきました。（たいして詳細でもないけど...）
まずはスマホ用のテンプレートを選んでおく
もう何かしらテンプレを選んであるならそれでOK。
私の場合は、何も選ばず放置していたので（それでもFC2でデフォルトのテンプレートがスマホ用に設定されていたようです）、公式テンプレートの中から1つ選んで適用しました。
FC2管理画面＞設定＞テンプレートの設定＞「スマートフォン用＿公式テンプレート」をクリックして、好きなのをダウンロード。（どうせ使わない=これから編集しちゃうテンプレなので、何でもOK）
すでにスマホ用テンプレを使っていて、自分で編集したりしてて失いたくない場合は、
必ずそれを「複製」して別名を付けてから下記の編集を。いつでも元のテンプレに戻れるように。
スマホ用テンプレートを編集する
スマホ用のテンプレを、管理画面上で編集します。
<body>内に下記のJavaScriptを入れます。PC用テンプレにリダイレクトするソースです。
これはFC2ユーザーフォーラムの no saveさんのコードを使わせていただきました。ありがとうございます！！
<script type="text/javascript">
if ((navigator.userAgent.indexOf('iPhone') > 0 && navigator.userAgent.indexOf('iPad') == -1) ||
navigator.userAgent.indexOf('iPod') > 0 || navigator.userAgent.indexOf('Android') > 0) {location.href = '/?pc';}
</script>
コレだけ！で、スマホで閲覧した時、スマホ用テンプレートは読まず PC用テンプレートで表示するようになりました。（PC用テンプレにリダイレクトされるようになった。）
リダイレクトされるようになったので、上記のスクリプト以外のソースは不用です。
ですので、テンプレートを下記のようにシンプルに整理しておきました。
<!DOCTYPE html>
<html lang="<%template_language>">
<head></head>
<body>
<script type="text/javascript">
if ((navigator.userAgent.indexOf('iPhone') > 0 && navigator.userAgent.indexOf('iPad') == -1) ||
navigator.userAgent.indexOf('iPod') > 0 || navigator.userAgent.indexOf('Android') > 0) {location.href = '/?pc';}
</script>
<%ad><%ad2>
</body>
</html>
テンプレの編集画面で、
「<%ad> <%ad2> がテンプレート中に含まれていないと更新できません」
と表示されていますので、これは必ず</body>の前に残しておきましょう。（11行目）
CSSも不用ですので、全部削除します。必要ないですから残しておいてもしょうがない。
というわけで、管理画面ではこんな状態になっています。
PCテンプレで出る「スマートフォン版で表示」を非表示に
スマホでPC版の表示が出来るようになりましたが、上部にこのようなボタンが出てしまいます。
これは、PC版のテンプレートのCSSに、下記を追加するだけで非表示に出来ます。
こちらはdegiteku noteさんを参考にさせていただきました。ありがとうございます！！
#change_mobile {display:none}
あのボタンは、<div id="change_mobile"> で自動生成されているので、
これを display:none で非表示（トルツメ）にすればOKというわけです。
しかし！ Google AdSense では NG（2015年1月26日追記）
Google AdSense をやってない人は、ここはすっ飛ばしてください。
この記事は2014年10月23日にアップしましたが、
それから約3ヶ月後の2015年1月なかばに、天下のG様からこんなメールが。
「Googleのシステムは、君のサイトの490ページをテストし、その100％に重大なモバイルユーザビリティエラーを検出した。この490ページのエラーは、君のウェブサイトに来るモバイルユーザーに深刻な影響を及ぼす。だからこれらのページは、Google検索のモバイルフレンドリーには表示されないぞよ。」
的な内容。（相変わらず上から目線よね...G様ったら）
「だから広告をはずすぞ」とは言ってないのですが、G様からの警告を放置してもイイことは無いので、直しておきました。（トホホ）
それにしても、490ページって何やねん。そんなに書いてるわけない。
要は、スマホユーザーにPCビューを強制するのでなく、
PCビューでもスマホビューでも、どっちでも選べるようにしとけってことよね？
そこで今度は真剣に（笑）スマホ用のテンプレを選び編集。（new_basic_white_ap にしました）
（この「スマホ用テンプレの編集」が面倒くさかっただけ...。結局やるハメに。笑！）
PC用とはまったく別のテンプレなので、PC用の時と同じような編集をしなくてはなりません。
プラグインも別途読み込み、CSSもざっと編集。記事本文のCSSはPC用のものを流用。
スマホ用テンプレの広告は、量も多くて見にくいので、位置などを変更。
他にもカスタマイズすべき箇所はあるけど、後日落ち着いてやるとして、ザッと済ませました。
とにかく今、肝心なのは、Googleの広告を貼ることです。
PC用とは別HTMLなので、今のままじゃ広告が無い状態。これじゃ何の意味も無いので。
広告タイプは当然、幅が300か320pxのヤツ（レクタングルか、モバイルバナー）を使います。
Google AdSense 広告の見本はこちら
最後に忘れずに、PC版のテンプレートのCSSで「#change_mobile {display:none}」と書き加えていたのを削除します。
これをやっとかないと、スマホから PCビューに行ったら、スマホビューに戻ってこれなくなるから。これでやっと完了。
ついでに XHTML から HTML5 に（やっと今ごろ..）
スマートフォン上のブラウザでもXHTMLは表示しますが、もうHTML5にしとかないと。
というわけで、ず〜っと長いこと放置してきたこの「ほんっとに...」のPC版テンプレを、
これを機会にやっと HTML5に変更しました。（スマホ版テンプレはHTML5）
XHTMLからHTML5に変えるのはごく簡単。「!DOCTYPE」とそれ以下の数行を変更するだけです。
HTML5は XHTMLとも互換があるよう柔軟にできていて、XHTMLのように空要素のタグの最後に「/」をつけても大丈夫。なので、冒頭の数行を変更するだけでOK。
（それで放置してた。んなもんいつでもいいやって思って）
PC版のテンプレのソースはこのように変化。
- 関連記事
-
- （ちょっとメモ）Googleフォームで簡単・無料でフォームが作れる！
- （ちょっとメモ）Prism の使い方（SyntaxHighlighterから乗り換えた）
- （ちょっとメモ）FC2ブログで「最終更新日時」が使えるようになった！
- （ちょっとメモ）さようなら〜IE8♪
- （ちょっとメモ）FC2ブログに「カテゴリ別一覧」を作る
- （ちょっとメモ）FC2ブログに はてブ と Google+1 のボタンをつける
- （ちょっとメモ）FC2ブログで OGP設定（Facebook, Twitter Cardsも）
- （ちょっとメモ）StatCounter でブラウザのシェアを調べる
- （ちょっとメモ）FC2ブログで PC用テンプレートをスマホで適用させる
- （ちょっとメモ）WordPressプラグイン SyntaxHighlighter Evolved
- （ちょっとメモ）SyntaxHighlighter 3.0.83 の使い方
- （ちょっとメモ）HTML5情報サイト「HTML5.jp」
- （ちょっとメモ）IEにもCSS3の機能を使えるようにする「CSS3 PIE」
- （ちょっとメモ）ブラウザのCSS3とHTML5への対応サイト
- （ちょっとメモ）トラッキングクッキーの無効化
やる気を保つためにランキングに参加しています。
応援してくださると すっごいやる気を出します！ (笑)
初心者にも使いやすい（と思う）レンタルサーバー
「初心者ですがレンタルサーバーはどこがいい？」というご質問をよくいただきます。
自由にファイルをアップロードできる自分のサーバがあると便利ですよね。ローカル環境じゃなくサーバ上で試してみたい時がありますからね。
私が使っているのは、
スターサーバー
や ロリポップ！
です。どちらも管理画面がわかりやすく、マニュアルも充実していて、料金も安い。どちらもライトプラン以上で WordPress が使えます。
初心者が始めやすいサーバだと思います。
ちょっと料金は高いけど、さくらのレンタルサーバ
や、エックスサーバー
は、やはり老舗なのでおすすめです。
両方とも高スペックでコスパが良く、老舗でユーザーが多いので、質問する場がたくさんあります。初心者だけど仕事でサーバが欲しい場合は、安心なのではないかと思います。
スポンサーリンク
コメントの投稿
すごく助かりました(>_<)
スマホ用の広告も出ませんし、PCでしか使用できないパーツを使っているので、とても助かりました！
本当にありがとうございました(>_<)
Re: すごく助かりました(>_<)
コメントありがとうございます。
「FC2ブログ」ネタは、需要が無いかと遠慮がちに記事にしていましたが、
お役に立てる FC2ブログ仲間がいるのなら、今後もときどき書こうと思いました。
こちらこそ、ありがとうございました！
ありがとうございました
非常に参考になりました。
Re: ありがとうございました
コメントありがとうございます。
お役に立てて何よりです〜
スマホ用テンプレート
この [ ] って必要なんでしょうか？
仮にこの括弧を消してみると正常にPC 用のテンプレートで表示されます。
Re: スマホ用テンプレート
あ〜ほんとですね〜。いりませんこれ。
なんで [] 入れたんだろう。
私のスマホ用テンプレも
<div class="ad_footer"><%ad><%ad2></div>
としてました。
ご迷惑おかけしました。本文のソースコードを修正しておきました。
とっても助かりました
Re: とっても助かりました
スマホ対応のプラグインでないのかも？ご自分で調べてみてね。
（私は結局スマホでPC版画面は使ってないので確認できないけど、たしかプラグインも普通に表示してたような…。プラグインによるんだと思います）
