WordPressコピー防止CSS｜SWELL・Cocoon・AFFINGER等テーマ別設定方法

WordPressサイトでコンテンツの無断コピーを防ぎたいと思ったことはありませんか？

この記事では、CSSを使ってブログ全体でコピペを禁止する方法と、特定のページだけコピーを許可する設定方法を、主要WordPressテーマ別に詳しく解説します。

コピペしてすぐ使えるCSSスニペットも豊富に用意しているので、技術的な知識がなくても簡単に実装できます。

WordPressでコピペ防止が必要な理由

WordPressブログでのコピペを防止するメリットとしては、下記があります。

コピペ防止を実装する際は、ユーザビリティを損なわないよう注意が必要です。特に、引用や参考資料として利用されることを想定したページは、適切に許可設定を行うことが望ましいです。

基本的なコピペ防止CSS

まず、ブログ全体でテキストの選択を禁止する基本的なCSSをご紹介します。

/* 全ページ・全記事でテキスト選択を禁止 */
対象エレメント {
  -webkit-user-select: none;
  -moz-user-select: none;
  -khtml-user-select: none;
  user-select: none;
}

この「対象エレメント」の部分に、各WordPressテーマの本文を囲むセレクタを指定します。

特定ページでコピーを許可するCSS

一方で、お問い合わせフォームや利用規約など、ユーザーがコピーする必要があるページもあります。そのようなページでは、以下のCSSで個別に許可設定を行います。

/* 特定ページ（例：ID100等）だけ選択可にする */
.page-id-100 対象エレメント,
.postid-200 対象エレメント,
.postid-300 対象エレメント {
  -webkit-user-select: auto;
  -moz-user-select: auto;
  -khtml-user-select: auto;
  user-select: auto;
}

主要WordPressテーマ別CSS設定

SWELL（スウェル）

SWELLテーマをお使いの場合は、以下のCSSをカスタマイザーの「追加CSS」に貼り付けてください。

/* SWELLで本文選択禁止 */
#main_content {
  -webkit-user-select: none;
  -moz-user-select: none;
  -khtml-user-select: none;
  user-select: none;
}

SWELLでの特定ページ許可例:

.postid-123 #main_content,
.postid-456 #main_content,
.postid-789 #main_content {
  -webkit-user-select: auto;
  -moz-user-select: auto;
  -khtml-user-select: auto;
  user-select: auto;
}

Cocoon（コクーン）/ SANGO（サンゴ）

CocoonテーマとSANGOテーマは、同じセレクタを使用します。

/* Cocoon/SANGOで本文選択禁止 */
.entry-content {
  -webkit-user-select: none;
  -moz-user-select: none;
  -khtml-user-select: none;
  user-select: none;
}

DIVER（ダイバー）

DIVERテーマでは、以下のCSSが有効です。

/* DIVERテーマで本文選択禁止 */
.entry-content {
  -webkit-user-select: none;
  -moz-user-select: none;
  -khtml-user-select: none;
  user-select: none;
}

Luxelitas（ルクセリタス）/ LION MEDIA（ライオンメディア）

これらのテーマでは、.containerセレクタを使用します。

/* Luxelitas / LION MEDIAで本文選択禁止 */
.container {
  -webkit-user-select: none;
  -moz-user-select: none;
  -khtml-user-select: none;
  user-select: none;
}

STINGER（スティンガー）/ JIN（ジン）

STINGERシリーズとJINテーマでは、以下のCSSを使用してください。

/* STINGER / JINで本文選択禁止 */
#contents {
  -webkit-user-select: none;
  -moz-user-select: none;
  -khtml-user-select: none;
  user-select: none;
}

AFFINGER（アフィンガー）

AFFINGERテーマ（WING含む）では、以下の設定が最適です。

/* AFFINGERで本文選択禁止 */
#contentInner {
  -webkit-user-select: none;
  -moz-user-select: none;
  -khtml-user-select: none;
  user-select: none;
}

CSS実装の手順

① まず、WordPressの管理画面にアクセスする。

②「外観」→「カスタマイズ」をクリックする。

③ カスタマイザーメニューから「追加CSS」を選択する。

④ 上記のテーマ別CSSコードを貼り付け、「公開」ボタンをクリックする。

以上でCSSが反映され、コピーが無効になります。

効果的なコピペ防止の応用テクニック

画像の保存防止

テキストだけでなく、画像の保存も防ぎたい場合は、以下のCSSを追加します。

/* 画像の右クリック・ドラッグ防止 */
img {
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  -webkit-user-drag: none;
  -khtml-user-drag: none;
  -moz-user-drag: none;
  -o-user-drag: none;
  user-drag: none;
}

部分的な許可設定

見出しは選択可能にして、本文のみ選択不可にしたい場合の例です。

Cocoon/SANGO/DIVERテーマの場合：

/* 本文のみ選択禁止、見出しは許可 */
.entry-content p,
.entry-content li {
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}

.entry-content h1,
.entry-content h2,
.entry-content h3,
.entry-content h4,
.entry-content h5,
.entry-content h6 {
  -webkit-user-select: auto;
  -moz-user-select: auto;
  user-select: auto;
}

SWELLテーマの場合：

