bloggerの人気記事一覧をカスタマイズする方法

この記事には、アフィリエイト広告を利用しています。

スポンサーリンク

blogger 人気記事 カスタマイズ
photo credit: JR_Paris

bloggerには様々な機能があり、自由度が高いのがbloggerの超良い所なんですが、逆に、カスタマイズのやり方を知らない人にとっては、 bloggerの自由度は鬼畜そのものです。

そんなblogger初心者のために今回は、サイドバーの人気記事のカスタマイズ方法を紹介していきます。

ぜひ、参考にして下さい。

スポンサーリンク

今回の作業の流れ

最初に、今回の作業の流れをざっと説明していきます。

今回のカスタマイズでやることは、大きく分けて以下の3つです。

  1. 「レイアウト」から人気記事の編集をする
  2. HTMLに後述紹介するコードを指定の場所へコピー
  3. 後は自分の好みに合わせて少し修正を加える

それでは、実際に詳しく説明していきましょう。

1.「レイアウト」で人気記事の編集をする

まずは、bloggerの管理画面に入り、「レイアウト」をクリックします。

blogger-popular1

そしたら、サイドバーの所に「PopularPost」というガジェットがあるので、そこの「編集」をクリックします。

(お使いのテンプレートによっては、「PopularPost」の名前が若干異なる場合があります。

blogger-popular4

もし、サイドバーに「PopularPost」がなければ、上の部分にある「ガジェットを追加」から「PopularPost」を追加できます。

ガジェットを追加」をクリックした後に表示される画面を下にスクロールすれば、「人気の投稿」というガジェットがあるので、それを追加すればOKです。

blogger-popular3

話を元に戻して、「PopularPost」の編集ボタンをクリックした後は、下の画像のような画面が出てきます。

blogger-popular5-min

今回のカスタマイズでは、「画像のサムネイル」にチェックを入れ、「抜粋」のチェックを外します。

後の設定は、ご自由にどうぞ。

2.HTMLにコードをコピペする

1番の作業が終わった後は、「テンプレート」→「HTML」の流れで、HTMLコードの画面に行きます。

blogger-popular6-min

今回コードを貼り付ける部分は、colorとかwidthとかの文字が書かれている「CSS」の部分になります。

分かりやすいように、今回のカスタマイズでは、「body」の記述の後に、以下のコードを貼り付けました。

.PopularPosts ul li a{font: 15px verdana; color:#000000;text-decoration:none;}
.PopularPosts a:hover{color:#ff3300;}
.PopularPosts ul li{border-bottom:1px dashed #f2f2f2;}
.PopularPosts .item-thumbnail {margin: 0 20px 0 0;}
.PopularPosts .item-title {padding-top:10px;}
.PopularPosts .item-thumbnail img {
background:#f2f2f2;
height:90px; width:90px;
border:1px solid #fff;
padding:3px;
-moz-border-radius: 100px;
-webkit-border-radius: 100px;
border-radius: 100px;
-moz-box-shadow: 1px 1px 1px rgba(0, 0, 0, .1);
-webkit-box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);
box-shadow: 1px 1px 1px rgba(0, 0, 0, .1);}
a.mobile-postlink{
color:#000000;
}
.date-posts img{
padding-bottom:20px;
}

 上手く貼り付けれると、以下の様になります。

blogger-popular7-min

そして、完成した人気記事一覧がこちら。

シンプルな記事一覧ですが、デザインに手を加えている感があってオススメです。

blogger-popular8-min

タイトルとURLをコピーしました