去年の年末にwordpressのテーマを自作した。一旦かたちになったところで熱意が冷めてしまい、暫定的なつもりで作った場所も放置していた。ブラウザのサイズを小さくするとデザインが崩れるところも直していない。
重い腰をあげ、不備を感じるところを1つずつ直すことに。まずはブログ回りを改めて見直すことから始めた。
ネットサーフィンをしているとき、他のブログを見るときに僕が必ずチェックするのは、人気記事やおすすめ記事である。多くの人に見られている記事は面白かったり有用であることが多い。このブログにも、ずっと表示したいと思っていた。
その思いを形にすべく、今回は3つの種類のおすすめ記事を並べた。
「アクセス数が多い記事」と「はてなブックマークの人気記事」と「Facebookの人気記事」である。重なっている記事はあるけれど、それぞれ特徴があって違いが出ている。
アクセス数が多い記事の表示
WordPress Popular Postsというプラグインを使った。記事をアクセス数の順番によって並べることができる。過去24時間、過去1週間、過去1ヶ月、今まで、といった設定が簡単にできるので重宝する。
左側にアイキャッチ画像、右側にタイトル、といった形でフッター(記事ページ下部)の右側に表示することにした。
参考までにcssを載せておく。
#footer ul.wpp {
overflow:hidden;
margin:0;
}
#footer ul.wpp li {
height: 100px;
margin: 0 0 0 5px;
padding:15px 0 0 0;
border-bottom:1px solid #fff;
}
.wpp-post-title {
width: 190px;
display: inline-block;
vertical-align:top;
font-size:90%;
margin: 0 0px 0 10px;
}
.wpp-thumbnail {
padding-top:6px;
}
今はもっとも入れ替わりが激しい過去24時間の人気記事にしてあるので、見てみて！
はてなブックマーク数が多い記事の表示
年末年始にはてなブックマークされた記事が出てきたので、それをサイドバーに表示することに。はてなブログパーツの設定はこちらでできる。
・はてなブックマークが50usersになったときのアクセスアップについて
・はてなブックマークが500usersになったときのアクセスアップについて
デフォルトのデザインでのサイドバーに入れようとしたのだが、なぜかデザインが崩れる。その問題をクリアするのに随分時間がかかった。java scriptで対応しているために、どういったcssがかかっているか分からなかったからだ。
仕方がないので1つずつcssをいじって探したところ、liタグが原因だと判明。これをdivに置き換えたらきれいに表示された。サイドバーにブログパーツやプラグインを使う場合は、liタグのcssは下手に設定しない方がいいということを学んだ。
フェイスブックのいいね！が多い記事を表示
Facebook Recommendations Barでいいね！された記事が右下からにょきっと出てくるようにした。Facebook Recommendations Barの設定はこちらから。
アクセス数とはてブの記事ランキングがブログ上に並べるやつだったので、フェイスブックのいいね！された記事は違う手法のものを採用。
記事を10秒見ると、いいね！が多い記事が右下から3つ出てくる。面白いよね。
まとめ
一気に3つの種類の人気記事表示を設定したけど、1つずつ追加して効果を測るという手もあった。とはいえ、さっさと導入したかったし、やる気が出たときに全部やってしまうのは大事。ちょいちょいいじりながら、効果を測定していくつもり。顕著な結果があらわれたら、発表します。
ブログを運営で参考になる本
書くことに注力できる環境づくりについて、非常にためになることがまとめられている良書。
必ず結果が出るブログ運営テクニック100 プロ・ブロガーが教える“俺メディア”の極意”
インプレスジャパン
売り上げランキング: 2,989
コメントを残す