Blogger：モバイルのテンプレートをカスタマイズ

うまく行かない場合は、モバイルのテンプレートの選択がカスタムになっていることを確認してみること。

◆地図のサイズを小さくする

BloggerにGoogle Map を張り込んでいるが、ＰＣ用に大きなサイズで張り込んでいるので、モバイルでは画面いっぱいになってしまい困っていた。

〈ﾘﾝｸ〉を参考にテンプレートのhtmlにコードを挿入した。
挿入したコードは以下の通り。

<b:if cond='data:blog.isMobile'>
<style>
  iframe{width:240px;height:240px;}
</style>
</b:if>

挿入した場所は、"</b:skin>"の後。こんな感じ。

</b:skin>
 
<b:if cond='data:blog.isMobile'>
<style>
  iframe{width:240px;height:240px;}
</style>
</b:if>
 
    <b:template-skin>

例（ＰＣ版）
例（モバイル版）

◆投稿タイトルのフォントを変更する

テンプレートのHTMLを（例えば）以下のように変更する。

.mobile h3.post-title {
  font: $(post.title.font);
  color: #66cc66;
  margin: 0;
}

以上