Jump into!: Blogger モバイルページにSyntax Highlighterを適用する

最近携帯端末(Android/iOS(iPhone/iPad))でBloggerにアクセスしている方が多いことがログからわかってきたのですが、自分もいざアクセスしてみるとSyntax Highlighterを使っているページでコード表示したものが全く表示できていませんでした。携帯用モバイルページとして表示されるからです。これではまずいと思ったので、改善したメモを記載します。

まず前提となりますが、以前の記事のようにBlogger HTML/JavascriptガジェットとしてSyntax Highlighterを埋め込んでいることとします。テンプレートにSyntax Highlighterの埋め込みコードを記述するのは簡単ですし、モバイル用テンプレートにも生に書けば動くと思います。しかしテンプレート変更した際に、それらの修正が失われることが多くやり直しが多かったです。BloggerのHTML/JavascriptガジェットとしてSyntax Highlighterを埋め込んでおけば、お好みのテンプレートに変更してもGadgetが維持され、Syntax Highlighterも有効なままというのが大きなメリットとなります。この前提で、モバイルページにも対応していきます。

まず以前の記事と同じ条件になっていることを確認。つまり、HTML/JavascriptガジェットとしてSyntaxHighlitherが埋め込まれていることです。ここでは、ガジェット名を"SyntaxHighlighter"とします。

次にBlogger Dashboardからテンプレートの設定を選択します。

モバイル用テンプレートの歯車アイコンをクリックし、

カスタムテンプレートを選択して保存します。

次にブログテンプレートの編集を選択し、

"ウィジェットへ移動"を選択します。するとプルダウンメニューとして幾つかWidgetが出てきます。ここでHTML#(#は番号)と表示されているものを選択します。
選択すると編集エディタの行がジャンプし、下記のような表示になるでしょう。
ここで注目するのはtitle属性です。前提として作成してあるHTML/Javascriptガジェットの名前は'SyntaxHighlighter'とすると書きましたが、お使いのガジェット名になるようにHTML#(#は番号)をプルダウンメニューから選択し直してください。ターゲット(Syntax Highlighter埋め込み)ガジェットが見つかったら、mobile属性を'yes'として追記します。
そして最後にテンプレートを保存して完了となります。