スター レーティング(Star Rating)を表示させる

以下の三つについての紹介

• Bloggerのブログにスターレーティングを表示させる
• 表示されない場合の対処
• 背景色と文字色の調整

スターレーティングを表示させる

Blogger inDraftから入り[レイアウト]



[ブログの投稿]の[編集]をクリック



[スターレーティングを表示]にチェックを入れる



記事の下部に通常このように表示される。

表示されない場合

[HTMLの編集]へ移動し[ウィジットのテンプレートの展開]にチェックを入れます。



『<div class='post-footer-line post-footer-line-3'/>』を探す。
([Ctrl] + [F]キーを押してこの文字列を探せば早い)
※『/』はない場合もあるので探す際には注意。
『post-footer-line-3』は大概空なので『/』で閉じられているはず。


以下のコードを挿入

<div class='post-footer-line post-footer-line-3'>
   <span class='star-ratings'> 
      <b:if cond='data:top.showStars'> 
         <div expr:g:background-color='data:backgroundColor' expr:g:text-color='data:textColor' expr:g:url='data:post.absoluteUrl' g:height='42' g:type='RatingPanel' g:width='180'/> 
      </b:if>
   </span>
</div>

注意:
閉じられたタグに挿入した場合は終了タグを付け加えること。

<div class='post-footer-line post-footer-line-3'/>

                ↓

<div class='post-footer-line post-footer-line-3'>
...
</div>

これで表示されるはずです。

背景色と文字色の調整

背景色を変更する場合、上記で挿入したコードの中の
『expr:g:background-color='data:backgroundColor'』
この部分を修正します。

例えばテンプレートで以下のように背景色を指定しているとします。

<Variable name="contentbgcolor" description="記事の背景色" type="color" default="#ffffff" value="#ffffff">

これを利用すれば常に背景色と同じ色にすることが出来るのでこの値を利用し、以下のように書き換えます。

『expr:g:background-color='data:backgroundColor'』
                ↓
『expr:g:background-color='data:contentbgcolor'』

このように修正します。

また、『expr:』を削除して
『g:background-color='ffffff'』
とすることもできます。

文字色も以下のコード部分を上記と同じ方法で変更可能です。
『expr:g:text-color='data:textColor'』