【Google keep】付箋下部の不要なボタンを非表示にするCSS

2024年2月25日Google

この記事では、PCウェブサイト版「Google Keep（グーグルキープ）」の各付箋下部にある「リマインダーを追加/編集」や「共同編集者」などの不要なボタンを非表示にするCSSを書きます。

ウェブサイトに自分で作成したCSSを適用できるChrome拡張機能「Stylebot（スタイルボット）」や「Stylus（スタイラス）」を利用します。

PCブラウザで「Google keep」を開いた時、付箋の下部にいくつかボタンがあります。僕は、何個か使っていないボタンがあります。

リマインダーを追加/編集
共同編集者
画像を追加
アーカイブ
元に戻す
やり直し

「共同編集者」については、右上の歯車ボタン→「設定」から機能を無効化できます。

設定内の「共有を有効にする」のチェックを外して、「保存」をクリックします。

ただし、機能を無効化したからといって、ボタン自体が消えるわけではありません。グレーアウトするだけで、付箋下部には残っています。それ以外のボタンはそもそも無効化もできません。

CSSを利用することで、自身の環境上だけで見えないようにできます。他人には影響しません。なんならCSSを導入していない別ブラウザでアクセスした時も反映されません。あくまでCSSは、導入したブラウザ上の見た目を変えるだけです。

「頻繁に使っていないボタンを押しちゃって困る！」という方に役立つかもしれません。

1. インストール方法
2. 「Google Keep」の各ボタンを非表示にするCSS
3. 感想

インストール方法

Chromeウェブストアからインストールできます。Chrome拡張機能だけでなく、「Microsoft Edge」と「Firefox」版もあります。本記事では「Stylebot」を紹介しますが、「Stylus」などでもOKです。僕は、メインでは「Stylus」を使っています。

Stylebot

ウェブの外観を瞬時に変更

https://chromewebstore.google.com/detail/stylebot/oiaejidbmk...

「Chromeに追加」をクリックします。

「拡張機能を追加」をクリックします。

拡張機能のオーバーフローメニューに追加されたらOKです。

頻繁に開く場合は、拡張機能のオーバーフローメニューを開いて、「Stylebot」の隣にあるピン留めアイコンをクリックします。ツールバーに直接配置されます。

詳しい使い方を知りたい方は、以下の記事を参考にしてみてください。

【Stylebot】サイトにCSSを適用できる拡張機能の使い方

この記事では、ウェブサイトに自分で作成したCSSを適用できるChrome拡張機能「Stylebot（スタイルボッ ...

https://www.naporitansushi.com/stylebot/

「Google Keep」の各ボタンを非表示にするCSS

スタイルシートを開く

「Google Keep」にアクセスします。拡張機能メニュー内にある「Stylebot」アイコンを左クリック→「Stylebotを開く」をクリックします。

CSSを書き込む

右側に白紙のサイドバーが表示されます。もし初めて「Stylebot」を起動した場合は、「ベーシック」という画面が表示されます。下部にある「コード」をクリックすると、白紙のスタイルシート画面を開けます。

以下のコードのうち、自分がいらないと思うボタンのCSSを書き込みます。

/*【Google keep】「リマインダーを追加/編集」ボタン非表示*/
[role="button"]+[role="toolbar"]>[role="button"][aria-label="リマインダーを追加/編集"] {
    display: none !important;
}

/*【Google keep】「共同編集者」ボタン非表示*/
[role="button"]+[role="toolbar"]>[role="button"][aria-label="共同編集者"] {
    display: none !important;
}

/*【Google keep】「画像を追加」ボタン非表示*/
[role="button"]+[role="toolbar"]>[role="button"][aria-label="画像を追加"] {
    display: none !important;
}

/*【Google keep】「アーカイブ」ボタン非表示*/
[role="button"]+[role="toolbar"]>[role="button"][aria-label="アーカイブ"] {
    display: none !important;
}

/*【Google keep】「元に戻す」ボタン非表示*/
[role="button"]+[role="toolbar"]>[role="button"][aria-label="元に戻す"] {
    display: none !important;
}

/*【Google keep】「やり直し」ボタン非表示*/
[role="button"]+[role="toolbar"]>[role="button"][aria-label="やり直し"] {
    display: none !important;
}

注意事項

本記事のCSSは、僕が適当に作成したコードです。皆さんの環境によっては使えなかったり、サイト側の仕様変更でいつの間にか使えなくなる可能性もあります。

もし書き込んでも反映されない場合、問い合わせより教えていただければ幸いです。初心者の僕ができる範囲で、修正したいと思います。

下記画像のようになればOKです。右上の「×」でスタイルシートを閉じます。