2月からBloggerに仲間入りして一ヶ月を超えた、その間、携帯・スマホでも見やすい画面にしようと、テンプレートをカスタマイズに切り替えて、いくつか手を加えたので忘れないうちに書いてみた。
各種の方法は、ググってみればいっぱい出てくるが、狙っているものとちょっと違うものがあったりして、試行錯誤した。

■スマホでアイコンが出ない

まずは定番のファビコンの設定である。PCで使う分には設定したとおりにファビコンが表示されたが、モバイルで表示されないことが判った。この時はモバイル版を使用しない設定にしてスマホでもファビコン出るようにした。
これらのファビコンの設定はこちらに書いた。
その後、スマホでPC画面のままを見るのは小さいので、モバイル版のカスタムに移行しようとしたが、エラーとなった。これはこちらで解決した。

■モバイル版で広告がでない

これで、スマホでも見やすくなったと思ったら、タイトルの下にAdSense広告が出ていない。ウィジットでコードは貼り付けているが、PCしか表示していなかった。
[テンプレート]→[HTML編集]→[ウイジットへ移動]でAdSenseのコードを入れているウィジットを選択し移動する。
下のように、mobile=’yes’ を追加する。

<b:widget id='HTML1' locked='false' mobile='yes' title='' type='HTML'>

こうすることで、スマホでも広告が表示されるようになるが、PCで表示していたものもデカいサイズのまま表示されるので、PC用とスマホ用に切り替えすることにする。
今回は、テンプレートのレイアウト編集でウィジットに貼り付けるものはPC用として、スマホ用はテンプレートに直接書き込んでPC用とスマホ用を切り替えるようにした。

<b:widget id='HTML1' locked='false' title='' type='HTML'>
<b:includable id='main'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != &quot;&quot;'>
  <h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
  <data:content/>
</div>

上のグレーにしている箇所が広告を表示している部分だ。ここにスマホ用を追加して切り替えるようにした。

<div class='widget-content'>
<b:if cond='data:blog.isMobile'>
   <!-- ads-head-banner -->
<b:else/>
   <data:content/>
</b:if>
</div>

黄色マーカーを追加し、AdSenseのコードは320x50を選んで<!-- ads-head-banner -->の位置にコピペした。

■モバイル版でアトリビューションが出ない

次に、ページの最下段フッターにある’Powered by Blogger’の前に、レイアウトのAttributionを編集というか文字を追加してPCでは下のように横一列に表示するが、スマホでは’Powered by Blogger’しか出ない。

© 2014 kiyosey. Powered by Blogger.

これは上に書いたウィジットにmobile=’yes’を追加するなど他のことも併せてやったがダメだった。
ここでは、Attributionウィジットを使わずテンプレートに直接書き込むようにした。また、スマホでは横の文字数が長くなると折り返るので、PC用とスマホ用で表示を変えるようにした。
まず、[テンプレート]→[HTML編集]→[ウイジットへ移動]でAttributionウィジットに移動する。
このウィジットは使わないので、次のようにする。

<!--
      <b:section class='foot' id='footer-3' showaddelement='no'>
        <b:widget id='Attribution1' locked='true' mobile='yes' title='' type='Attribution'>

　　　　～途中省略～

        </b:widget>
      </b:section>
-->
<div style='text-align: center;'>
<br/>
&#169; 2014 kiyosey.
<b:if cond='data:blog.isMobile'>
　　<br/> Powered by Blogger.
<b:else/>
　　 Powered by <a href='http://www.blogger.com' target='_blank'>Blogger</a>.
</b:if>
</div>

Attributionウィジットの上の行の<b:sectionから下の</b: sectionまでを<!--　　　-->で囲む。
その下には、新しく表示するためのコードを挿入する。
これで、PCでは1行、スマホでは2行表示してくれる。

© 2014 kiyosey.
Powered by Blogger.

■引用で枠線が出ない

私が使うテンプレートでは、引用でタグをセットしても枠が出なかった。これもついでにテンプレートにコードを追加した。
下の内容をテンプレートの550行付近に追加する。

.post-body blockquote {
border: 1px solid #a7a7a6;
padding: 15px 10px 15px 40px;
margin:20px;
background-color:#ffffe8;
}

もし、間違いやもっと良い方法があればお知らせください。