気になるガジェット

気になるガジェットについて簡単にまとめたメモブログです

トップ > メモ > 文字選択出来ないサイトで文字選択可能にする

文字選択出来ないサイトで文字選択可能にする

メモ

スタイルシートで選択不可にしている

ネットで調べ物してて、ちょっとメモを取るのに選択してコピーしようと思ったら、文字を選択できなかったことはないでしょうか？

あれが意外とイラッとくるので、解除方法を調べましたのでご紹介します。

最初はJavaScriptを無効にすれば、文字の選択ができるようになるかと思っていたのですが、以下の記述がスタイルシートに記述されていると選択できなくなるようです。

user-select: none;
-webkit-user-select: none;
-webkit-user-drag: none;
-moz-user-select: none;
-ms-user-select: none;

よって、上記スタイルシートを、ブラウザのアドオンによって解除する方法を、Firefoxを使ってご紹介いたします。

Firefoxの場合

アドオンのインストール

StylishというFirefoxアドオンツールをインストールし、そのサイトの独自スタイルシート適用することによって、文字選択可能な状態に出来ますので、以下のサイトからインストールします。 addons.mozilla.org

独自スタイルシートの適用

例えば、以下のようなサイトがあったとします。

スクリーンショット

HTML

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <style>
    * {
        user-select: none;
        -webkit-user-select: none;
        -webkit-user-drag: none;
        -moz-user-select: none;
        -ms-user-select: none;
    }
    </style>
</head>
<body>
<h1>このサイトの文字列は選択禁止です！</h1>
</body>
</html>

以下の画像は全てのサイトについての設定になりますが、サイト単位で独自スタイルシートを適用させることも可能なようです。

スクリーンショット

スタイルシート

* {
    user-select: auto !important;
    -webkit-user-select: auto !important;
    -webkit-user-drag: auto !important;
}

スタイルシート適用後

スタイルシート適用後は、以下の画像の通り文字の選択が可能になります。

Chromeの場合

Google Chromeの場合は、User CSSというアドオンをインストールすれば、Firefoxのアドオンと同じような事が出来ます。

僕が普段使っているブラウザはChromeのため、こちらを普段使っております。 chrome.google.com

正直言ってコピペ不可にしているようなサイトには、殆ど有益な情報がないような気がしますが、ちょっとイラッとしたのでムキになって調べてみました。