SyntaxHighlighter モバイルテンプレートでの表示

2013/03/11 SyntaxHighlighter

"BloggerでSyntaxHighlighterを使う"を書いた後に気が付きました
モバイル環境でモバイルテンプレートを使っていると、SyntaxHighlighterがうまく機能していない

ハイライト表示されていないです
前は綺麗に表示されてた気が…

SyntaxHighlighter モバイルテンプレートでの表示 -1

以前と違うことと言ったら、"autoloaderを使う"と"ガジェットを使う"の2つ
その辺りから調べてみると原因はガジェットであることがわかりました

モバイルテンプレートではデフォルトの設定で表示されるガジェットは6種類です
-> Introducing custom mobile templates | Blogger Developers Network

「ヘッダー」「ブログの投稿」「プロフィール」「ページリスト」「AdSense」「帰属」と書いてありました
そういえば、モバイルのページってアーカイブとか出てないなぁと納得
以上の理由から、SyntaxHighlighterの設定で新規に作ったガジェット「HTML/JavaScript」は読み込まれていなかったのです

原因がわかったので次は対策ですが、それについても記載されてました
6種類以外のガジェットをモバイルテンプレートで表示するにはテンプレートを編集すればいいらしいです
目的のガジェットの要素を見つけ、開始タグにモバイル属性を指定します
指定できる属性値は4つ
  • yes - PC、モバイル両方で表示する
  • no - PCだけ表示する
  • default - デフォルトの設定に従う
  • only - モバイルだけ表示する

今回は、HTML/JavaScriptのガジェットをPCとモバイルで表示したい(機能させたい)ので「yes」を指定する
テンプレート -> HTMLの編集 -> 「ウィジェットのテンプレートを展開」にチェック
-> HTML/JavaScriptのガジェットを探す
ガジェットにタイトルをつけていないなら「HTML1」とか
<b:widget id='HTML1' locked='false' mobile='yes' title='' type='HTML'>
mobile='yes' を追加

あとは使用するモバイルテンプレートはカスタムを選択する
モバイルテンプレートでの表示に関しては以上です

僕はアンドロイドのブラウザはFirefoxβを使っています
コードの見切れている部分はスワイプして(スクロールのほうが正しいかな)見ることが出来ます

SyntaxHighlighter モバイルテンプレートでの表示 -2

Bloggerのモバイルテンプレートは画面の端にスワイプするとページが切り替わる仕様になっていて、かなり鬱陶しいので無効にしました
いまは、コードの部分だけスワイプできます

個人的にはこれで満足なんですよ
ここまでで十分なんです

ですが、これはアンドロイドのFirefox、しかもベータ版での話
おそらく、普通のFirefoxでも問題ないと思いますが一般的にはどうなのよ?

標準ブラウザではコードの部分はスワイプしません
見切れたままです

何かしら対策をと思いましたが、またの機会にします
(;´Д`)