気になるガジェット

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

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

f:id:the_beatles:20170609165023j:plain:w1000

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

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

実はスタイルシートで選択不可にしてます

最初は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

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

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

f:id:the_beatles:20170609164309p:plain:w800
  • 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>

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

f:id:the_beatles:20170609161339p:plain:w800
* {
    user-select: auto !important;
    -webkit-user-select: auto !important;
    -webkit-user-drag: auto !important;
}

スタイルシート適用後

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

f:id:the_beatles:20170609161847p:plain:w800

Chromeの場合

Google Chromeの場合は、User CSSというアドオンをインストールすれば、Firefoxのアドオンと同じような事が出来ます。 むしろ僕が普段使うブラウザはChromeのため、こちらの方を使っております。 chrome.google.com

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