スキップしてメイン コンテンツに移動

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>との間にラベルのソースコードを記載するだけでブログの記載のタイトル下に記事に設定したラベルが表示されるようになる。

参考:Bloggerのスマホ表示で記事下にラベル(カテゴリー)を表示させる方法 Bloggerのスマホ表示でタイトル下にラベル(カテゴリー)を表示させる方法

コメント

些細な日常の人気の投稿

PlayストアでAndroidアプリのダウンロードが非常に遅い場合の打開策

イメージ

ジャパネットたかたの丸尾詩織の商品説明に気持ちが入っていて素晴らしい理由

イメージ