TOPの記事にラベルを表示する方法【Orange ZELO】

【Orange ZELO】、【Prime ZELO】でTOP画面の記事一覧にラベルを表示する方法をご紹介します。

この記事では、パソコンの画面サイズで表示、703px以下（スマホ・タブレット）では表示しないように設定しています。

余白や色などの細かい部分はそれぞれ調整してください。

Orange ZELOについて、詳しくはこちらの記事をご覧ください。

>>Blogger最強テーマ【Orange ZELO】の機能・特徴を紹介します

*ZELOユーザーのジョゼさんが別のラベルデザインを作ってくれました。こちらも参考にしてください。

>>【Blogger】Orange ZELOでトップの記事一覧にラベル名をつける！

TOPの記事にラベルを追加【Orange ZELO】

この記事の通りに行うと、次のような見た目にすることができます。


まず、Bloggerの管理画面→『テーマ』→『HTML』の編集へ進みます。

HTMLの任意のところにポインタを置いた状態で、windowsなら『ctrl + f』、macなら『command + f』でhtml内の検索ボックスを表示します。

 検索ボックスに『top-content』と入力し、次の部分を探します。

<div class='top-content'>
<b:include data='post' name='postMeta'/>
<b:include data='post' name='postBodySnippet'/>
<b:include data='post' name='postTitle'/>
<b:include name='headerByline'/>
</div>

見つかったら、下から二行目の<b:include name='headerByline'/>のすぐ上に、次のラベルを表示するコードを貼り付けましょう。

<div class="top-labels">
  <b:loop index='i' values='data:post.labels' var='label'>
    <span class='a-label'>
      <data:label.name/>
    </span>
  </b:loop>
</div>

これで記事の一覧ページにラベルが表示されるようになりました。

次に、TOPページの『注目の投稿(一番上のやつ)』にもラベルをつけていきましょう。

『snippetedPostContent』と検索し、次の部分を探してください。

<b:includable id='snippetedPostContent'>
<b:include cond='data:this.postDisplay.showFeaturedImage and data:post.featuredImage' data='post' name='snippetedPostThumbnail'/>
<b:include cond='data:this.postDisplay.showTitle' name='snippetedPostTitle'/>
<b:include name='headerByline'/>
</b:includable>

あとは下から二行目の<b:include name='headerByline'/>のすぐ上に、先ほど貼り付けたラベルを表示するコードを追加してください。

見た目を整える


続いて、追加したラベルの見た目を整えるため、CSSを追加しましょう。

Bloggerの管理画面→『テーマ』→『カスタマイズ』へ移動して、テーマデザイナーを使用します。

『上級者向け』の項目を選択し、一番下にある『CSSを追加』を選択します。


あとは白いスペースに次のCSSを貼り付けましょう。

 .a-label {
    margin-right: 4px;
    padding: 2px 4px;
    font-size: 12px;
    color: #fff;
    background-color: #888;
 }
 @media ( max-width: 703px) {
.top-labels {
display: none;
    }
 }

TOPの記事にラベルを追加【Prime ZELO】

Prime ZELOも基本的にはOrange ZELOと同じ要領です。


Bloggerの管理画面→『テーマ』→『HTML』の編集へ進みます。

HTMLの任意のところにポインタを置いた状態で、windowsなら『ctrl + f』、macなら『command + f』でhtml内の検索ボックスを表示します。

検索ボックスに『top-content』と入力し、次の部分を探します。

<div class='top-content'>
<b:include data='post' name='postMeta'/>
<b:include data='post' name='postBodySnippet'/>
<div class="top-desc">
<b:include data='post' name='postTitle'/>
<b:include name='headerByline'/>
</div>
</div>

<b:include name='headerByline'/>のすぐ上に、次のラベルを表示するコードを貼り付けましょう。

<div class="top-labels">
  <b:loop index='i' values='data:post.labels' var='label'>
    <span class='a-label'>
      <data:label.name/>
    </span>
  </b:loop>
</div>

続いて、TOPページの『注目の投稿(一番上のやつ)』に設定します。

『snippetedPostContent』と検索し、次のような部分を見つけます。

<b:includable id='snippetedPostContent'>
<b:include cond='data:this.postDisplay.showFeaturedImage and data:post.featuredImage' data='post' name='snippetedPostThumbnail'/>
<div class="top-desc">
<b:include cond='data:this.postDisplay.showTitle' name='snippetedPostTitle'/>
<b:include name='headerByline'/>
</div>
</b:includable>

<b:include name='headerByline'/>のすぐ上にラベルを表示するコードを貼り付けましょう。

あとはテーマデザイナーを使用して、CSSを追加しましょう。

CSSの追加についてはOrange ZELOと同じ手順なので、Orange ZELOの方法をご覧ください。

まとめ

つけているラベルが長過ぎたり多すぎる場合、うまく表示されないこともあります。

ラベルの付け方はそれぞれ違うと思うので、参考にしてください。

テーマデザイナーの詳しい使い方はこちらをご覧ください。

>>【Blogger】テーマデザイナーの機能・使い方を徹底解説！

コメント