2012/06/14

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

follow us in feedly
follow us in RSS
zenback-image

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

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

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


大きな変更点

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

zenback-image1
zenback-image2

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

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


新しいスタイル

zenback-image3

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

1.) ノーマル
zenback-image4

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

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

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

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

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

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

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

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

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

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

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

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


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

zenback-image8

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


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

zenback-image9

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


関連記事が画像に表示に変更可能!

zenback-image10

テキストのみの表示と、画像+テキスト表示の選択ができるようになっています。

zenback-image11

きっと、今回で一番大きく分かりやすい変更点です。

今まで、リスト形式のテキストリンクだけだったものが、画像サムネイルの表示も選択出来るようになりました。

サイドバーでの表示だと、このように2列で、フッター表示だと、横一列の表示になるようです。

ツイート数も画像にオーバーレイ(っていうのかな?)されていて、なかなかいい感じですね。

関連記事の最大表示数が偶数になっていたのは、こういう表示の時の見た目を整えるためだったのかな?

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

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

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

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

結果!
zenback-image12

どうでしょうか?

タイトルは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-image13

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

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


zenbackタグ

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

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

Blogger での zenback 利用方法 - slumbers


あとがき

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

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

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

ではまた!


追記

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

あ、あと、

ひとりのユーザーになって楽しみながら!Zenback開発の裏側とプロダクトマネージャーが大事にしている3つのポイント - Six Apart ブログ
こんにちは。Zenbackプロダクトマネージャーのことぶきです。 私たちZenbackチームは先週(6月14日)、3回目の大きなリニューアルを公開しました。 関連機能がすごくリッチになったり、もっとブ ...

引用ありがとうございます!こういうの初めてに近いので、ちょっと興奮してしまいましたw


その他の関連する記事


誰にでもブログの宣伝ができる「zenbackクラシファイド」を、使わない手はありません! - sunabox
誰にでも利用することが出来るので、使えるものは使うの精神で是非利用してみましょう╭(¯ロ¯)╮ ...

0 件のコメント:

コメントを投稿

Related Posts Plugin for WordPress, Blogger...