Bloggerのテキスト選択を無効にする方法と一部除外する方法

byNatchan - 2023/12/24

0

Bloggerのテキスト選択を無効にする方法と一部を除外する方法を教えます。ブログのテキストを選択できないようにしたい人におすすめの内容です。
Image Credit: mdn web docs

{tocify} $title={Table of Contents}

当サイトの運営者Natchanが制作したフリー素材を『イラストAC』にて無料配布中！( ^o^)⊃―☆{codeBox}

テキスト選択無効化の手順

今回載せる、Bloggerのテキスト選択を無効＆一部除外にできるコードはCSSのみで実装できるので簡単です。それでは早速本題に入ります。

STEP1：1つ目のコードを追加

ダッシュボード→テーマ→カスタマイズ→CSSを追加を開く。そこで以下のコードをコピペして保存します。保存ボタンはフロッピーのアイコンです。

body {
-webkit-user-select: none!important; /* Safari */
-moz-user-select: -moz-none!important; /* Firefox */
-ms-user-select: none!important; /* Internet Explorer/Edge */
user-select: none!important;
}{codeBox}

これで完全にテキストの選択が無効化されました。1度確認してみてください。

STEP2：2つ目のコードを追加

次に、一部の箇所を除外する方法です。当サイトの場合、コードを載せる用のCSSボックスを除外していますが、ここでは引用タグ内の文章を選択可能にするためのコードです。これを1で作ったコードの直前に貼り付けます。

blockquote{
-webkit-user-select: text !important;
-moz-user-select: text !important;
-ms-user-select: text !important;
user-select: text !important;
}{codeBox}

なので、1と2で作ったコードを合わせると以下のようになります。

blockquote{
-webkit-user-select: text !important;
-moz-user-select: text !important;
-ms-user-select: text !important;
user-select: text !important;
}
body {
-webkit-user-select: none!important; /* Safari */
-moz-user-select: -moz-none!important; /* Firefox */
-ms-user-select: none!important; /* Internet Explorer/Edge */
user-select: none!important;
}{codeBox}

これで完了です！お疲れ様でした。

参考リンク：
How to disable copy paste of text in Blogger?

最後に｜テキスト選択を無効にした理由

以上、Bloggerのテキスト選択を無効にする方法と一部除外する方法を教えました。

当サイトでテキスト選択を無効にした理由というかきっかけは、マイクロソフトの分析ツールClarityで一部のユーザーがテキストを上手く選択できずにリンクをクリック出来ていないことに気付いたからです。

どういう不具合なのかネットに情報が出回っていないのでわかりませんが、MacBookのユーザーに多く発生する不具合なのでSafariと何か関係があるのかも..？そのことについてはこちらの記事でも語っています。

応急措置としてテキストの選択を無効化しましたが、もしその不具合の対処法がわかればテキスト選択を有効にしたいです。その方がUX的にも良いと思うので！

アイキャッチがないWordPressテーマを厳選〈サムネなし〉

アイキャッチ画像がないWordPressの有料テーマをEnvato Marketから厳選しました。ブログのサムネイルを作るのが面倒、文章が主体のワードプレスブログを運営したいという人におすすめの内容です。