月別アーカイブ: 2013年2月

HTML：WEBサイト内の文章・文字列をコピー禁止にする

Posted on by
返信

WEBサイトを作成する場合、ページの内容ごとに様々な文章を記載すると思います。
WEBサイト閲覧者はサイト内の文章を「右クリック→コピー」や「Ctrl+C」などで簡単にコピーすることができますが、サイト内で記載した独自の文章や文字列等をコピーされたくない場合があります。
今回はJavaScriptを使用して、HTMLに記載した文章・文字列等のコピーを禁止・不可にする対策方法をメモします。

コピー禁止したい文章や文字列を入れているタグに下記のコードを記載します。
記載したタグ内の文字をコピーすることができなくなります。

onCopy="return false;"

■ ページ全体をコピー禁止する場合

bodyタグに「onCopy=”return false;”」を追加します。

<body onCopy="return false;">コピー禁止</body>

■ 指定したタグをコピー禁止する場合

divタグ内の文字を禁止する場合、divタグに「onCopy=”return false;”」を追加します。

<div onCopy="return false;">コピー禁止</div>

■ コピー時にアラートを表示する場合

「onCopy」に「alert(‘出力文字列’);」を追加します。

<div onCopy="alert('コピー禁止'); return false;">コピー禁止</div>

しかし、上記の方法でコピー禁止にしても方法によってはコピーができてしまうので、あくまでも簡単にコピー禁止を対応した場合の処理です。

ちなみに右クリックを禁止したい場合は下記のコードを記載します。

 onContextmenu="return false;"

WordPress：WordPressのメニューにある「ホーム」という文言を変更

Posted on by
返信

WordPressでWEBサイトを作成した時にメニューバーに「ホーム」という文言でリンクがあると思います。
（テーマによっては文言が違う場合がある）
この「ホーム」という文言を変更したい場合があると思います。

WP_home_1

「ホーム」を別の文言に変更したい場合はfunctions.phpを編集します。
テーマで「Twenty Eleven」を使用している場合、下記のファイルを参照します。

/wp-content/themes/twentyeleven/functions.php

ソース内に下記のコードがあるので「true」の箇所を設定したい文言に変更しアップロードします。
$args[‘show_home’]に変更したい文字列を格納します。

/**
 * Get our wp_nav_menu() fallback, wp_page_menu(), to show a home link.
 */
function twentyeleven_page_menu_args( $args ) {
    $args['show_home'] = true;
    return $args;
}
add_filter( 'wp_page_menu_args', 'twentyeleven_page_menu_args' );

また、最初から記載されているコードを編集したくない場合、functions.phpの下部に下記のコードを新しく作成し追加します。
新しく追加したコードで上書きするような感じです。独自のファンクションを作成しています。

function raining_page_menu_args( $args ) {
    $args['show_home'] = 'raining home';
    return $args;
}
add_filter('wp_page_menu_args', 'raining_page_menu_args');

アップロードが完了すると「ホーム」が「raining home」という文言に変更されます。

WP_home_2

functions.phpに処理を記述するとサイト全体に反映されます。
「add_filter」で「wp_page_menu_args」というフィルター名に、編集または新しく作成したファンクション（関数名）を記述するとメニューの「ホーム」という文言を編集できます。

add_filter('フィルター名', '関数名');

CSS：CSSでボックス内の英語文字列等を折り返しさせる

Posted on by
2

HTMLの「table」タグや「div」タグなど、ボックス内で長い英語文字列やURL等を入れるとボックスからはみ出して表示されることがあります。
ボックスに指定した幅で文字列を折り返しさせるために、CSSを使用し英語等の文字列をボックス内で改行させます。
CSSは「word-break」、「word-wrap」を使用し、文字列の改行の仕方を指定します。

■ 「table」タグの場合

「table」タグでは「word-wrap: break-word;」を使用するとボックス幅が伸びてしまうので、「word-break: break-all;」を使用して折り返しさせます。

【CSS】

table {
    width: 300px;
}
table th {
    border: 1px solid #CCC;
    width: 50px;
}
table td {
    border: 1px solid #CCC;
    word-break: break-all;
}

【HTML】

<table>
    <th>URL</th>
    <td>http://raining.bear-life.com/test/aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</td>
</table>

css_box_1

■ 「div」タグの場合

「div」タグでは「word-wrap: break-word;」と「word-break: break-all;」でどちらでも折り返しされますが、「word-wrap: break-word;」の方が単語の途中で折り返しするので「word-wrap: break-word;」を使用します。

【CSS】

div {
    border: 1px solid #CCC;
    width: 300px;
    word-wrap: break-word;
}

【HTML】

<div>
http://raining.bear-life.com/test/aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
</div>

css_box_2

WordPress：WordPressで固定ページの表示順を変更する

Posted on by
2

WordPressで固定ページを公開すると、メニュー（ナビゲーション）の箇所に固定ページへのリンクが作成されます。
作成されたリンクの順番を変更したい場合があります。下記の手順で固定ページリンクの順番を変更できます。

wp_linksort_1

1.サイドメニューの「固定ページ」をクリックします。

wp_linksort_2

2.順番を変更するページの編集画面に遷移します。

wp_linksort_3

3.固定ページ編集画面「ページ属性」の「順序」を半角数字で表示する順番を変更します。

wp_linksort_4

4.「更新」ボタンで反映すれば、固定ページリンクの表示順が変更されます。

wp_linksort_5

5.公開画面を確認すると下記のように表示順が変更されます。

wp_linksort_6

php：phpで正規表現を使った英数字チェック

Posted on by
返信

phpでフォームを作成する場合、バリデーションの処理は必要だと思います。
数字チェック、英字チェック、英数字チェックなど色々なパターンのチェックがあります。
いつも忘れてしまうので、phpの正規表現で「preg_match()」を使用した英数字チェックをする方法をメモします。

※変数内の全ての文字を判定しています。
※半角英数字の場合です。

■ 数値チェック

	// 数字チェック
	if (preg_match('/^[0-9]+$/', $data)) {
		// 数字の場合
	}
	else {
		// 数字ではない場合
	}

■ 英字チェック

	// 英字チェック
	if (preg_match('/^[a-zA-Z]+$/', $data)) {
		// 英字の場合
	}
	else {
		// 英字ではない場合
	}

■ 英数字チェック

	// 英数字チェック
	if (preg_match('/^[a-zA-Z0-9]+$/', $data)) {
		// 英数字の場合
	}
	else {
		// 英数字ではない場合
	}

また、関数にしておくと値を渡すだけなので簡単に使えると思います。

■ 上記のチェックを関数にした場合

	// 数字チェック
	function is_num($data) {
		if (preg_match('/^[0-9]+$/', $data)) {
			// 数字の場合
			return true;
		}
		else {
			// 数字ではない場合
			return false;
		}
	}

	// 英字チェック
	function is_alpha($data) {
		if (preg_match('/^[a-zA-Z]+$/', $data)) {
			// 英字の場合
			return true;
		}
		else {
			// 英字ではない場合
			return false;
		}
	}

	// 英数字チェック
	function is_alphanum($data) {
		if (preg_match('/^[a-zA-Z0-9]+$/', $data)) {
			// 英数字の場合
			return true;
		}
		else {
			// 英数字ではない場合
			return false;
		}
	}

他にも色々なパターンを組み合わせることができるので、自由にチェック内容を作成できると思います。