「Usability Boost」でGoogle+をもう少し読みやすく

Google+にいろいろな機能を追加して便利にするようなブラウザの拡張機能は至るところで紹介されてるはずなので、うちは違う方向性でGoogle+の見た目を調整して少し読みやすくする拡張機能「Usability Boost for Google Plus」を紹介しましょう。

gplus-restyle-000

Google+はまだフィールドテスト中なので正式版で変わるんでしょうが、いまのテスト中の画面はGoogleさんにしては珍しくいまひとつ読みやすさにかけてる気がします。文字回りのメリハリがあまりないからか、要素間のマージンが足りないからか若干窮屈な印象が…(※個人の感想です)。

そういうのを一時的に解消して読みやすくするのがこの拡張機能の役目です。これをインストールするには、Googleさんのブラウザ「Chrome」が必要です。

※このようなサイトに便利機能をくっつけてくれるような拡張機能は確かに便利なのですが、中のデータにアクセスできたりするわけなのでね。便利便利っていろいろ入れてると…、皆さんくれぐれもお気を付けください。

Usability Boost をインストール

とりあえず完全版としてリリースされるまでのその場しのぎとして、手っ取り早く見た目を変えるならこの拡張機能が一番かな、と。

gplus-restyle-001

もともとの見た目はこんな感じ。

gplus-restyle-003

拡張機能をインストールするとこうなります。Google+の画面に薄いグレーの背景色がついて、個々の書き込みが罫線でかこまれて間隔が調整されます。「+1」の数やコメント数の部分、コメント部分にも背景色がついています。あと、上の黒いツールバーがスクロールにあわせて追随してきますね。

gplus-restyle-004

全体をみるとこんな感じ。はい、終わり(笑)。

Stylebotを使ってもう少し改良

Usability Boost を入れるだけでだいぶ読みやすさは改善します。でも、これはこれでまだバランスが悪い部分もあったりします。背景色がつくのはいいんですけど、全体のブロックの左右に余白が足りなかったり。

(追記)最新のアップデートで余白が修正されたり、グレーの背景色を使うかどうか選べるようになっています。

もともとボクは自分自身のために「Stylebot」という拡張機能を使って、書き込みの中の要素間のマージンの調整、コメントの文字サイズを一段小さく気持ちグレーに、知り合いかも的なSuggestionsのブロックを非表示、といったことをする「plus-minus」を作って公開していました。

gplus-restyle-009

Stylebot をインストールしてからリンクを開くと右上に「Install」ってボタンが見えますので、それを押してあげればインストールされます。ちなみにこのStylebotのサイトでは、FirefoxとかでいうところのUserStylesみたいな感じでいろんなサイトの見た目を変えるCSSが公開されいます。

せっかくなので、今回のこの拡張機能を使った場合の改良版「Usability Boost for Google Plus + plus-minus」を作って公開しましたので、それを入れてあげることでこの全体ブロックの左右の余白も調整されてごらんのようになります。

gplus-restyle-005

背景色のしかれた全体ブロックの左右に余白がつきました。

gplus-restyle-006

本文の文字サイズはそのままで、微妙な要素間のマージンを調整しています。あと、Usability Boost で追加された+1の数とコメント数の部分の背景を除去して、ほとんど見えるか見えないかの点線の区切り線を入れてます。

gplus-restyle-007

ストリームの画面をみるとこんな感じになりますね。

gplus-restyle-008

ちなみにUsability Boostを使わなくて「plus-minus」だけ入れてあげたらこのようになります。

え?サークルが丸見えだって? 大丈夫、たいして分けてないので(笑)

あくまでその場しのぎですから

近いうちにGoogle+も正式版としてリリースされるでしょう。それまではフィールドテスト中ということもあっていろいろ変更も加えられていくはずです。サイト内の仕様に変更があった場合は、この類のものを入れてると画面表示がおかしくなったりする可能性が多々ありますのでくれぐれも自己責任でご利用ください。

あくまでもその場しのぎ、ってことでひとつよろしくお願いします。

追記: 2011.07.15)連続して同じ画像が再共有されてうざったい人は、上のStylebotを入れて以下のコードを追加すれば消えますよ。

div.ea-S-C.ea-S-rg-pa.d-s-r.ea-S{display:none;}

リンクの概要とかに入ってくる画像は消えないので大丈夫です。

まったくなくなっちゃうのも困るな、って方は上のコードの代わりにマウスオーバーした時だけ見えるように以下のような記述を追加しても良いですね。

div.ea-S-C.ea-S-rg-pa.d-s-r.ea-S{opacity:0.1;}
div.ea-S-C.ea-S-rg-pa.d-s-r.ea-S:hover{opacity:1;}

Tags: , , , , ,

   

Comments are closed.


Performance Optimization WordPress Plugins by W3 EDGE