2015年6月23日

ランキングの見た目を変える方法


ランキングの見た目を変える


Blogger ウィジェットで提供されている「ランキング(人気記事)」は見た目がちょっと物足りない感じがしない?

CSSを追加すると見た目を変えることができます。

元記事:5 Stylish Popular Post Widget For Blogger

元記事は英語ですので日本語で手順を紹介しますね。



設定方法


「人気記事」に設定したいと思う好みのスタイルを選んで、「View Code」をクリックします。

 ウィンドウが開いてCSS(カスケード・スタイル・シート)と呼ぶ装飾するためのコードが表示されますので全部選択してコピーします。



次に、テンプレート・デザイナーを開きます。

テンプレート・デザイナーは、「テンプレート」→「カスタマイズ」をクリックで開けます。



テンプレート・デザイナーが開いたら、


上級者向けをクリック、ページの部分をスクロールすると・・・


「CSSを追加」がでてきます。

そこに先ほどコピーした内容をペースト(貼り付け)します。

「ブログに適用」をクリックして完了です。

例1


例2




「人気の投稿」の見た目が変わります。


もし上手くいかない時には、


このCSSは、1つ目の「人気の記事」に適用するように作っていますので、2つ目(idがPopularPost1)でなければ適用されません。

もし適用されない場合には、idが違っている可能性がありますので一旦全ての「人気の投稿」を削除して作り直しするか、CSSを変更します。