구글 블로그에서는 드래그 및 복사를 방지하기 위한 다양한 방법들이 있는데, 그중 자바스크립트를 사용하지 않고 CSS만으로 적용할 수 있는 방법이다. 아래의 코드를 테마 > 맞춤설정 > ‘CSS 추가’에 그대로 붙여 넣으면 적용이 된다.
간혹 나중에 추가한 코드가 보이지 않는 경우가 있는데 - 구글 블로그에서 빈번한 일종의 버그 -, 이럴 때는 테마에서 <style>을 검색해보시면 본인이 추가한 CSS 코드를 확인 가능하다.
블로그 전체 드래그 및 복사 방지
body {
-webkit-user-select: none; /* 사파리 */
-moz-user-select: none; /* 파이어폭스 */
-ms-user-select: none; /* IE */
user-select: none; /* 표준 브라우저 (크롬 등) */
}
이 CSS 소스는 마우스로 글자를 파랗게 선택하는 행위 자체(user-select)를 차단하는 코드이다.
특정 영역에만 드래그 및 복사 방지
div에 직접 적용을 하면 특정 영역에서만 드래그 및 복사 방지가 적용된다. class로도 구현 가능하다.
<div style="-webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;">
<!-- 이 사이에 블로그 본문 내용을 작성하시면 드래그와 복사가 방지됩니다 -->
이 영역은 드래그할 수 없습니다.
</div>
아래 상자 안의 소스코드를 복사하여 테마 > [맞춤설정] > [CSS 추가]에 붙여 넣으면 바로 블로그에 적용 된다.
* 박스 안을 클릭하면 소스 전체가 자동으로 선택됩니다.
Tags:
구글 블로그