Bloggerのモバイルテンプレートのカスタマイズに挑戦しよう

  • 投稿 : 2013-06-06
  • 更新 : 2014-12-19
元にするテンプレートによって違いがあろうかと思います。
私がつまずいたり、調べた箇所をあげておきます。

http://blog.k05.biz/が現状以下の要素を組み込んでいます。

テンプレートを編集しても、モバイルに反映されない

テンプレートのモバイル テンプレートの設定を以下のようにする
・はい。携帯端末でモバイル テンプレートを表示する。
・モバイル テンプレートを選択 ->「カスタム

<b:if cond='data:blog.isMobile'>が動作するのも、上記設定の時だけのようです。

パソコンのブラウザである程度確認したい

・URLの後ろに、?m=1をつけてアクセス
・Chromeなら、FireMobileSimulator for Google Chromeを導入する

この2つの組み合わせで、ある程度まで確認できます。
FireMobileSimulator は、「最新端末リストから端末を追加」であとから、iPhoneやiPadなども追加可能です。

タイトル画像が大きくなって変になる場合

      <!--Show the image only-->
      <div id='header-inner'>
        <a expr:href='data:blog.homepageUrl' style='display: block'>
          <img expr:alt='data:title' expr:height='data:height' expr:id='data:widget.instanceId + &quot;_headerimg&quot;' expr:src='data:sourceUrl' expr:width='data:width' style='display: block'/>
        </a>

「expr:height='data:height'」と「expr:width='data:width'」を削除して試してみてください。

アドセンスをモバイルとPCとで切り替えたい

<b:if cond='data:blog.isMobile'>
モバイルの時のアドセンス
<b:else/>
PCの時のアドセンス
</b:if>
こんな感じ

アドセンスが表示されないときは、ブラウザからHTMLソースをみて実際に埋め込まれていることを確認してください。
HTMLソースにアドセンスコードがない場合は、「< を &lt;」「> を &gt;」を置き換えてください。

表示されることを確認して、HTMLソースをみてもともとのアドセンスのコードそのままであることを確認してください。

モバイルで表示幅がおかしい場合

<b:if cond='data:blog.isMobile'>
<meta name="viewport" content="width=device-width" />
</b:if>

モバイルの時だけ、viewport指定を追加するとよいかも。

モバイルでのみ反映されない箇所がある

PCとモバイルと書く場所が違うところがあります。
PCとモバイルの2か所を変更しないとダメなようです。

mobile-main
mobile-post
mobile-index-post
mobile-index-comment

あたりを変更

PCのCSSがモバイルで邪魔

<b:if cond='data:blog.isMobile'>
<style>
.sample{
 background-color:inherit ;
 border-left:none;
 float:none;
}
</style>
</b:if>
モバイルのことを考えずにPCのみ作成してしまったあとは、見直すのは難しいと思うので、邪魔なスタイルを打ち消すようなCSSを後ろに記述する

モバイルでサイドバー(ウィジェット)を表示させたい

<b:widget id='HTML1' mobile='yes' title='' type='HTML'>
mobile='yes'を付加すると、PCでもモバイルでも表示されるウィジェットになる

mobile - (オプション)'yes'、'no'、'only' のいずれかを指定できます。デフォルトは 'default' です。ウィジェットをモバイルで表示するかどうかを指定します。mobile 属性に 'default' を指定すると、モバイルでは Header、Blog、Profile、PageList、AdSense、Attribution が表示されます。
レイアウト用ページ要素タグについて - Blogger ヘルプ

詳細は上記が詳しいです。

モバイルで記事下に広告を入れたい

<b:includable id='mobile-post' var='post'>
省略

このあたり
<div class='post-footer'>
mobile-postを探してください。その中のpost-footerの上あたりがよいかと思います。

記事下の自動挿入されるアドセンス広告を中央寄せしたい

.inline-ad{
clear: both;
text-align: center;
}

記事下に自動挿入されるアドセンス広告のdivのクラス名は「inline-ad」なので、それに対してCSSを上記のように設定してあげればOKだと思います。

スポンサーリンク