2015年4月6日

ウィジェットをモバイルでも表示させる方法。Bloggerウィジェットの設定。

スポンサードリンク

 ウィジェットを追加すると、PCではすぐ表示されます。
しかし、スマホで見ると、そのウィジェットは表示されていません。

おやおや?と思ったら、
モバイル表示するように
少しテンプレートを変えるだけでOKでした。


モバイルでウィジェットを表示させたい


 でははじめましょう。

まず、好きなウィジェットを追加して下さい。
例えば、ラベル一覧や、メールフォームなど。


 次に、テンプレート→
テンプレート編集へいきます。

HTMLの編集をクリック。


 HTMLが表示されていると思います。

ウィジェットへ移動
をクリック。

すると、追加しているウィジェット一覧が出ますので、
その中から、該当ウィジェットを選びます。

今回はラベル一覧にします。


 Label1を選ぶと、
ラベル1のコードのあたりに連れて行ってくれます。

長いコードは折りたたまれているので、
黒い▼を押します。

すると、全て表示されます。


  <b:widget id='Label1' locked='false' title='ラベル一覧' type='Label'>
    <b:includable id='main'>
  <b:if cond='data:title'>
    <h2><data:title/></h2>
  </b:if>
  <div expr:class='&quot;widget-content &quot; + data:display + &quot;-label-widget-content&quot;'>
    <b:if cond='data:display == &quot;list&quot;'>
      <ul>
      <b:loop values='data:labels' var='label'>
        <li>
          <b:if cond='data:blog.url == data:label.url'>
            <span expr:dir='data:blog.languageDirection'><data:label.name/></span>
          <b:else/>
            <a expr:dir='data:blog.languageDirection' expr:href='data:label.url + &quot;?max-results=5&quot;'><data:label.name/></a>
          </b:if>
          <b:if cond='data:showFreqNumbers'>
            <span dir='ltr'>(<data:label.count/>)</span>
          </b:if>
        </li>
      </b:loop>
      </ul>
    <b:else/>
      <b:loop values='data:labels' var='label'>
        <span expr:class='&quot;label-size label-size-&quot; + data:label.cssSize'>
          <b:if cond='data:blog.url == data:label.url'>
            <span expr:dir='data:blog.languageDirection'><data:label.name/></span>
          <b:else/>
            <a expr:dir='data:blog.languageDirection' expr:href='data:label.url + &quot;?max-results=5&quot;'><data:label.name/></a>
          </b:if>
          <b:if cond='data:showFreqNumbers'>
            <span class='label-count' dir='ltr'>(<data:label.count/>)</span>
          </b:if>
        </span>
      </b:loop>
    </b:if>
    <b:include name='quickedit'/>
  </div>
</b:includable>
  </b:widget>


このようになっています。


 では、モバイル表示をさせたいと思います。

 mobile='yes'

を、追加するだけです。
どこに追加するかというと、

  <b:widget id='Label1' locked='false' title='ラベル一覧' type='Label'>

です。


 では、追加したコードがこちら。

  <b:widget id='Label1' locked='false' mobile='yes' title='ラベル一覧' type='Label'>

これでOK。

モバイルでも表示しますという指示です。

 mobile='no'

 mobile='only'

もあります。
が、ほとんど使わないと思います。


ここ注意点


 特に mobile='only'
に関しては、これを設定してしまうと、以後レイアウト上に
ウィジェットが表示されず、
他のウィジェットも配置変更ができなくなるというエラーが起こります。

なので使わないようにしています。


 ウィジェットに関しては、
 mobile='yes' を入れなければほとんどのウィジェットは非表示です。

ただし、デフォルトで

Header、
Blog、
Profile、
PageList、
AdSense、
Attribution

は表示されます。


 要注意はAdSenseです。
AdSenseは1ページに3つまでしか表示してはいけません。

うっかり、デジフォルトで表示されているのに気付かなくて
モバイルで4つ表示することのないようご注意を。

HTML専用ウィジェットに、
直接GoogleAdSenseコードを自分で貼り付けた場合は、
PC表示のみになっていると思います。

とにかくGoogleAdSenseは数に気をつけましょう。


 当ブログ内の情報は、
全ての方に応用できるとは限りません。

必ずテンプレートはバックアップを取っておいて下さいね。


また、ご利用は自己責任でお願い致します。

ラビットしま子は美容ライターであり、
サイト制作のプロではありません。

個別のカスタマイズについてのご相談は、
乗ってあげたいけど、乗れません。(わからんから)


スポンサードリンク