/* SWELLで本文のみ選択禁止、見出しは許可 */
#main_content p,
#main_content li {
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}

#main_content h1,
#main_content h2,
#main_content h3,
#main_content h4,
#main_content h5,
#main_content h6 {
  -webkit-user-select: auto;
  -moz-user-select: auto;
  user-select: auto;
}

AFFINGERテーマの場合：

/* AFFINGERで本文のみ選択禁止、見出しは許可 */
#contentInner p,
#contentInner li {
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}

#contentInner h1,
#contentInner h2,
#contentInner h3,
#contentInner h4,
#contentInner h5,
#contentInner h6 {
  -webkit-user-select: auto;
  -moz-user-select: auto;
  user-select: auto;
}

STINGER/JINテーマの場合：

/* STINGER/JINで本文のみ選択禁止、見出しは許可 */
#contents p,
#contents li {
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}

#contents h1,
#contents h2,
#contents h3,
#contents h4,
#contents h5,
#contents h6 {
  -webkit-user-select: auto;
  -moz-user-select: auto;
  user-select: auto;
}

Luxelitas/LION MEDIAテーマの場合：

/* Luxelitas/LION MEDIAで本文のみ選択禁止、見出しは許可 */
.container p,
.container li {
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}

.container h1,
.container h2,
.container h3,
.container h4,
.container h5,
.container h6 {
  -webkit-user-select: auto;
  -moz-user-select: auto;
  user-select: auto;
}

SEO面での注意点

コピペ防止機能は、時としてユーザビリティを損なう可能性があります。

以下の点に注意しましょう。

アクセシビリティへの配慮

視覚障害のあるユーザーが使用するスクリーンリーダーソフトウェアは、テキスト選択機能に依存することがあります。完全にコピペを禁止するのではなく、必要に応じて部分的な許可を検討することも選択肢に入れておきましょう。

トラブルシューティング

CSSが適用されない場合

CSSコードを追加したにも関わらず、コピペ防止が機能しない場合は、キャッシュが原因である可能性が高いです。

まず、ブラウザのキャッシュをクリアしてページを再読み込みしてください。それでも改善しない場合は、WordPressで使用しているキャッシュプラグイン（WP Rocket、W3 Total Cacheなど）の設定を確認し、キャッシュをクリアしてみましょう。また、CloudflareなどのCDNサービスを利用している場合は、そちらのキャッシュもクリアする必要があります。

キャッシュクリア後も問題が解決しない場合は、セレクタが正しく指定されているか確認してください。ブラウザの開発者ツール（F12キー）を使ってHTMLの構造を確認し、使用しているテーマの実際のセレクタと記事内のコードが一致しているかチェックしましょう。テーマのアップデートなどで、セレクタが変更されている可能性もあります。

一部のブラウザで効果がない場合

古いブラウザでは`user-select`プロパティがサポートされていない場合があります。特に、Internet Explorer 9以前やAndroid 4.0以前のブラウザでは正常に動作しない可能性があります。

この問題を解決するには、より広範囲のブラウザに対応したCSSプロパティを追加することが効果的です。以下のコードのように、`-webkit-touch-callout`や`-ms-user-select`などのベンダープレフィックスを含めることで、より多くのブラウザで動作するようになります。

/* より広範囲なブラウザサポート */
.no-select {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

さらなるセキュリティ強化

CSSだけでは回避される可能性があるため、JavaScriptを併用することでより強固な保護が可能です。

// 右クリック無効化
document.addEventListener('contextmenu', function(e) {
  e.preventDefault();
});

// Ctrl+C, Ctrl+A, Ctrl+V無効化
document.addEventListener('keydown', function(e) {
  if (e.ctrlKey && (e.keyCode === 67 || e.keyCode === 65 || e.keyCode === 86)) {
    e.preventDefault();
  }
});

まとめ

WordPressでのコピペ防止は、適切なCSS設定により簡単に実装できます。

実装する際のポイントとして、まず使用しているテーマに応じた適切なセレクタを選択することが重要です。SWELL、Cocoon、AFFINGERなど、それぞれのテーマで異なるセレクタが使われているため、記事内で紹介したテーマ別のCSSコードを参考にしてください。

また、必要なページでは個別に許可設定を行うことで、ユーザビリティとセキュリティのバランスを保つことができます。お問い合わせフォームや利用規約などのページでは、ユーザーがテキストをコピーできるように設定することが望ましいでしょう。

運用においては、全体的な保護をベースとしつつ、必要に応じて部分的な許可を設けるアプローチが効果的です。実装後も定期的な効果確認とメンテナンスを行い、ユーザーからのフィードバックを収集して改善を続けることで、より良いサイト運営が可能になります。

この記事で紹介したCSSスニペットは、すべてコピペしてすぐに使用できます。あなたのWordPressサイトのテーマに合わせて、適切な設定を選択し、コンテンツの保護を実現してください。

コピペ防止機能の実装により、あなたの大切なコンテンツを守りながら、読者にとって価値のあるサイト運営を続けていきましょう。

当サイトの紹介

当サイトでは、巷にある副業案件や投資案件などを様々な角度から検証し、多くの人が被害に遭わないようにするため、随時記事を更新しています。

また、希望する方には、本当に優良なものだけを厳選して紹介しています。