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

些細な日常

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

Bloggerのデフォルトのテンプレートのシンプルなどの旧テーマ(htmlタグにb:version='2'と記載されるもの)でモバイルにはウェブバージョンのように記事下にラベルが表示されない。

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

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

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のモバイルで記事のラベルをソースコードを使って記事下やタイトル下に表示する方法
  • 最終更新: 

コメント

最近の投稿

日付: 

コドリンガの悪魔の害虫と呼ばれる農業破壊の脅威

イメージ

人気の投稿

宜保愛子は本物の霊能力者だと考えられる三つの真実

イメージ

昭和から平成にかけてテレビや雑誌で何度も大きく取り上げられて物凄く活躍した霊能力者の 宜保愛子 がいた。何気なく昔のテレビ番組を観ていたら霊視は嘘だったと思えない内容で、本当にびっくりした。昔、そんなに引き付けられて観ていたわけではないし、改めて霊能力が本当かどうかを確かめようと...

平田監督の白井球審の誤審への抗議はパワハラへの強力な対処法に他ならない

イメージ

日本プロ野球で 佐々木朗希が完全試合を実現して 次の試合も八回まで無安打と無失点の状況で、次の試合はどうかと注目した4月24日の対オリックスバファローズ戦は初回の先頭打者の初球にヒットを打たれて五回に二失点を喫して連続の無安打と無失点が両方とも途絶えてしまった。 しかし予想外...

伊良部秀輝が自殺した原因はミッドライフクライシスによる鬱と飲酒だと考える

イメージ

プロ野球選手の 伊良部秀輝 が自殺したと知ってショックを受けたことがあった。もう十年以上前になる。2011年の夏、享年四十二と早過ぎたのに加えて大好きな投手の一人だったので、とても残念に感じた。 目次 伊良部秀輝が大好きだった記憶 負けても自分のスタイルを貫き通した 野球への...