スマホ向けテンプレートの作成について

忍者ブログの［ブログ設定］で「スマホ用テンプレートを使用する」に設定してあれば、スマホからアクセスがあった際には忍者ブログさん自前のテンプレ(こんなかんじ)で表示してくれる。しかしこの自前テンプレを自分の好きなテンプレに変更あるいはカスタマイズすることは基本できない。

敢えて自分でなにかできるとすれば［プラグイン］に「スマホ用プラグイン」が用意されてるので、反映させたい内容をそこにHTMLで登録するくらい。しかし素直に入力するだけだと、反映される場所は記事一覧の下。最下部までスクロールしないと見えないうえに位置変更ももちろんできない、なんともお粗末なツール。

ただしこの「スマホ用プラグインは」もちろんCSSも登録できるので、忍者自前テンプレを骨組みごと非表示にして自分のテンプレを突っ込んでうんぬんかんぬんもできるはず。そこまで徹底してやる気があれば。でも文字数制限とか考えるといろいろ面倒くさそうだし、どうせ時間とエネルギー使うなら別の方法がいいなということで

①［ブログ設定］で「スマホ用テンプレートを使用しない」に設定して
②PC用テンプレ上でモニター解像度に応じて読み込ませるCSSファイルを分けるということにした。

※ふつう480pxくらいでわけるところ、「600px」を条件にした理由は：
　自分のブログのメインカラムがそのくらいの幅だから。(相変わらずテキトウだな)
　メインカラムが見切れるくらいならスマホテンプレでどぞ、という。

実はviewportも試してみたがどーーーーもうまくいかないのでやめた。
(うまくいかない理由を検証する隙がないくらい時間が限られていたので、すっきりせず悔し）
ただし今回とった方法でも、必ずしもスマホできちんと表示されないこともある。


以下、スクリーンショット
［左］サイトメニュー／［右］記事部分／［下］コメント入力部分

　
なお、リアルタイムに動作確認しながら作るために、別の忍者ブログアカウントをひとつダミー用に準備した。

(1) ダミーブログを別途準備
(2) ダミーブログのPCテンプレート編集画面にて、現状のPC用のテンプレ(HTML/CSS)をそっくりそのまま貼り付
(3) HTMLを極力いじらないようにしてスマホ用CSSを作成する
(4) どうしてもHTMLの改変が必要なところは、別途プラグインを用意してそこにHTMLを登録し、スマホCSSの中でのみ "display:block;" で対応。


▶ PC上で動作確認できるページ（スクリーンショットではなく）はこちら



ガラケー向けテンプレートの修正について

← 今回修正後のスクリーンショット

忍者ブログならガラケー用のテンプレートをつくるのはとても簡単。むかしから作成ツールが用意されてるから。（ただもう殆ど使う人いないと思うけどね。）でも実際にどのように表示されるのか実はずっと気になっていた。テンプレートカスタマイズ画面で、動作確認はできるが本当にそのように表示されるのか信じられなく。

で、今回こんなものを使ってみた。
iモードHTMLシミュレータII | サービス・機能 | NTTドコモ

その名のとおりです。

OSサポート外でしたが動いた。フリーだというのに予想以上に使い勝手もよく、さすがNTTドコモさんだと思った。

ただひとつ、シュミレートモード(1～8)の一覧表を、ヘルプにも用意しておいてほしかった･･･。

でもおかげで、古いものは機種によっては .pngファイルを表示できないことや、CSSがそのまま文字列として書きだされちゃったりすることがわかった。･･･わかったけどどっちも無視してつくりました。ガラケーからのアクセスなんてほとんどないもん。