2015年8月15日土曜日

スマホ向けモバイルサイトにブログ(Blogger)を最適化する方法


HTMLの記述を変えた後にガジェットの追加を消したり弄ったりすると「エラーが発生しました」と表示され、にっちもさっちもいかなくなる場合があるので…

HTMLの記述を変える前に
テンプレート>HTMLの編集から
メモ帳へHTMLをバックアップすしましょう。

テンプレートが別の場所で更新されました。元のページを再度読み込み、もう一度試してください。
http://indoorotaku.blogspot.jp/2015/04/blog-post_21.html

ここから最適化の方法


レイアウト>ガジェットを追加
でスマホに表示したい、お好きなガジェットを追加します。
タイトルを「(モバイル)」にします

テンプレートから

モバイルテンプレートを「カスタム」にして

HTMLの編集を開き

HTMLをメモ帳にコピペ
「検索」から

(モバイル)を見つけます。

 <b:widget id='HTML1' locked='false' mobile='yes' title='(モバイル)' type='HTML'>


titleの左側に

mobile='only'

を挿入します。



mobile='yes'

にしたい所ですが、そうするとスマホで表示されますが、URL(リンク)を踏むと、リンク先がPC(パソコン)向け表示へ強制的に戻ってしまうんです。
なのでPC表示用ガジェットとスマホ表示用ガジェットを2つ作り、片方をmobile='only'にすることにしました。

そうすると、リンクを踏んでもスマホ向け表示が維持されていました。




注意事項

「mobile='only'」を加えたガジェットがあるとレイアウトの保存ができなくなる。
なので、レイアウトの編集をしたい場合は、HTMLの編集から「mobile='only'」の記述を削除する必要がある。



寿司はえんがわ。~Engawa RotMG ブログ~
Bloggerでのhtmlをいじってのモバイル表示の変更
http://engawafc.blogspot.jp/2013/10/bloggerhtml_16.html


関連記事


Bloggerモバイルサイトに忍者アドマックスを貼る方法
http://indoorotaku.blogspot.jp/2015/03/blogger.html


0 件のコメント:

コメントを投稿

スポンサードリンク