Gmailの左サイドバーを広げる(調整する)stylish設定のメモ

Gmailのラベルがやたらと増え階層も深くなりラベル名が見えにくいので、stylishを使って左サイドとメイン部分の幅を調整したメモ。
※Firefoxでブラウザの横幅を1024pxにして使ってます。

@namespace url(http://www.w3.org/1999/xhtml);
@-moz-document domain("mail.google.com") {
  /* Main area */
  .no .nH.nn{
    width:78% !important;
    }
  /* Label area */
  .no .nH.nn.aeN{
    width:22% !important;
    }
  /* ADD display none*/
  .u5{
    display:none;
}

ChromeでStylishを使ってGoogleの検索結果画面に検索順位を表示する

まずはChromev版Stylishをインストール。
https://chrome.google.com/webstore/detail/fjnbnpbmkenffdnngjfgmeleoegfcffe

続いて

1. 1、ブラウザの右上『Stylishアイコン』右クリック→『オプション』選択
2. 2、画面左の『Write new style』をクリック
3. 3、画面左の『Name』欄に適当なスクリプト名を入力
4. 4、画面右の『Code』欄にCSSを記述
5. 5、画面右の『Specify』をクリックした画面でURL/ドメイン指定をする
6. 6、画面左の『Enabled』にチェックを入れる
7. 7、画面左の『Save』をクリック

Firefox版とは使い方が少々違うようですね。

とりあえず、Googleの検索結果画面に検索順位を表示するCSSは
Firefoxアドオン「Stylish」の使えるスタイル8選を参考に、

body {
    counter-reset: result !important;
    }
h3.r:before {
    content: counter(result) ". " !important;
    counter-increment: result !important;
    }

必要性は？ですがGoogle Bookmarks用も。

body {
    counter-reset: result !important;
    }
#search span table:before {
    content: counter(result) ". " !important;
    counter-increment: result !important;
    }

リストで画像を縦に並べる場合の隙間をなくすメモ

li img {
    vertical-align: bottom;
}

html内に記述したbrの改行をcssで無効にするメモ

システムで変更できないhtml内に無駄なbrがある場合、cssで改行させないようにするメモ。

.class br{
    display: none;
    }

CSS：画像(背景）リンクをクリックすると出る点線を消すメモ

a{
    outline:0;
    }

GIGAZINE リニューアルして見づらくなった。。

最近GIGAZINEがリニューアルして見づらくなったなーと思ったら、GIGAZINEとしては一覧性を向上させたのだそうです。

GIGAZINEのサイトデザインがリニューアルしました

ちなみに僕の場合ディスプレイサイズは2560x1440だけど、ブラウザのウィンドウサイズは1280x1410にしています。

しかもGIGAZINEとかニュースサイトを見る場合は、文字が小さかったり文章の適当なところで改行してないと記事が読みにくいので、表示サイズを拡大しています。

横幅1280pxのウィンドウで普通に表示すると。。

文章が横にだらっと長くて読みにくいんです。

拡大表示して閲覧してます

文字も大きくなり、適度な間隔で改行され読みやすい。

1280で拡大表示だとトップ画面は。。

一覧表示画面（トップ画面で）コンテンツが2列、3列と並ぶことに気づいてませんでした。。

1280で普通に見ると

おお、2列になってますね

とりあえず、僕の見方ではどのみち2列にならないので、そういう表示のさせ方が見やすくなったのかどうかはわかりませんが、1つ1つの記事の見え方について言えば、見にくくなったと思います。

画像を横長にした上に、タイトルを画像に重ねてしまったので、画像の視認性がかなり悪くなったと思います。

つまり、これだけ多くの記事があると興味のある記事しか読まない訳ですが、どの記事に興味がありそうかどうかと言うことはぱっと見て決めています。
流れとしては、
(1)画像をぱっと見る
(2)まず画像で判断して興味がある可能性があればタイトルを読む
(3)そこでタイトルに興味がある場合記事を開く
(4)(2)で迷う場合は一覧画面に表示されている記事の頭を読んでみる。
という判断を一瞬で行うわけです。

画像をぱっと見る段階ではトップページををスクロースさせながら判断してる位なので、1つの記事の画像に目の焦点が合うのは本当に一瞬です。だから、画像の表面積が小さくなって画像の情報量が下がると、どの記事が興味がありそうなのかの判断がしにくいのと、(4)を行う際、いちいち画像にマウスを持って行かないと記事の頭が見れないというのもめんどくさくなったわけです。

ということで、僕にとっては(1)(4)を行う上で見づらくなった訳です。

この記事の下部ツイート最新20件を見てみても『見づらくなった』と言う意見が多いようですね。

GIGAZINEはよく見るサイトなのでストレス無く見たいので昔の表示に戻してほしいな。。

くだらないけどちょっと楽しい東スポブログパーツ

東スポブログパーツって、くだらないなーと思ってたけど、なんか使ってみたくなっちゃって付けてみました。

使ってみると、いがいとおもしろいけど、元々登録されてるキーワードがブログのページにないと全部「見出が見つからない」と出てしまうようだ。

意外と力業なんですね。。

追伸（6/1）
サイドバーに付けてみてたんですが、どうもFirefoxでうまく表示できなかったので、速攻外しました。。

CAROL

友人が携わってるサイト。今後どうなるのかが楽しみ！
CAROL

mixi

このblogは最近全く更新してなかったにもかかわらず、今になってmixiなどを始めてしまいました。blogだけでなく、既にデジイチもあまりさわらなくなってしまった・・・。でもデジイチはいい！

MARS FLAG

衝撃の "一目瞭然検索エンジン"まさに衝撃です！

it

　何かの番組でNECのCMを見た時にこれを宣伝していた。その時に分かった情報は「it」というmovieをインターネットで配信していると言うことだけ。
　興味を持ってNECのページを調べてみたけど、期間限定だったららしくそのときはページのどこにも「it」の情報が載っていなかった。ぐぐってみてもすぐには見つからなかったので見るのをあきらめた。
　そして、何日か経った時、たまたまインターネットを見ているとリンクがあったのでやっとこれを見ることができた。
　とにかく何の情報もないまま見てみることにした。
　ようはNECという会社のプロモーションビデオだということはちょっとだけ感じるけど、ストーリー的に何が言いたいのかは？？？
　でも、3話あってちゃんと最後まで見たので、僕的にはそこらのTVドラマよりかは好奇心をそそる物だったのだと思う。