クリック率UP!関連記事を見やすくカスタマイズする方法

クリック率UP!関連記事を見やすくカスタマイズする方法

前回、関連記事を表示するガジェットとして「Smarter Related Posts Widget for Google Blogger - v2.0」をご紹介しましたが、今回はその「Smarter Related Posts Widget for Google Blogger - v2.0」で作られる関連記事のリストを、見やすくカスタマイズする方法をサンプルコード付きでご紹介:)

まだ関連記事を表示されていない方はこちらを先にどうぞ。

前回の記事:オススメガジェットはコレ!関連記事の表示方法

SPONSORED LINK

関連記事サンプル集

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

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

関連記事サンプル1

アイコンタイプ

【HTML】

<!--~~~~~~~~~~~~~~~~~ Include these JS files once: jQuery then plugin -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="http://blogger-related-posts.googlecode.com/files/jquery.related-posts-widget-2.0.min.js"></script>
<!---~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->


【CSS】

@font-face {
  font-family: 'FontAwesome';
  src: url('http://netdna.bootstrapcdn.com/font-awesome/4.0.3/fonts/fontawesome-webfont.eot?v=4.0.3');
  src: url('http://netdna.bootstrapcdn.com/font-awesome/4.0.3/fonts/fontawesome-webfont.eot?#iefix&v=4.0.3') format('embedded-opentype'),
       url('http://netdna.bootstrapcdn.com/font-awesome/4.0.3/fonts/fontawesome-webfont.woff?v=4.0.3') format('woff'),
       url('http://netdna.bootstrapcdn.com/font-awesome/4.0.3/fonts/fontawesome-webfont.ttf?v=4.0.3') format('truetype'),
       url('http://netdna.bootstrapcdn.com/font-awesome/4.0.3/fonts/fontawesome-webfont.svg?v=4.0.3#fontawesomeregular') format('svg');
  font-weight: normal;
  font-style: normal;
}
.related-posts-widget h2,
.related-posts-widget ul,
.related-posts-widget li {
  margin: 0 !important;
  padding: 0 !important;
}
.related-posts-widget h2,
.related-posts-widget li {
  text-indent: -1em !important;
  padding-left: 1em !important;
}
.related-posts-widget h2 {
  font-size: inherit !important;
  margin-bottom: .5em !important;
}
.related-posts-widget li {
  list-style-type: none !important;
}
.related-posts-widget h2:before,
.related-posts-widget li:before {
  font-family: FontAwesome;
  font-style: normal;
  font-weight: normal;
  line-height: 1;
  margin-right: .3em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.related-posts-widget h2:before {
  content: "\f002";
}
.related-posts-widget li:before {
  content: "\f00c";
}

関連記事サンプル2

サムネイル横タイプ

【HTML】

<!--~~~~~~~~~~~~~~~~~ Include these JS files once: jQuery then plugin -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="http://blogger-related-posts.googlecode.com/files/jquery.related-posts-widget-2.0.min.js"></script>
<!---~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->


【CSS】

.related-posts-widget h2,
.related-posts-widget ul,
.related-posts-widget li {
  margin: 0 !important;
  padding: 0 !important;
}
.related-posts-widget li {
  list-style-type: none !important;
}
.related-posts-widget img {
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
}
.related-posts-widget h2 {
  font-size: inherit !important;
  margin-bottom: .5em !important;
}
.related-posts-widget ul a:before ,
.related-posts-widget ul a:after {
  content: "";
  display: block;
  overflow: hidden;
}
.related-posts-widget ul a:after {
  clear: both;
}
.related-posts-widget ul a {
  zoom: 1;
}
.related-posts-widget ul li {
  margin-bottom: 1% !important;
}
.related-posts-widget ul li a {
  display: block;
}
.related-posts-widget ul li a span {
  display: block;
  float: left;
  width: 18%;
}
.related-posts-widget ul li a span img {
  height: auto;
  width: 100%;
}
.related-posts-widget ul li a strong {
  display: block;
  padding-left: 20%;
}

関連記事サンプル3

サムネイル横カードタイプ

【HTML】

<!--~~~~~~~~~~~~~~~~~ Include these JS files once: jQuery then plugin -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="http://blogger-related-posts.googlecode.com/files/jquery.related-posts-widget-2.0.min.js"></script>
<!---~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->


【CSS】

.related-posts-widget h2,
.related-posts-widget ul,
.related-posts-widget li {
  margin: 0 !important;
  padding: 0 !important;
}
.related-posts-widget li {
  list-style-type: none !important;
}
.related-posts-widget img {
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
}
.related-posts-widget h2 {
  font-size: inherit !important;
  margin-bottom: .5em !important;
}
.related-posts-widget ul:before ,
.related-posts-widget ul:after,
.related-posts-widget ul li a:before ,
.related-posts-widget ul li a:after {
  content: "";
  display: block;
  overflow: hidden;
}
.related-posts-widget ul:after,
.related-posts-widget ul li a:after {
  clear: both;
}
.related-posts-widget ul,
.related-posts-widget ul li a {
  zoom: 1;
}
.related-posts-widget ul li {
  float: left;
  width: 50%;
}
.related-posts-widget ul li a {
  display: block;
  padding: 2% 3%;
}
.related-posts-widget ul li a span {
  display: block;
  float: left;
  width: 40%;
}
.related-posts-widget ul li a span img {
  height: auto;
  width: 100%;
}
.related-posts-widget ul li a strong {
  display: block;
  padding-left: 44%;
}

関連記事サンプル4

サムネイル縦タイプ

【HTML】

<!--~~~~~~~~~~~~~~~~~ Include these JS files once: jQuery then plugin -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="http://blogger-related-posts.googlecode.com/files/jquery.related-posts-widget-2.0.min.js"></script>
<!---~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->


【CSS】

.related-posts-widget h2,
.related-posts-widget ul,
.related-posts-widget li {
  margin: 0 !important;
  padding: 0 !important;
}
.related-posts-widget li {
  list-style-type: none !important;
}
.related-posts-widget img {
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
}
.related-posts-widget h2 {
  font-size: inherit !important;
  margin-bottom: .5em !important;
}
.related-posts-widget ul {
  display: table;
}
.related-posts-widget ul li {
  border-right: solid 1px #ddd;
  display: table-cell;
  vertical-align: top;
  width: 20%;
}
.related-posts-widget ul li:last-child {
  border-right: none;
}
.related-posts-widget ul li a {
  display: block;
  padding: 0 6%;
}
.related-posts-widget ul li a img {
  height: auto;
  width: 100%;
}

関連記事サンプル5

サムネイル縦カードタイプ

【HTML】

<!--~~~~~~~~~~~~~~~~~ Include these JS files once: jQuery then plugin -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="http://blogger-related-posts.googlecode.com/files/jquery.related-posts-widget-2.0.min.js"></script>
<!---~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->


【CSS】

.related-posts-widget h2,
.related-posts-widget ul,
.related-posts-widget li {
  margin: 0 !important;
  padding: 0 !important;
}
.related-posts-widget li {
  list-style-type: none !important;
}
.related-posts-widget img {
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
}
.related-posts-widget h2 {
  font-size: inherit !important;
  margin-bottom: .5em !important;
}
.related-posts-widget ul:before ,
.related-posts-widget ul:after {
  content: "";
  display: block;
  overflow: hidden;
}
.related-posts-widget ul:after {
  clear: both;
}
.related-posts-widget ul {
  zoom: 1;
}
.related-posts-widget ul li {
  float: left;
  width: 33%;
}
.related-posts-widget ul li a {
  display: block;
  padding: 5%;
}
.related-posts-widget ul li a span {
  display: block;
}
.related-posts-widget ul li a span img {
  height: auto;
  width: 100%;
}
.related-posts-widget ul li a strong {
  display: block;
}

関連記事をブログに追加する方法

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

以前の記事:オススメガジェットはコレ!関連記事を表示する方法

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

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

まとめ

というわけで、関連記事を見やすくカスタマイズする方法のご紹介でした。

このカスタマイズを機に、バンバンクリックされること間違いなし:)

SPONSORED LINK

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