こんにちは。@zenbackです。 この度対応したちょっと地味だけど、便利な新機能をご紹介します。

情報量が多い分、縦長なのがたまに傷のZenback。 このたび、横幅の狭いサイドバーや、スマホの縦画面で見た時も、コンパクトに読みやすく情報を表示できるようになりました。

しかもZenback表示エリアの横幅が320px未満の場合に自動で適用されますので、ユーザの皆さまは何の設定もいりません。

PCとスマホのテンプレートが別々の方は両方に同じスクリプトコードを入れていただければOKですし、レスポンシブデザインで作られている方は全く何もしなくてOKです。

PC で見た横幅が広い状態の画面

こちらがいつもご覧いただいているZenbackです。記事画像の下にタイトル、Twitterアイコンの右にコメント、というレイアウトになっています。

[NEW!!] スマホ縦画面で見たとき

■ 関連する記事

こんなふうに左右いっぱい使って、関連する記事を表示します。 ちなみに、今までのデザインだと、

｜■ 　　■　　　　｜
｜タイ　タイ　　　｜
｜トル　トル　　　｜
｜　　　　　　　　｜
｜■ 　　■　　　　｜
｜タイ　タイ　　　｜
｜トル　トル　　　｜

みたいになって、110pxの画像サムネイルが2つ並んで右側に空間が・・・、ということになりがちだったのです。

■ Twitter での反応

こんなふうに回り込むので、狭いエリアをいっぱいに使って情報を表示します。

スマホの横画面ではPCと同じ表示

なお、横画面は十分な横幅があるので、PCのブラウザで見るのと同じ状態で閲覧できます。

■ 関連する記事

■ Twitter での反応

さいごに

この横幅が狭いとき用のデザインは、4種類のウィジェットデザインテーマ全てで既に適用されています。 ついでに、少し前にFacebookコメントの横幅もウィジェットの横幅にぴったり合うように調整いたしました。しずつですが、よりサイトに美しく収まり、良い感じの佇まいになるよう調整を続けております。

ぜひスマホからもZenbackをご覧いただいて、サイトへの収まりの良さ、読みやすさを実感してみてください。ずれているなど、気になることがあれば、ご報告いただけますと嬉しいです！