2013-10-16

Bloggerでのhtmlをいじってのモバイル表示の変更




スポンサードリンク










長いことブログをモバイル表示用に対応させてなかったんですけど(パソコンで見るのそのままが携帯でも表示されてた)、思いのほか携帯から見にくる人って多いんですよね。





これは手を打たねばいかんなと、htmlをいじってモバイル表示も頑張りました。内容としてはほぼ前回の記事の続きみたいなもんです。(⇒Bloggerでのhtmlをいじってのフォントサイズとかレイアウトとか変更)












● 通常のモバイルカスタマイズは見た目を変えられるだけ


Bloggerはモバイル表示を簡単にできるのはできるんですが、モバイルで表示させる内容のカスタマイズは直接htmlをいじらない限りさっぱりできません。









ここがモバイル表示カスタマイズのための項目ですが、ほんとに単に見た目を変えられるだけ。

それも、テンプレートによっておおざっぱに変えられるだけです。



関連記事や広告を表示させるとか、いらないものは表示させないとかの、項目の足したり引いたりはなんにも出来ない。




なので、直接htmlをいじっていくことになります。











まずはじめに、モバイル テンプレートは、必ず「カスタム」を選んでおくこと。これでないと、htmlをいじって変更を加えても反映されません。




この「カスタム」を選んだ場合、パソコンでのブログの見た目がそのままベースとなります。


私の場合「カスタム」を選ぶと、backcolorが真っ赤になってしまっていて読みづらいことこの上なく、それでモバイル表示にしていませんでした。(いまは黒に変えてあります)











● モバイル用カスタマイズあれこれ



・表示項目の足したり引いたり(ウィジェット単位)



モバイルでの表示項目の選択は、ウィジェット単位なら簡単に行うことができます。(ウィジェット単位以外でのやり方は私にはわかりません^^;)


html上で頭に「<b:widget」とついているタグの中に、「mobile='~'」の一文を加えればそれだけでokです。最初から勝手に表示されているものを消すこともできます。


「mobile='yes'」⇒モバイルでも表示させる
「mobile='no'」⇒モバイルでは表示させない
「mobile='only'」⇒モバイルだけ表示させる





ウィジェット単位とは具体的になんのことかというと、このレイアウトの画面上で足したり引いたりできるひとつひとつの項目のことです。


直接htmlに書き加えて記事下とかに表示させているようなものはこれらとは違うので、また別のやり方が必要だと思います。


なおモバイルで表示させる項目の表示の順番については、どう変えられるのか私にはわかりません。(メインの順番を変えてしまえばそれにともなって変わるでしょうけど)




※mobile='only'は要注意


モバイルだけに表示させるようにする「mobile='only'」なんですが、じつはこいつを使おうとすると問題が起こります。


「mobile='only'」を加えたウィジェットがあると、以降レイアウトの変更の保存が一切できなくなるのです。


「mobile='only'」を加えるとそのウィジェットはレイアウトの項目から消えてなくなるようになっているのですが、でもhtml上には<b:widget>のひとつとして存在するので、その不整合によって保存ができなくなるというバグが生じるのかと思われます。



「mobile='only'」を使いたければ、以降はレイアウトの変更は行わないか、変更のたびにhtml上の「mobile='only'」を一時的に消すかする必要があります。







・邪魔なgoogle+ボタンを消す



記事下に勝手にgoogle+のボタンが表示されるようになっていて、これはウィジェットとは独立して存在しているようです。


こいつを消したければ、html上で黄色の枠線で囲った部分をまるごと消してください。







・バックカラーの変更



ここの下線を引いた部分がモバイルでのバックのカラーになっています。それ以外にも、モバイル表示の細かい調整はこのあたりに固まっている項目をいじればできるだろうと思います。(私は必要を感じなかったのでいじってませんけど)











● 携帯で見にくる人ってほんとに多い


ここ一ヶ月で私のこのブログにやってきた人は、パソコンと携帯とでちょうど半々ずつの割合になっています。まさに半分の人は携帯で見てるんですよね。(ちゃんと統計として有意な数)



世界のパソコンの出荷台数も減少してるというし、どんどんスマホとかタブレットのほうへ主軸が移行していくんだろうなあ。




パソコン上で見られることだけを意識してやってるようじゃもうダメということですね。







スポンサードリンク


  • このエントリーをはてなブックマークに追加

3 件のコメント:

  1. ありがとうございます!グーグルプラスボタン消すことができました!ありがとうございます!

    返信削除
  2. mobile='only'はバグだったんですね。エラーで困ってました!
    Engawaさんが解説してくれて、解決してスッキリしました。ありがとう

    返信削除
  3. もはや自分がどんなことを書いてたのかすらほとんど覚えてないんですが、
    公開しておくと誰かのお役に立つこともあるようでうれしいです。

    返信削除