(ちょっとメモ)FC2ブログで PC用テンプレートをスマホで適用させる

FC2ブログは、スマートフォンではスマホ用のテンプレートが適用されます。
普通のテキストと写真のブログなら、それでも十分楽しいのですが、この「ほんっとに...」だと自分で見ていて違和感が...。
そこで、iPhone、Android でも PC用のテンプレートを適用できるようにしてみました。
(今回は FC2ブログユーザーにしか意味無いネタでごめんなさい)

(2015年1月追記)コレ、GoogleのAdSenceには不適切でした。
この「ほんっとに...」は、GoogleのAdSenceをやっていますが、スマホでPCビューのみにしたら、Googleからさっそく「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ビューに行ったら、スマホビューに戻ってこれなくなるから。これでやっと完了。
まだアラだらけだけど、そのうち直すからね。

←このQRコードで、今PCでご覧の方は「ほんっとに...」のスマホ版をご確認いただけます。

ついでに XHTML から HTML5 にしておきました(やっと今ごろ..)

スマートフォン上のブラウザでもXHTMLは表示しますが、もうHTML5にしとかないと。
というわけで、ず〜っと長いこと放置してきたこの「ほんっとに...」のPC版テンプレを、
これを機会にやっと HTML5に変更しました。(スマホ版テンプレはHTML5)

XHTMLからHTML5に変えるのはごく簡単。「!DOCTYPE」とそれ以下の数行を変更するだけです。
HTML5は XHTMLとも互換があるよう柔軟にできていて、XHTMLのように空要素のタグの最後に「/」をつけても大丈夫。なので、冒頭の数行を変更するだけでOK。
(それで放置してた。んなもんいつでもいいやって思って)

PC版のテンプレのソースはこのように変化。(クリックで拡大)

関連記事
この記事をはてなブックマークに追加

やる気を保つためにランキングに参加しています。
応援してくださると すっごいやる気を出します! (笑)

初心者にも使いやすい(と思う)レンタルサーバー

最近よく「レンタルサーバーはどこがいい?」とご質問が来ます。
自分でも使っていてオススメなのはミニバード。管理画面がわかりやすくていい感じす。
仕事で使ってるロリポップもわかりやすい管理画面で、初めてでもすんなり使えると思います。
両方とも、なんといっても料金が安いです。初めてだとなるべく安いほうがイイですからね。

それよりちょっと料金は高いけど、高スペックでコスパが良く、信頼性も高いサーバといえば、やはりさくらのレンタルサーバと、XSERVER(エックスサーバー)だと思う。この2つは老舗でユーザーも多いので、質問する場がたくさんあり、初心者の方でもイケるだろうと思います。

レンタルサーバーは、たくさんあり過ぎて迷いますよね。近いうちに、初心者にも良さげなサーバーについて記事にまとめます。*記事をアップしたらココにもリンクを貼ります。

スポンサーリンク

コメントの投稿

すごく助かりました(>_<)

はじめまして!
スマホ用の広告も出ませんし、PCでしか使用できないパーツを使っているので、とても助かりました!
本当にありがとうございました(>_<)

Re: すごく助かりました(>_<)

ゆきさん(おぉ、名前おなじですね)
コメントありがとうございます。
「FC2ブログ」ネタは、需要が無いかと遠慮がちに記事にしていましたが、
お役に立てる FC2ブログ仲間がいるのなら、今後もときどき書こうと思いました。
こちらこそ、ありがとうございました!

ありがとうございました

PCでしか反映しない設定をしていたので助かりました。
非常に参考になりました。

Re: ありがとうございました

Mさん
コメントありがとうございます。
お役に立てて何よりです〜

スマホ用テンプレート

html に [<%ad>][<%ad2>] の記述を入れるようにとありますが、自分のブログをURL+/?sp で見ると[] [] しか表示されません。
この [ ] って必要なんでしょうか?
仮にこの括弧を消してみると正常にPC 用のテンプレートで表示されます。

Re: スマホ用テンプレート

higeさん
あ〜ほんとですね〜。いりませんこれ。
なんで [] 入れたんだろう。
私のスマホ用テンプレも
<div class="ad_footer"><%ad><%ad2></div>
としてました。

ご迷惑おかけしました。本文のソースコードを修正しておきました。

とっても助かりました

スマホにPc画面を設置できましたが、設置するとプラグインが非対応になり、反映されません。まったく同じ表示にはできないのでしょうか。pc版にはプラグインを利用しています。

Re: とっても助かりました

いぷちゃんさん
スマホ対応のプラグインでないのかも?ご自分で調べてみてね。
(私は結局スマホでPC版画面は使ってないので確認できないけど、たしかプラグインも普通に表示してたような…。プラグインによるんだと思います)

trackback


この記事にトラックバックする(FC2ブログユーザー)

(ちょっとメモ)FC2ブログで PC用テンプレートをスマホで適用させる

FC2ブログは、スマートフォンではスマホ用のテンプレートが適用されます。 普通のテキストと写真のブログなら、それでも十分楽しいのですが、この「ほんっとに...」だと自分で見ていて違和感が...。 そこで、iPhone、Android でも PC用のテンプレートを適用できるようにしてみました。 (今回は FC2ブログユーザーにしか意味無いネタでごめんなさい) (2015...
スポンサーリンク
最新記事
Category
オススメの本
Links
Calendar
07 | 2017/08 | 09
- - 1 2 3 4 5
6 7 8 9 10 11 12
13 14 15 16 17 18 19
20 21 22 23 24 25 26
27 28 29 30 31 - -
Archive
RSS Link
Profile

yuki★hata

Author : yuki★hata
せめて月1回の更新をめざします~。

メールフォームはこちら

スポンサーリンク
スポンサーリンク
Copyright © ほんっとにはじめてのHTML5とCSS3 All Rights Reserved.