人気の記事をサムネイル付きで綺麗に表示する方法

人気の記事をサムネイル付きで綺麗に表示する方法

以前、人気の記事をブログに表示する方法をご紹介しましたが、今回はその人気の記事をサムネイル付きで奇麗に表示する方法をサンプルコード付きでご紹介:)

まだブログに人気の記事を表示していない方はこちらの記事もあわせてどうぞ。

以前の記事:直帰率が高い人必見!人気の記事を表示する方法

SPONSORED LINK

人気の記事サンプル集

サンプルの中から好みのデザインを見つけてご自由にお使いください。

文字の色や文字の大きさなどはお好みにあわせ変更すれば、なおのことよろしいようで:)

人気の記事サンプル1

【ガジェットの設定】

※期間と表示件数はお好みにあわせて設定してください。

【CSS】

.popular-posts ul, .popular-posts ul li {
  margin: 0 !important;
  padding: 0 !important;
}
.popular-posts ul li {
  list-style-type: none;
  margin-bottom: .5em !important;
}
.popular-posts .item-thumbnail {
  float: left;
  margin: 0;
  width: 72px;
}
.popular-posts .item-thumbnail img {
  padding: 0;
}
.popular-posts .item-title {
  padding: 0 0 0 82px;
}

人気の記事サンプル2

【ガジェットの設定】

※期間と表示件数はお好みにあわせて設定してください。

【CSS】

.popular-posts ul, .popular-posts ul li {
  margin: 0 !important;
  padding: 0 !important;
}
.popular-posts ul li {
  list-style-type: none;
  margin-bottom: 1em !important;
}
.popular-posts .item-thumbnail {
  float: left;
  margin: 0;
  width: 72px;
}
.popular-posts .item-thumbnail img {
  padding: 0;
}
.popular-posts .item-title,
.popular-posts .item-snippet {
  padding: 0 0 0 82px;
}
.popular-posts .item-title {
  font-size: 1.3em;
  margin-bottom: .5em;
}

人気の記事サンプル3

【ガジェットの設定】

※期間と表示件数はお好みにあわせて設定してください。

【CSS】

.popular-posts ul, .popular-posts ul li {
  margin: 0 !important;
  padding: 0 !important;
}
.popular-posts ul li {
  counter-increment: popular-count;
  list-style-type: none;
  margin-bottom: .5em !important;
  position: relative;
}
.popular-posts ul li:before {
  background-color: #000;
  color: #fff;
  content: counter(popular-count);
  height: 20px;
  left: 0;
  line-height: 20px;
  position: absolute;
  text-align: center;
  top: 0;
  width: 20px;
  z-index: 10;
}
.popular-posts .item-thumbnail {
  float: left;
  margin: 0;
  width: 72px;
}
.popular-posts .item-thumbnail img {
  padding: 0;
}
.popular-posts .item-title {
  padding: 0 0 0 82px;
}

人気の記事サンプル4

【ガジェットの設定】

※期間と表示件数はお好みにあわせて設定してください。

【CSS】

.popular-posts ul, .popular-posts ul li {
  margin: 0 !important;
  padding: 0 !important;
}
.popular-posts ul li {
  counter-increment: popular-count;
  list-style-type: none;
  margin-bottom: .5em !important;
  padding: 10px !important;
  position: relative;
}
.popular-posts ul li:before {
  background-color: #000;
  border-radius: 50%;
  color: #fff;
  content: counter(popular-count);
  height: 20px;
  left: 0;
  line-height: 20px;
  position: absolute;
  text-align: center;
  top: 0;
  width: 20px;
  z-index: 10;
}
.popular-posts .item-thumbnail {
  float: left;
  margin: 0;
  width: 72px;
}
.popular-posts .item-thumbnail img {
  padding: 0;
}
.popular-posts .item-title {
  padding: 0 0 0 82px;
}

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

ガジェットの設定方法はこちらの記事を参考にどうぞ。

以前の記事:直帰率が高い人必見!人気の記事を表示する方法

CSSの追加方法はこちらの記事を参考にどうぞ。

以前の記事:カスタマイズ初級編!CSSを編集する方法

まとめ

というわけで、人気の記事をサムネイル付きで綺麗に表示する方法のご紹介でした:)

これで味気なかった人気の記事ともおさらば!!

SPONSORED LINK

この記事がお役にたちましたらシェアをお願いします:)