Bloggerのラベル表示を記事タイトル下にも表示してみた。

Bloggerの記事タイトル下と記事下にAdSenseを設置したら、

モバイル（スマホ）での、記事下のラベル表示がされなくなってしまった。



記事タイトル下と記事下にAdSenseを設置する記事はこちら
→Bloggerの記事タイトル下と記事下にもAdSenseを貼ってみた。



調べたところ、Bloggerのヘルプで、

テンプレートのHTML編集を大幅に編集すると、表示されなくなることがあるらしい。

Bloggerのヘルプ－投稿にラベルが表示されない

→https://support.google.com/blogger/answer/74897?hl=ja

テンプレートのHTML編集から、

”ウィジェット テンプレートをデフォルトに戻す”で対処してみたら、

モバイル（スマホ）での、記事下のラベル表示はされるようになったが、

記事タイトル下と記事下のAdSenseは、

デフォルトに戻るため、表示されなくなる。

なので、記事タイトル下と記事下のAdSenseを表示したまま、

モバイル（スマホ）での、記事下のラベルを表示させる方法がわかったので、

やってみることにした。

参考サイト：Dr.ウーパのコンピュータ備忘録

上記のサイトがすごくわかりやすくて助かりました。

このサイトのとおりに、

ラベル表示のソースを表示したい場所に貼ってみた。

<span class='post-labels'>
   <b:if cond='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>

上記のコードがラベル表示に必要なコードになる。




モバイル（スマホ）での、記事下のラベル表示が消えた場合の再表示方法

BloggerのHTMLの編集画面のソースコードが書かれているところを、

どこでもよいのでクリックし、Ctrlキーと’F’を同時に押すと、

上の画像のように、’Search’という窓が開く。

そこにpost-footer-line post-footer-line-2を入力しEnterを押す。

さらにEnterを押すと２つ目の場所が表示される。

ここが記事下の位置になる。


自分が使っているSimpleのテンプレートの場合、

post-footer-line post-footer-line-2の記述は２か所。

最初のpost-footer-line post-footer-line-2がモバイルで、2つ目がPCになっていた。

なので、最初のpost-footer-line post-footer-line-2のすぐ下に、

上記のラベル表示コードを貼りつける。

すると、

モバイル（スマホ）での、記事下のラベル表示を復活させることができるはず。

Bloggerのラベル表示を記事タイトル下に表示する方法

ついでに、ラベル表示を記事タイトル下にも表示してみた。

BloggerのHTMLの編集画面のソースコードが書かれているところを、

どこでもよいのでクリックし、Ctrlキーと’F’を同時に押すと、

上の画像のように、’Search’という窓が開く。

そこにdiv class='post-header-line-1'を入力しEnterを押す。

さらにEnterを押すと２つ目の場所が表示される。


自分が使っているSimpleのテンプレートの場合、

div class='post-header-line-1の記述は２か所。

最初のdiv class='post-header-line-1がモバイルで、2つ目がPCになっていた。

なので、両方のdiv class='post-header-line-1のすぐ下に、

上記のラベル表示コードを貼りつける。

これで、記事タイトル下にもラベルを表示させることができるはず。

スポンサーリンク