Bloggerでラベルを目立つように表示させる方法

Bloggerでの記事のタグ付けとかカテゴリー分けはラベルと呼ぶようです。テンプレートそのままのラベル表示だと地味でブログを見に来てくれた人は気づかないかもしれません。
他の記事へと誘導するための基本の一つがラベルです。もうちょっと目立つように表示させてみます。

そしてモバイル向けテンプレートではラベルが表示されないのも不満でした。モバイル端末でもラベルが表示されるように改造してみましょう。

ラベル表示をいじるにはHTMLを編集しなくてはなりません。どこをいじれば良いのか慣れないと判らないと思います。
Bloggerの画面はほぼすべてWidgetにより表示されます。ブログの記事は"Blog"というWidgetが表示する事になっています。テンプレートでHTMLの編集画面にして探してみましょう。
すると次の様な行が見つかるはずです。

<b:widget id='Blog1' locked='false' title='ブログの投稿' type='Blog'>

これが記事を表示するWidgetの開始行です。ここから</b:widget>で閉じられる範囲までがBlog Widgetになります。記事表示に関するすべてはこの中にあります。ラベルを表示させる場合もこの中のどこかを変更してやればできます。

もう少しWidgetの構造を見てみましょう。行番号が表示されている部分をクリックするとブロックを折りたたんだり、展開したりできます。"b:includable"で始まるブロックが沢山あるはずです。

Blog Widgetの構造

"b:includable"というのはプログラム言語でいう関数のようなものだそうです。他から関数を呼び出すと動きます。
例外は"id='main'"と書かれているincludableブロックです。これは必ず実行されます。この部分に他のincludableブロックを呼び出す文　"b:include"が書かれています。

includable行のidには固有の名前、関数名に相当する名前が付けられています。ここを見ると何をしているか大雑把に判ります。細かくは"id='main'"のincludableブロックの中を見る必要があります。

ラベルを表示させるincludableブロックを追加する

ラベルを表示させたいのは、記事一覧表示の時、個別記事の時、モバイルで記事一覧の時、モバイルで個別記事の時の4場面です。
これらの表示画面を作る場所を改造します。複数個所でラベルを表示するコードを追加しますが、ほぼ同じコードを繰り返す使う事になりますので、ラベル表示のコードをincludableブロックにしてみましょう。

それではラベルを表示させるincludableブロックを作ってみましょう。まず、基本となるコードはデフォルトで表示されているラベル表示部分のコードを見つけてコピーします。"post-labels"というキーワードで探すと見つかります。
結論だけ書くと次のようなincludableブロックを追加します。

<b:includable id='my-labels-include' var='post'>
<span class='post-labels my-labels'>
 <b:if cond='data:post.labels'>
    <b:loop values='data:post.labels' var='label'>
      <a expr:href='data:label.url' rel='tag'>
       <data:label.name/>
      </a>
    </b:loop>
 </b:if>
</span>
</b:includable>

記事にラベルがあればラベルをリンク表示するHTMLコードを出力しています。
includableブロックの名前として'my-labels-include'と付けました。呼び出すときはこの名前を使います。
spanでクラス名に"my-labels"と付けておきます。CSSで表示を変える時にはこのクラス名を指定します。

このincludableブロックを先ほどのBlog Widget内に置いてやります。場所はBlog Widgetの終わり"</b:widget>"の上の行が良いでしょう。
一度保存してHTML編集をし直すとincludableブロックがABC順に並べ変わっていますので、無くなった！と慌てないでください。

ラベルを表示する場所からincludableを呼び出す

次はラベルを表示したい場所で先ほどのincludableブロックを呼び出すとラベルが表示されます。
呼び出すコードは次のようになります。includeブロックを使います。

<b:include name='my-labels-include' data='post'/>

表示させたい場所は記事一覧表示の時、個別記事の時、モバイルで記事一覧の時、モバイルで個別記事の時の4場面です。
どこにコードを追加すれば良いのでしょうか？

モバイルの一覧用

まずは　b:includable id='mobile-index-post'　のブロックにあります。id名からわかるようにモバイル表示の記事一覧を表示するブロックです。

最初、モバイルの記事一覧の記事タイトル直下にラベルを表示させましたが見た目のバランスが悪いため、記事要約の下に表示させます。
場所は次のDivブロック'mobile-post-outer'の近くです。

<div class='mobile-post-outer'>

このdivブロックから始まる部分が記事一つの枠となります。このブロック内に配置すれば良いのです。今回は"<div class='mobile-index-comment'>"の真上に置いてみます。

<div style='clear: both;'/>
</a>
<b:include data='post' name='my-labels-include'/>
<div style='clear: both;'/>
<div class='mobile-index-comment'>

こんな感じで呼び出します。

モバイルの記事表示用

次はモバイルでの個別記事での表示です。
これは次のincludableブロックで表示されます。次の行を探します。

<b:includable id='mobile-post' var='post'>

このブロック内の構造は判りやすくdivブロックに分かれています。記事タイトルの直下に表示させるには

 <div class='post-header-line-1'>

を探し、このすぐ下に先ほどのコードを書けば良いでしょう。

<div class='post-header'>
<div class='post-header-line-1'>
<b:include data='post' name='my-labels-include'/>
<div style='clear: both;'/>

こんな風にですかね。

記事表示用

次はモバイルではない場合の表示です。次のincludableブロックを探します。

<b:includable id='post' var='post'>

idからわかるように記事を表示するブロックです。
記事のタイトル部分は一覧用表示と記事個別表示で同じになっているようです。
ここもdivブロックがわかりやすく構造化されているので先ほどのモバイル用表示と同じ様な場所を探します。

<div class='post-header'>
<div class='post-header-line-1'>
<b:include data='post' name='my-labels-include'/>
<div style='clear: both;'/>

これで記事タイトルの下にラベルが表示されます。

ラベル用CSSを追加する

以上のコードの追加だけではラベルの表示が変ですね。CSSでスタイルを整えましょう。

/*↓ラベル用*/
.my-labels{ 
  margin:0; 
  padding:0; 
  position:relative; 
}
.my-labels a{ 
  float:left; 
  text-decoration:none; 
  position:relative; 
  margin-bottom:1px;
  margin-left:2px;
  margin-right:8px; 
  padding:0 10px 0 12px; 
  background:#7a5d5d; 
  color:#fff; 
}
.my-labels a:hover{background:#000000;}  
.my-labels a:hover:before{border-color:transparent #000000 transparent transparent;}
/*↑ラベル用*/

クラス名”my-label”で指定できますのでお好きなように設定してみましょう。

-----

このブログを検索

Signal Flag "Z"