こんにちは！テンプレートいじりがマイブームのtknriaです！
もともと用意してくれているテンプレートがちょいちょい気になり出したので、絶賛微調整中です☆
以前紹介した「Blogger 記事タイトル直下にアドセンスを設置したい」という記事がありますが、
PC版で大きい広告を設置しちゃうと、iPhoneで閲覧したときにはみ出すぎちゃうんですよね。
そこで、PC版に設置する広告と、モバイル版で設置する広告のサイズを変えたい！という要望や、
そもそもモバイルに特化したレイアウトにしたい！という、僕のようなわがままさんがいると思います。
それ、この記事にお任せください。
自己責任で！
■ BloggerのテンプレートをPC版とモバイル版で分けて編集したい！
HTMLの中身をよく見ると、実は簡単です。
「テンプレート」メニューをクリックし、「モバイル」の表示例の下にある歯車マークをクリック
↓
「はい。携帯端末でモバイルテンプレートを表示する。」を選択し、
「モバイルテンプレートの選択」で「カスタム」を選択して、「保存」
↓
「テンプレート」メニュー画面に戻るので、「HTMLの編集」をクリック
↓
「ウィジェットへ移動」から「Blog1」を選択
↓
<b:includable id='○○' var='●●'>という行が並んでいる箇所を探します。
この中で、
<b:includable id='main' var='top'>
<b:includable id='mobile-main' var='top'>
<b:includable id='post' var='post'>
<b:includable id='mobile-post' var='post'>
というように、似ているけど「mobile」と書いてあったりなかったりする部分があります。
なんとなく感付いた方もいると思いますが、
<b:includable id='main' var='top'>→PC版main部分
<b:includable id='mobile-main' var='top'>→モバイル版main部分
<b:includable id='post' var='post'>→PC版記事部分
<b:includable id='mobile-post' var='post'>→モバイル版記事部分
ですね。
ここで個別に設定することで、PC版とモバイル版のテンプレートを個別に編集することができます。
■ 億劫なあとがき
もっと自在にカスタマイズできるイケメンになりたい！
