新しくなったzenbackで関連記事を表示しよう！新デザイン紹介と・・・早速余白も調整してみました。

こんばんは！すなふ(@sunafu35)です。
今日、Googleリーダーを見ていたら、zenbackの更新案内があがっていました。

大きくは、デザインの変更があったようで、4種類のスタイルから選べ、関連記事に画像サムネイルが入る設定が出来るようになったようです。

早速、色々試してみました！

大きな変更点

スタイルがすっきりした！

新しい設定は使わない状態での表示です。
個人的にツイッターやfacebook、コメント表示は使っていないので、こんな感じ。
ソーシャルボタン部分の表示は見てみましたが、以前の並びのままでした。

新しい表示では、関連記事、関連リンクの冒頭にファビコンが追加されて、「関連リンク」は「関連するみんなの記事」に名称変更。クラシファイドはテキストっぽい見た目になりましたね。
そして、記事にツイッターカウントがくっついて表示されるようになりました。

新しいスタイル

新しくなったzenbackでは、4種類の見た目から表示を選ぶことが出来ます。

1.) ノーマル

見慣れたzenbackの表示色ですね。

あ、すみません、いい忘れてましたが、サイドバーでの利用をしています。

記事フッターは、段々関連記事の表示を増やしてきて、コメントまで辿り着くのが、少し遠くなっていたので、以前に変更しました。

2.) シンプル(左から2番目のスタイル)

色付けがなくなって、関連する記事の表示がテキストだけになりました。
白基調で、zenbackの色が浮いてしまっていたっていうサイトには、このスタイルにすると、色の組み合わせを崩さずに済むかもしれませんね。

この下にはタグ、クラシファイドと「Powerd by」がありますが、Powerd by表示がなかったら、まるで手作りした関連記事表示のように見えます。

3.) 白背景(左から3番目のスタイル)

タイトル部分が黒背景に。
背景が白のサイト用に。

シンプルスタイルだと、あまりに味気ないという場合に使えるでしょうか？

4.) 黒背景(一番右のスタイル)

タイトル部分が白く。
黒背景のサイト用に使えますね。

関連記事の背景が黒くなると信じていたら、関連記事背景は透過で、リンク色もサイトの設定に準じていたという、うかつな私です。

表示項目の最大表示数が変更

今まで、5→10→15というように5の倍数での指定だった表示数が、関連記事に限っては偶数での増加数に変更されています。

ソーシャルボタンの設定は特に変更なし

ソーシャルボタンは、特に変更はないようです。
変更しないと！って部分も思い付きませんしね・ｗ・

早速余白を調整してみた！

画像表示いいな！って思ってよくよく見ていると、記事タイトルは2行で収めているのに、その下が随分隙間が空いていて、なんだかスタイル的に勿体無いなぁという印象。

折角画像表示にするんだから、ミチっと綺麗に表示したい！

ということで、早速marginの調整をすることにしました。

結果！

どうでしょうか？

タイトルは2行で省略されるようなので、思い切って詰めてみました。

自分の記事は画像、外部にリンクするものはテキストとなって、一目で分かりやすいし、かなり使えるようになった気がします！

ちなみに、私が行った余白の詰め方は。

管理画面から、
「テンプレート＞カスタマイズ＞CSSの追加」から、カスタムCSSの追加のフォームに、

#zenback-widget .zenback-module {
  margin-bottom:1em!important;
}
#zenback-widget #zenback-related-article .zenback-module-item.hasthumb {
  margin:0!important;
  height:140px!important;
}

と、追加して実現させました。

記事フッターに表示させても、多分変わらないとおもいますが、一応「要素の検証」(Chromeの標準機能)、「要素を調査」(Firefox)、「F12 開発者ツール」(IE9)などを使って、クラス名の確認をしてくださいね。

さて、こんな風に新しくなったzenbackですが、なにそれ設置したい！っていう人は、

ブログサービスごとにZenback設置方法をまとめました - Zenbackブログ

ブログサービスごとにZenback設置方法をまとめました ...

BloggerにZenbackをエラーなく導入する方法 | 某氏のたわごと NEXT

BloggerにもWordPressのような関連記事をつけたいと思いいろいろ検討しましたが結局、Zenbackを導入しました。zenbackのスクリプトをBloggerのテンプレートにはるとアップロー ...

などを参考にすると、分かりやすく設置出来ると思います。

[Blogger]動的ビューは諦めました・・・（zenback導入） - sunabox

私の設置時の記事はこちら。

サイドバーに設置する場合

今の私のサイトのように、サイドバーに設置するときは、公式からコピーしたコードを「HTML/Javascript」のガジェットにそのまま貼り付けるだけでも導入出来ますよ。

サイドバー設置で、個別記事ページにだけ表示させたい時(私がそうしてます)は、
追加したガジェットのクラスを確認して・・・

ウィジェットコードを展開して、コード追加。

これで、個別記事ページだけの表示に出来ます。
トップページに表示させるのも、あんまり効果はなさそうですし、何より少しでも軽くしておきたいですからね。

zenbackタグ

また、zenbackの精度を上げるために、zenbackタグもHTMLで足しておくといいと思います。

関連記事の精度を上げる「zenbackタグ」 - Zenbackブログ

zenbackは、ページの内容を解析して、本文部分とその他の部分を自動で切り分けます。しかしページの構造によっては、正確に切り分けることができない場合もある可能性があり、このことが関連記事や関連リ ...

Blogger での zenback 利用方法 - slumbers

あとがき

今回のアップデートで、一番嬉しかったのは、画像表示もそうですが、こういった根本的なデザインや表示方法も改善されていくんだなと分かったことです。中の人は、ツイッターでしっかりコミュニケーションをとったりしていて、頑張っている印象は元からありましたが、それが目に見える形で表れてくるのは、やっぱりいいですよね。

bloggerのリダイレクト問題は、もう少し苦労が続きそうですが、是非とも頑張って欲しいなと思います。

そんな訳で、新しくなったzenback、一度ためしてみるのはいかがですか？

ではまた！

追記

Google bloggerでの、リダイレクトによる表示不具合問題ですが、今回のアップデートで解決しているという報告がツイッター上ですが、上がっていました。
私は独自ドメインにしてしまっているため、「blogspot.jp」での表示状態は確認出来ませんでしたが、かなりややこしそうな問題でしたし、今回のアップデートは、相当大きなものになっている気がしますね。

あ、あと、