loading
 読み込み中...
ウェブの触手-日々の生活に新たなスパイスを-
キャプチャ画像
Home > [Webサービス] > Gmailのサイドメニュー横幅が狭くて見づらかったので拡張機能 Stylish を使って広くしてみました
この記事は約5分で読めます。
この記事は最終更新日から4年以上経過しているため現状にそぐわない可能性もあります。

Gmailのサイドメニュー横幅が狭くて見づらかったので拡張機能 Stylish を使って広くしてみました

投稿日:2013.5.21

Gmail を使っていて左側のサイドメニュー幅が狭くて使いにくいと思ったことはありませんか?

ただメールを受信して見るだけならそうでもないでしょうが、
Gmail のラベル機能を使ってラベルを増やしていくと
ラベル名の後半部分が見えなくなってとても不便なんですよね。

この長年のイライラをやっと本日解消することができました。

↓↓↓簡単にサイトが作れる次世代ツール↓↓↓

SIRIUSレビューイメージ画像

標準機能で搭載してほしいもんです

私、ブラウザは長年 Google Chrome を、メールは Gmail を使っています。

どちらもとても便利なのですが、たまに
「ここがこんな風に変えられたらいいのになあ」と思う時があります。

もちろん誰もが思うことでしょうが中でも Gmailに関していえば、
左サイドメニューの幅が変えられないのがとても不便でした。
(最近 Chrome のバージョンが上がって、ブックマーク間の余白や右クリックで表示される項目間が広がってしまったことにもちょっと腹を立てています)

 

普通に使っている分にはそれほど不便さは感じないと思います。
しかしメールの種類が多くなってくるとどうしても分類別に分けたくなります。

その方法として私は Gmailのラベル機能を使っているんですが、
ラベルが増えてくるとどうしても先頭のラベル名が共通したものが出てきます。

例えば「アフィリエイトブログ」とか「アフィリエイト報酬」とかであれば
先頭の「アフィリエイト」は同じです。

そして Gmailでは下の↓画像のように表示されます。

キャプチャ画像

 

これではどっちがどっちだか”さっぱりわからない”(by ガリレオ福山先生)

他にも、例えば「メルマガ…」みたいな共通語がアタマについたラベルが複数あって
画面上には「メルマガ」の後に 1文字ぐらいしか出ないので
結局はラベルをクリックしないと何の分類だったかわからないという例もあります。

この事態を収拾すべくたまにネットで調べるようにしていたのですが
なかなか見つからないでいたところ、今日やっと解消することができました。

実装結果がこちら↓の画像です。左メニュー幅がだいぶ広がりました。

キャプチャ画像

 

スポンサーリンク

実装手順

実装に当たっては Chrome の拡張機能である「stylish」を利用します。

ただし、この実装にあたってはいくつか不具合も同時に出現しますので、
使ってみたらやっぱりやりにくいというようなことが起こるかもしれません。

この点あらかじめご了承を。

まず Chrome の url 欄に「stylish」と打ち込み[Enter]キーを押します。

検索結果画面の「Chrome ウェブストア – stylish」をクリックします。

キャプチャ画像

 

Stylish インスト―ル画面になるので
「Chrome に追加」をクリックしてインストールを完了させます。

キャプチャ画像

 

右上の Stylish アイコン上で右クリック→「オプション」を選択します。

キャプチャ画像

 

「新しいスタイルを作成」をクリックします。

キャプチャ画像

 

「スタイルを追加」画面では

  • ①に管理用の名前を付けます。お好きなモノでどうぞ。
  • ②ここにチェックを入れるとこのスタイルが有効になります。一時的にスタイルをOFFにしたいときはチェックを外します。
  • ③実際のコードを入力します。(最下段にコピー用のコードを別に載せておきました)

キャプチャ画像

上のコードの中には私もよくわからない部分もあります。
参考サイト(最下部にリンク)のコード(サイト内の show CSS というリンクをクリックすると見れます)をいろいろいじっていたらたまたまできたというだけです。

 

コード部を拡大したのが下の↓画像ですが、
なんとなくわかるのは①と②の数字は同じにしておいた方がいいということです。

おそらく左サイドメニューの幅を 300px にしたのなら
右側の本文エリアは左端から左サイドのメニューの幅分だけずらした位置から表示せよということだと思われます。
なので同じ数値にしておくのが無難です。

③に関しては、参考サイトのように -168px でもいいでしょう。
その場合、本文エリアの右端がブラウザの画面右端ぴったりになります。

私は余白を少しとって -160px にしてみました。

このように左サイドメニューの空け具合は
①と②の数値をお好みの数値に設定すればどのようにでも幅が取れます。

キャプチャ画像

 

次に④の「個別設定」をクリックします。するとこちら↓のようになります。

キャプチャ画像

②には Gmail の url を入力するのですが、
ここでは Gmail のどこを開いても Stylish の設定が適用されるよう
Gmail のドメイン部分だけを入力します。

【https://mail.google.com/mail/】

そして①は「次で始まる URL」を選択します。

最後に③「追加」をクリックします。

実はこの機能を利用すると特定のサイトの広告だけ常に非表示にする、なんていう芸当もできます。

例えばよく見るトレンドサイトの広告がうっとうしいと感じていたら②にサイトのドメイン名を入力し、①は「次で始まる URL」を選択します。

そしてコードのところに広告を表示させているブロックの id や class を指定し、dispaly: none;と書きます。これでその広告は表示されなくなります。

ただしその広告がいつも同じ id や class 名になっていることと、その id や class を解析できるスキルが必要になりますが。

最終的にはこんな↓感じになっていると思うので「保存」をクリックします。
ここをクリックした瞬間にすぐに Gmailに反映されます。

キャプチャ画像

 

「保存」の右わきにある「管理画面に戻る」をクリックすると
下の↓ような画面になります。

ここからいつでも再編集が可能ですし一時的に無効にすることもできます。

キャプチャ画像

Stylish のアイコン上でも有効化と無効化の切り替えができます。

不具合として確認できているのは、ラベル編集時の色指定がうまくできないこと、右端のスクロールバーがドラッグできない時があるということでしょうか。
その場合は一時的に OFF にすれば解消されます。

コピー用 CSS コード

以上です。

記事はお役にたてましたか?

記事にご興味をもっていただけましたら
下のソーシャルボタンで共有していただけると嬉しいです^^

 ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓

スポンサーリンク

おススメTCDテーマ

WordPressテーマ「CORE (TCD027)」

コメント(4件)

  • ノブ より:

    細かいところまでの解説ありがとうございまし。

    残念ながら、なぜか上部が切れてしまいました(^_^;)

    上側にマージンを入れるようなスタイルシート探してがんばります^^

    ありがとうございました

    • きゅいじん より:

      ノブさん、きゅいじんです。
      古い記事なのでどこまで参考になったやら。。。
      恐縮です。

  • 解決しました! より:

    「gmail サイドメニュー 広げる」でぐぐってたどり着きました。
    Gmail のクラインとは変えたくなかったので、本当に助かりました!

    多少、Style のインターフェイスが変わっていますが、
    上記の手順で解決できました。ありがとうございました!!

    • きゅいじん より:

      まだ使えたんですね。
      よかったです。

コメントをどうぞ

入力いただいたメールアドレスは公開されません。

内容に問題なければ、下記の「コメントを送信する」ボタンを押してください。

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)

先頭へ