Bloggerのモバイルで記事のラベルをソースコードを使って記事下やタイトル下に表示する方法

デフォルトのテンプレート（シンプルなどの旧テーマ）でモバイルのBloggerブログにはウェブバージョンのように記事下にラベルが表示されない。

関連記事へのリンクが全くないのは多少とも使い辛いので、モバイルでも記事下にラベルを表示したいと思って調べてみた。

するとブログのマークアップにウェブバージョンでラベルを表示するソースコードがあってそれをモバイルのところにも追加すれば大丈夫だった。

<span class='post-labels'>
  <b:if cond='data:top.showPostLabels and data:post.labels'>
    <data:postLabelsLabel/>
    <b:loop values='data:post.labels' var='label'>
      <a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='not data:label.isLast'>,</b:if>
    </b:loop>
  </b:if>
</span>

シンプルテンプレートで元々のspanタグの「post-labels」のソースコードが1540行辺りに置かれていてdivタグの「post-footer-line／post-footer-line-2」の中に収まって記事下に出力されている。

モバイルでもdivタグのクラスは同じで、1380行辺りにある。なのでウェブバージョンと同じようにspanタグのクラスを収める。

元々はGoogleの+1ボタンのソースコードが置かれていてブログで消したければ削除するけど、さもなければ上下のどちらかにラベルのソースコードを置くとモバイルても記事下の名前や時刻に続いて記事に設定したラベルが表示されるようになる。

Bloggerでラベルのソースコードを使えばブログの色んなところにラベルを表示することができる。

一般的に良く見かけるのは記事のタイトル下なので、例として挙げておくとdivタグの「post-header-line-1」に収めて置いておくと大丈夫だ。

HTMLに二ヵ所が記載されていて1450行辺りがウェブバージョンで、1340行辺りがモバイルで表示される位置になっている。

どちらもデフォルトでは何も入ってないから直後の閉じタグの</div>との間にラベルのソースコードを記載するだけでブログの記載のタイトル下に記事に設定したラベルが表示されるようになる。

参考サイト

コメント