それマグで!

知識はカップより、マグでゆっくり頂きます。 takuya_1stのブログ

習慣に早くから配慮した者は、 おそらく人生の実りも大きい。

GoogleMapsの無駄バーを消して、表示領域を拡大し省エネする

新しいサービスGoogle+ が使いやすいとは思います。だけど他のサイトもG+ デザインされて困ります。あれ文字大きすぎて、縦幅消費しすぎです。

バーを小さくしたら はかどる

大きすぎる

けしたらスッキリする。

CSSで消しました。特に、黒色が圧迫感なんですよ。

Goolgeのバーが過剰大サイズじゃありませんか?

どう考えて大きいです。

ぱっと見で100px程度あるように見えます。

測ってみた

検索ボックスが2 height=70px

One Google バーが height=30px

やっぱり100px ある。残念です。


これはひどい レッツノートの縦幅が768px でブラウザのタブバーで100px程度だから,そこからさらに、100px も引かれたら堪りません。実質450px ですよ。

地図 560px ≒ レッツノート縦768px - タブ 100px  - OneGoogleバー 100px

コレはひどい。ステータスバー出してたら500px ですよ。*1実質60%の地図が表示されるだけ。
地図データは100%分読み込まれています、見るのにはスクロールが必要です。スクロールする度にCPU消費します。スクロールは通信と再描画の嵐です。節電のためにこれらのバーを消すべきです。

上書き用UserCSS

Operaの場合はユーザースタイルに適用する。FFの場合とかはお任せ

#header{
  height:24px ;
}
img.logo-img-2{
  height:18px !important;
}
#search .q_d_container {
  height:18px !important;
}
#q-sub{
  height:18px;
}

.kd-button { 
  height: 20px !important;
  line-height: 20px !important;
}

#search .q_d_skunk {
  font-size: 100% !important;
  padding-top: 0px !important;
}

#search .triangle-box { 
top: -30px !important;
 }
.logohref { 
  margin-top: 0px !important;
} 


#search .cntrl {
  padding-top: 0px !important;
}

div.kd-buttonbar.header-buttons { 
  top: 0px !important;
}

#search { 
height: 24px ;
}
div.onegoogle{
display:none;
}

#search .cntrltable { 
  padding-top: 0px !important;
 }


完成図

うん、スッキリ見やすい。これ位は必要よね。

*1:IE9のタブは150px ほどだとおもうわ