文字選択出来ないサイトで文字選択可能にする
スタイルシートで選択不可にしている
ネットで調べ物してて、ちょっとメモを取るのに選択してコピーしようと思ったら、文字を選択できなかったことはないでしょうか?
あれが意外とイラッとくるので、解除方法を調べましたのでご紹介します。
最初は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
正直言ってコピペ不可にしているようなサイトには、殆ど有益な情報がないような気がしますが、ちょっとイラッとしたのでムキになって調べてみました。