티스토리 - 특정 부분 드래그 CSS 수정하기

티스토리 블로그를 운영하면 가끔 작성한 글이 다른 블로거에 의해 그대로 복사되어 붙여넣기 된 글로 올려지는 경우를 목격하곤 합니다.

영감을 받은 비슷한 글이 아니라, 정말로 내 글과 똑같이 복사되어 게시되는 경우가 있습니다.

게다가 내 글이 누군가에 의해 무단 복사되어 게시된다면, 내 글보다 검색 노출 순위가 높을 수도 있습니다.

이러한 상황을 예방하기 위해 많은 블로거들이 마우스 우클릭 방지 또는 드래그 금지를 설정해 놓습니다.

블로거가 원하는 것은 글이 무단 복사되지 않으면서 좋은 정보를 주기 위함인데 가끔 소스 코드를 복사하거나 내용을 확인하려는 블로그 방문자에게 불편함을 줄 수 있습니다.

 

따라서, 내용이 무단 복사되는 것을 예방하고 동시에 사용자 편의성을 고려하려면 특정 부분만 드래그할 수 있도록 한다면 좋은 대안일 수 있습니다. 특히 코드 블록과 인용문 같은 핵심 내용에 대한 드래그를 허용하면 블로그 방문자가 해당 부분을 복사하고 활용할 수 있게 됩니다. 이로써 무단 복사를 방지하면서 동시에 유용한 정보를 제공할 수 있습니다.

 

먼저 마우스 오른쪽 클릭 방지 플러그인을 비활성화 합니다.

1. 티스토리 블로그에 로그인한 후 관리 대시보드로 이동합니다.
2. "플로그인 설정"에서 "마우스 오른쪽 클릭 방지 플러그인" 또는 비슷한 플러그인이 활성화되어 있다면, 이 플러그인을 비활성화 또는 제거합니다. 이 플러그인은 글 전체 드래그를 금지하는 방해 요소가 될 수 있습니다.
3. 이제 "관리"에서 "스킨 편집"을 선택합니다.

html 편집 버튼을 누르고 CSS 편집창을 클릭합니다.

1. "스킨 편집" 페이지에서 "HTML 편집"을 누르고, "CSS 편집창"을 클릭합니다.
2. 다음과 같은 CSS 코드를 CSS 편집창의 맨 아래에 복사하고 붙여넣습니다:
3. CSS 코드를 추가한 후, "적용" 버튼을 클릭하여 변경사항을 저장합니다.
   이렇게 하면 티스토리 블로그의 글 전체가 드래그 금지 설정이 적용되어 사용자가 글을 전체로 선택하는 것을 방지할 수 있습니다. 

특정 글 드래그 허용
CSS 하단에 2개 블록 추가함.
/*code pre 코드블럭 드래그 허용 */
code, pre {
	-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;
	-moz-user-select: -moz-none !important;
	-ms-user-select: none !important;
	user-select: none !important;
}

⬆️위에 글처럼 코드 블록 안에 작성된 글은 드래그 및 복사가 가능합니다.