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

元にするテンプレートによって違いがあろうかと思います。
私がつまずいたり、調べた箇所をあげておきます。

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だと思います。

【ブログ内で関連ある記事】

スポンサーリンク

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

  1. 名前:SPOT NOTE みなとみらい : 投稿日:2014/12/19 13:49

    ここを参考にモバイルデザインのほうにウィジェットを対応させてみました。
    追加できたのですが、iPhone6とiPhone5など幅が違うとウィジェットの位置が左のよってみにくいなぁと思いました。
    ウィジェットを中央配置する方法はありませんでしょうか?

    CSSでできると思いいろいろ試したのですが、中央寄せにできるコードがわからずお手上げ状態になってしまいました。
    モバイルに限らずそれぞれのウィジェットをサイドバーの中で中央寄せにしたいです。

    直接記事の内容についての質問ではありませんが、よろしければご教授お願いいたします。
    また直接記事の下にくっつけたウィジェットでないアドセンスも中央寄せにする方法がありましたら教えていただけると幸いです。

  2. 名前:SPOT NOTE みなとみらい : 投稿日:2014/12/19 14:30

    すみません。よく調べてみたらウィジェットのほうは解決しました。
    ウィジェットのHTMLをいじればよかったみたいです。

    >また直接記事の下にくっつけたウィジェットでないアドセンスも中央寄せにする方法がありましたら教えていただけると幸いです。

    こちらのほう教えていただけたら幸いです。

  3. 名前:管理人 : 投稿日:2014/12/19 15:20

    >また直接記事の下にくっつけたウィジェットでないアドセンスも中央寄せにする方法がありましたら教えていただけると幸いです。

    記事に追記しました。

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

コメントを残す

メールアドレスは公開されません。
また、コメント欄には、必ず日本語を含めてください(スパム対策)。