2010年9月1日水曜日

Bloggerに「人気の記事」を追加する

スポンサーリンク

Bloggerに「人気の記事」を追加しました。

以前、Sexy Bookmarksの導入でお世話になった「Blogger カスタマイズ情報ブログ」さんのところで紹介されていたものです。
それを早速導入しました。


参考にさせて頂いたサイト様


前述の通り、参考にさせて頂いたのは「Blogger カスタマイズ情報ブログ」さんです。

記事には導入の方法から、正確な表示の為のポイントまでかかれています。
説明画像もありますので、とても分かりやすい記事です。

勉強させて頂いてます。

CSSで装飾する場合


ここまでの内容だとあまりにもな記事なので、利用する方の時間短縮の為の情報を。
CSSで装飾する場合に必要なセレクタを挙げてみます。
お役に立てれば良いのですが。

さて、このガジェットでは記事のタイトルとサムネイルと要約の表示が出来ます。
意外と高機能ですね。

全て表示すると、このブログでは以下のようになります。


画像の右サイドにある、ごちゃごちゃしている部分が「人気の記事」です。

尚、このブログでは画像が少ないので(反省点...)、導入に際して画像は表示していません。
要約は長過ぎてスペースをとるので非表示です。
結果的に、このブログの右サイドにあるような形にしています。

次に構造を示すと、以下のようになります。

追記:
以下は「画像のサムネイル」と「抜粋」にチェックを入れた場合の構造です。
チェックを入れないとクラス名が変わります。
例:サムネイル画像
.item-thumbnail→.item-thumbnail-center


※コピペして使いやすいように、セレクタをテキストで書き出しておきます。

  • #PopularPosts1
  • .widget-content
  • .popular-posts
  • .item-tittle
  • .item-content
  • .item-thumbnail
  • .item-content
  • .item-snippet

結び


多くのブログで見かける人気の記事の基準は、恐らくはてぶ(はてなブックマーク)の数だと思いますが、今回の「人気の記事」はアクセス数のようです。

ブックマーク数などの表示がでないため、記事タイトルだけでシンプルに使えます。
反面、目につきにくいとも言えますが。

もっとも、簡単に導入で出来るのでとりあえず導入でも良いのではないでしょうか?
ブログ内の他の記事への導線が新たに出来ます。
加えてブログの特徴を示す効果もあるので、有益なはずです。

スポンサーリンク

0 件のコメント :

コメントを投稿