【note】文字を範囲選択した時のポップアップを削除するCSS

​​Stylebot&Stylus(CSS)

「note」のアイコン

この記事では、「note」の記事を範囲選択した時に表示されるポップアップを非表示にするCSSについて書きます。

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

【note】文字を範囲選択した時のポップアップを削除するCSS

本記事で紹介するCSSを使えば、「note」の記事文章を範囲選択しても、シェアポップアップを表示しないようにできます。

通常は、下記画像のように、文字を範囲選択したら、シェア、Twitter、Facebook、LINEなどのポップアップメニューが表示されます。シェアしたい方には便利ですが、そういった機能を利用していない方には邪魔なだけです。

「note」の文字を範囲選択した時に表示されるポップアップスクリーンショット

CSSを使うことで、非表示だけでなく、背景色を変更したり、個別にボタンを削除したりできます。

「Stylebot（スタイルボット）」は、Chrome拡張機能だけでなく、Firefox、Microsoft Edgeアドオンも用意されています。

インストール方法

ウェブサイトに、自分で作成したCSSを適用できるChrome拡張機能「Stylebot」を利用します。

Chromeウェブストアからインストールできます。

Firefox・Edgeをご利用の場合

Chrome拡張機能だけでなく、Microsoft EdgeとFirefox版もあります。

「Chromeに追加」をクリックしてインストールします。

「Stylebot」のインストール手順画像

右上に拡張機能ボタンが追加されればOKです。詳しく使い方を知りたい方は、以下の記事を参考にしてみてください。

ポップアップを削除するCSS

「note」にアクセスします。右上の拡張機能アイコン→「Stylebotを開く」をクリックします。

Stylebotのスクリーンショット1

右側に白紙のサイドバーが表示されます。こちらにコードを書き込んでいきます。書き込むコードは、以下になっています。

/*noteの文字選択した際に表示されるポップアップ削除*/
.m-shareSheet {
  display: none !important;
}

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

Stylebotのスクリーンショット2

再度拡張機能ボタンを押して、登録したサイト（例：note.com）がオンになっていることを確認します。オンになっている間は有効になっているということです。

これで、note内の記事文章をマウスで範囲選択しても、ポップアップが表示されなくなります。Ctrl+Cのコピーは利用できます。

「note」の文字を範囲選択した時に表示されるポップアップを除去した画像

一時的に無効化したい場合は、Stylebot→「note.com」をオフにします。完全に使わなくなった場合は、書き込んだコードを削除します。

ポップアップの背景色を変更するCSS

削除ではなく、背景色を変更したい場合は、代わりに下記コードを利用してください。

/*noteの文字選択した際に表示されるポップアップの背景色*/
.m-shareSheet,
.m-shareSheet__item,
.m-shareSheet::after {
  background-color: #000 !important;
}

「background-color」の「#000」の部分を、好きなHTMLカラーコードに置き換えることで、別の色にできます。カラーコードの調べ方は、こちらの記事を参考にしてみてください。

上記CSSだと、真っ黒になります。

「note」の文字を範囲選択した時に表示されるポップアップを真っ黒な背景にした画像

ポップアップ内のボタンを個別に削除するCSS

ポップアップ全部を消すのではなく、Facebookだけ消す…といったように、個別除去したい場合は、下記コードを使ってみてください。消したい項目だけコピペします。

/*【noteのポップアップ】シェア*/
.m-shareSheet__title {
  display: none !important;
}

/*【noteのポップアップ】Twitter*/
.m-shareSheet>button[aria-label="twitter"] {
  display: none !important;
}

/*【noteのポップアップ】Facebook*/
.m-shareSheet>button[aria-label="facebook"] {
  display: none !important;
}

/*【noteのポップアップ】LINE*/
.m-shareSheet>button[aria-label="line"] {
  display: none !important;
}

/*【noteのポップアップ】引用文*/
.m-shareSheet>button[aria-label="note"] {
  display: none !important;
}

Twitter以外を消してみました。自分が使わないサービスだけ消すことができます。

「note」の文字を範囲選択した時に表示されるポップアップの一部ボタンを削除した画像

感想

以上、「note」の記事を範囲選択した時に表示されるシェアボタンを非表示にする方法、及び背景色を変更する方法でした。

皆さん、noteって利用しているんですかね。僕はいまいち使い方が分かりません。見る専用ですね。

​​Stylebot&Stylus(CSS)