SEOランディングページで作成したページをクリック（タップ）禁止にする方法

本日は特定ページでのみ「クリックやタップを禁止する方法」をご紹介いたします。以下の手順解説では当研究所が監修している人気テーマ「SEOランディングページ」を使って設定させていただきます。

SEOランディングページの作成ページをクリック（タップ）を無効化

以下がクリックやタップ操作を禁止するためのスクリプトです。

<!-- Start Copy Guard Protect script -->
<meta http-equiv="imagetoolbar" content="no">
<script>
	/*<![CDATA[*/
	document.oncontextmenu = function () {
		return false;
	};
	/*]]>*/
</script>
<script type="text/javascript">
	/*<![CDATA[*/
	document.onselectstart = function () {
		event = event || window.event;
		var custom_input = event.target || event.srcElement;

		if (custom_input.type !== "text" && custom_input.type !== "textarea" && custom_input.type !== "password") {
			return false;
		} else {
			return true;
		}

	};
	if (window.sidebar) {
		document.onmousedown = function (e) {
			var obj = e.target;
			if (obj.tagName.toUpperCase() === 'SELECT'
				|| obj.tagName.toUpperCase() === "INPUT"
				|| obj.tagName.toUpperCase() === "TEXTAREA"
				|| obj.tagName.toUpperCase() === "PASSWORD") {
				return true;
			} else {
				return false;
			}
		};
	}
	window.onload = function () {
		document.body.style.webkitTouchCallout = 'none';
		document.body.style.KhtmlUserSelect = 'none';
	}
	/*]]>*/
</script>
<script type="text/javascript">
	/*<![CDATA[*/
	if (parent.frames.length > 0) {
		top.location.replace(document.location);
	}
	/*]]>*/
</script>
<script>
	/*<![CDATA[*/
	document.ondragstart = function () {
		return false;
	};
	/*]]>*/
</script>
<style type="text/css">

	* {
		-webkit-touch-callout: none;
		-webkit-user-select: none;
		-moz-user-select: none;
		user-select: none;
	}

	img {
		-webkit-touch-callout: none;
		-webkit-user-select: none;
		-moz-user-select: none;
		user-select: none;
	}

	input, textarea, select {
		-webkit-user-select: auto;
	}

</style>
<!-- End Copy Guard Protect script -->

上記のスクリプトをSEOランディングページに差し込んでいきましょう。

クリック＆タップを禁止にする

SEOランディングページでは「LP／通常ページ」にも「投稿」にも「headに追加」という入力欄が元から用意されています。この入力ボックスはページ側に読み込ませたいタグがある際に使います。

無効化を適用するページの準備

まずは「LP／通常ページ一覧」をクリックしましょう。すでに作成済みのページがある場合は同じページを複製して作ると早いです。複製プラグインは最下部にリンクを貼っておきますのでご参照くださいませ。

今回は複製をせずテスト用に新しいページを作るので「新規追加」をクリック。

無効化のスクリプトを貼り付ける

以下がテストページを準備した例です。本文（エディター）の下にある「headに追加」の入力ボックスへ文頭で紹介したスクリプトをそのまま貼り付けてください。念のためアイキャッチ画像も設定しています。

公開ボタンを押してページ確認

そして「公開」をクリック。

公開が完了したら「ページを表示」を押して実際に「クリック操作やタップ操作」を確認していきましょう。

動作をチェックする

ページが開いたらマウス操作をお試しください。もし右クリックやタップ操作が動作しなければ動作OKです。

▼スクリプトを設置した確認用のページ
https://wp-labo.com/seo-landingpage/click-tap-invalid-check-sample/

▼クリックやタップができる他のページ
https://wp-labo.com/LP/free-theme/

まとめ

本日は個別記事でマウス操作、タップ操作を無効化する方法をご紹介いたしました。画像のダウンロードを防ぎたい、文章のコピーを防ぎたいなど状況によって適用させたい範囲も異なってくるはずです。希少価値の高いコンテンツを配信している場合は特に画像や本文の扱いが重要になるのでぜひ本記事をご参考くださいませ。

サイト全体に適用する無料プラグインのダウンロードはこちら

もし「サイト全体」をクリック・タップ操作禁止にするならプラグインが便利です。

マウスでのテキスト選択から右クリック操作までスマホのタップ長押しコピーなども禁止化するプラグイン「Copy Guard Hyper」