티스토리 꾸미기, 마우스 우클릭 방지 기능 넣기

자신의 티스토리 블로그를 만들고 나서 글을 한두 개 작성하다 보면, 블로그 디자인에 관심을 갖게 되고 적당한 스킨 (테마)을 찾아보고 적용하게 된다.

나는 이 과정에서 몇몇 블로그를 둘러보다기 "친효 스킨"이 마음에 들어서 검색해보니 스킨 제작자 (친절한 효자손)가 성함만큼 친절하게 이 스킨을 무료로 배포하고 있고 정기적으로 업데이트를 하고 있어서 신뢰감이 가서 이 스킨을 사용하기로 결정했다.

일단 스킨을 적용하고 나면, 그 스킨에 약간의 품을 들여서 자신만의 것을 만들기 위해서 Customizing을 해나간다.

그중에 하나가 "마우스 우클릭 방지"기능이다.

자신의 블로그 내용을 불법적으로 복사해 가는 것을 막는 기능이다.

물론 이 기능을 넣더라도 자바스크립터로 구현한 기능이므로 크롬 브라우즈의 경우에 읽는 입장에서 설정을 약간 손보면 쉽게 해제할 수 있지만, 콘텐츠를 만드는 입장에서는 "내 콘텐츠이니 함부로 가져가지 마세요"라는 의미의 소극적이지만 확실한 저작권 의사 표시이니 이 기능을 넣어 주는 것이 좋겠다.

물론 Javascript와 HTML 코드가 들어가는 것이니 이 부분의 지식이 필요하지만, 다행스럽게도 먼저 배우신 분들이 코드를 공개해 놓았기 때문에 우리들은 활용만 하면 된다. ^^

마우스 우클릭 방지 기능을 구현하기 위해서는 "우클릭 금지"와 "드래그 금지"의 2가지 코드가 들어가야 한다.

우클릭 금지 코드 심기

1. 코드

<!--우클릭 금지 시작-->
	<script type="text/javascript">
		var omitformtags=["input", "textarea", "select"]
		omitformtags=omitformtags.join("|")
		function disableselect(e){
		if (omitformtags.indexOf(e.target.tagName.toLowerCase())==-1)
		return false
		}
		function reEnable(){
		return true
		}
		if (typeof document.onselectstart!="undefined")
		document.onselectstart=new Function ("return false")
		else{
		document.onmousedown=disableselect
		document.onmouseup=reEnable
		}
	</script>
<!--우클릭 금지 종료-->

2. 심을 위치

자신의 웹페이지 Index.html 파일의 head 부분에 위의 코드를 넣으면 된다.

3. 넣는 방법

만일에 특별한 수단이 없다면 내가 웹서버에 직접 들어가서 그 안에 있는 index.html 파일을 직접 건드려야겠지만, 티스토리에서는 이를 손쉽게 할 수 있는 수단을 만들어 두었다. 바로 티스토리 관리자 화면이다.

① 먼저 티스토리 관리자 화면에서 "스킨 편집" -> "html 편집을 선택한다.

② html 탭에서 <head> ~ </head> 영역을 찾는다.

방법은 Ctrl+F를 눌러 검색참에서 " </head>"를 입력하면 손쉽게 찾을 수 있다.

여기에 위의 코드를 복사 -> 붙여 넣기를 하면 된다.

드래그 금지 코드 심기

1. 코드

<!--드래그금지 시작-->
<body oncontextmenu="return false" onselectstart="return false" ondragstart="return false">
<!--드래그금지 종료-->

2. 심을 위치

자신의 웹페이지 Index.html 파일의 body 부분에 위의 코드를 넣으면 된다.

3. 심는 방법

앞에서와 같이 html 탭으로 와서 body 부분을 찾아서 위의 코드를 삽입한다. 찾는 방법은 동일하게 Ctrl+F의 찾기 기능을 활용해서 body 부분의 위치를 찾으면 된다.

적용하기

2가지 코드 심기가 완료하였으면 적용하기 버턴을 눌러서 이 수정 내용을 저장한다.

이후에 자신의 블로그에 들어가서 마우스 드래그및 우클릭 기능을 사용해 보면, 작동하지 않는 것을 확인할 수 있다.

은소랜 은퇴 연구소