Yahoo!メール(Web)をカスタマイズする～Webアプリはカスタマイズが可能なこと知ってますか？

Yahoo!メールは長年使い続けていますが、時代の変化につれてWebメールのUIも変更されてしまいました。シンプルな方が使いやすかったしカスタマイズしやすかったのですが、開発者は昨今のWebテクノロジーを導入したくなるのでしょうね、色々と面倒な事をしてくれます。

かねてから不便で仕方なかったのですが、いよいよ我慢が切れましたので対策する事にしました。私はWebブラウザにFirefoxを使っているのでFirefox＋Stylishで臨みます。

削除ボタンが見づらい

ほんとにね、削除ボタンは特別にして欲しい位に良くクリックするボタンです。何しろ要らないメールが届きすぎるのでメンテナンスが大変なのです。私が愛用しているロジクールの多機能マウスの場合はボタンに「Delete」キーをアサインして、そのボタンを押して削除させたりもしますが、「普通のマウス」ではそれが出来ません。

Yahoo!メールはまだHotmailに比べればマシですが、IMAPメーラーとの接続がイマイチ遅いのでメーラー側で操作するよりもWebメール画面から操作する方が早いのです。なので「削除」ボタンをクリックする事は非常に重要だったりするのです。

なのにボタンが黒地に白文字という地味でかつ工夫の無いデザインなので見づらいのです。私は削除ボタンを目立つ赤色にカスタマイズしたいと考えました。結果的には下図の様にしました。Yahoo! IDとかは捏造してるのであしからず（笑

どうやってカスタマイズする？

愛用のFirebugを使って要素をチェックです。幸いボタン個別にidをキッチリ定義してくれているのでStylishでカスタマイズ可能だという事が分かりました。

#h_deleteにbackground-image:linear-gradient(red, gray)としてやる事にしました。red,grayを適当なカラーコードにすれば、削除ボタンの色（塗り）が変わりますから好みでカスタマイズ出来ますし、当然ながら他のボタンの色を変えるとう応用も楽勝ですね。

カスタマイズしたこと

Stylishの定義で下記の様にCSSを書き換えて貰う事にしました。#h_deleteと#f_deleteの背景色をred/grayのグラデーション色に書き換えろって命令ですね。StylishはCSSを書き換えてくれるアドオン（プラグイン）です。

#h_delete,#f_delete{
     background-image:linear-gradient(red, gray)
}

linear-gradientによって立体に見えるボタンのグラデーション塗りを実現している様なので、色の組み合わせでもっとイケてるボタンにカスタム出来そうです。暫く使ってみて色は微調整しようと思っています。

カスタムしてみた結果

もうね、たったこれだけ。ヤフーメールの削除ボタンだけ色を目立たせるってだけで我慢し続けて来た不便を改善できたと感じてます。右手でマウス操作中にいちいちキーボードの右側にあるDeleteキー押してられないですからね。かと言って左手でDeleteキーを押すのもスマートじゃないです（結構やってますけどね）

メーラー（IMAP接続）の応答がもっと速くなればもちろんメーラー＋キーボードでメールを操作します。多分これが私には一番理想的です。次にスマートなのは多機能マウスにdeleteキーをアサインする方法だと思います。今回のはヤフーメール（Web）のダメなところを自己満足的に改良したって話です。

実はこの件については過去にヤフーに改善要望は出したのですが一向に改善されませんでした。いつもイライラさせられていたので、精神衛生上よろしくないなと重い腰を上げてカスタマイズに踏み切った次第です。別に難しい話じゃないですが面倒なんですよね。

余談ですが

Firefoxを使っているならStylishを使わない手はないでしょって位に便利なアドオンです。XHTMLとCSSの基礎知識は必要になりますが、Stylishを使いたいからって目的が先に立ってスキルを身に付けるというのも道理だと思います。実際私はそういう感じでやりたい事を実現する為に学習しました。

StylishでCSS定義する事により、不要な要素を非表示にする事も可能なので、邪魔臭い広告ブロックを非表示にする事も可能です。特にノートパソコン等で画面（表示領域）が狭い場合は、ちょっとでも無駄をそぎ落として必要な情報のみ表示させたいですからね。

更に余談ですが

Webページの様式だけでなく、内容そのものをカスタマイズしたいなら、Firefox＋FoxReplaceも組み合わせると簡単にもっと多くのカスタマイズ出来ます。FoxReplaceはHTMLソースを書き換える機能を実現します。ページに表示される内容を自分流のルールを定義してカスタマイズ出来ます。

一例を上げると、私は携帯電話の通話履歴をWebで参照出来る様にサービスを申し込んでいるのですが、電話番号では誰との通話かわかりづらいので、FoxReplaceで定義して電話番号が一致したら名前を表示する様に定義しています。この一手間の効果は大きく毎月の通話履歴をチェックするのも一目瞭然で非常に楽です。

FoxReplaceはStylishよりも容易なので先にFoxReplaceを使ってみるのも良いかも知れません。