ランキングの見た目を変える方法
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEheL6ICh_GBuOLxSGCzu4eh6Kob14nbx1Gt5onYxZ9YoTaUt2P7yO1GW51NnGLW8_Gxl3ag_4IElB0funb_L8-hy-9cavJVt8NP8rjLSSULD_I7DTqWLLTXwthQT85myzNa5t4G16Wp6do/s400/bloggerlogo-large.png)
ランキングの見た目を変える
Blogger ウィジェットで提供されている「ランキング(人気記事)」は見た目がちょっと物足りない感じがしない?
CSSを追加すると見た目を変えることができます。
元記事:5 Stylish Popular Post Widget For Blogger
元記事は英語ですので日本語で手順を紹介しますね。
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgpSwkyJeqPrH9lA1_pcK_p2tDRV9SEL47m2IO-N5RTlXB0yjihwH0Wg5eC9vs8IATxKGnJ6QdL65CyiYbl8BQRHZTgJHGsucavTZlqRcx4Ce9trUCZ_k0ppydu4tW0zBT432sBtELkQeQ/s1600/popularpost-screenshot.png)
設定方法
「人気記事」に設定したいと思う好みのスタイルを選んで、「View Code」をクリックします。
ウィンドウが開いてCSS(カスケード・スタイル・シート)と呼ぶ装飾するためのコードが表示されますので全部選択してコピーします。
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfdeByNX-KGBfv2qq8PISWuBas1kNWliGMrViZGzWW4hHXgA2rlctkaA2adS27ptW5f10t5ReSvAZx6LxECvnl0zpGvpl2q-kUMWB7qtDWNPRH708BkLtEgKynzLobV1Ok8k1dVI0CZiA/s320/popularpost-5style-code.png)
次に、テンプレート・デザイナーを開きます。
テンプレート・デザイナーは、「テンプレート」→「カスタマイズ」をクリックで開けます。
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiK_g6t8o0z7WsIUDyGUKXmfoNaTD4jilsqApHuSyRsbNCiJ9fgegvzJlSmkDxvfyhLYZs5o0oejgRuFF0fcQRomM522SZbmNFRCJJP-lsoVUVyLKsJ4JI3iwk50uJCSjZhkFPhJF-qPGA/s1600/blogger-layout-template.png)
テンプレート・デザイナーが開いたら、
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9WwWpc-QiWUrbRVJBx5OjFGD4HqWZIdzN1tFOXoFsRdD3IfG7_zGwZ5r2di7hqK9H7q6tjvdc8FxYgaXFDw4PgvIQcIdZKNMxFJ0nn4QxSse_gA7N0xxb9BYdgYHytpA37oXFHdiQpKs/s1600/templatedesigner-advanced.png)
上級者向けをクリック、ページの部分をスクロールすると・・・
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjeS4Qjc1kKuEpRc6UMgMs4BcHQIRotM57UTjtk2kBsawzKB6d5Ks_wgnIdz3pnKTjzVpBH9r6d64WTfHeMl84HoYd6yD4KyBDyZc4ByGycxYjZrrPLkXA0n7wGaa1tGNi2KWFgfkssdxw/s1600/template-designer-advance-css.png)
「CSSを追加」がでてきます。
そこに先ほどコピーした内容をペースト(貼り付け)します。
「ブログに適用」をクリックして完了です。
例1
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZqtZR69udkUHwP25WZ6wbUHRYiA03jvh-MdTBjWjvFud98sGzO3Fx_BchMzvMy0YyKGI0AYfoaj9s6sce_eGqVwRSyOb2KhBUCgrok3jhYrEx6RgmLQQyIzJ8al24_b1pcEiZsZr10o8/s1600/popularpost.png)
例2
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_LvEk1qNQpsEk3ywhUmGG7L0AXHIy-QOiBVK89JYyaDTE7b6AhMPCPOXT3lhADkZ2SbUqpipZtpg9xCUeUISlVGuTaGquS835a_1-06OyGX9hynQvn9iJSE936NlGgKY5l-XU-Dcgetw/s1600/popularposts-type1.png)
「人気の投稿」の見た目が変わります。
もし上手くいかない時には、
このCSSは、1つ目の「人気の記事」に適用するように作っていますので、2つ目(idがPopularPost1)でなければ適用されません。
もし適用されない場合には、idが違っている可能性がありますので一旦全ての「人気の投稿」を削除して作り直しするか、CSSを変更します。