티스토리 스피드 스타 스킨: 제목 선택 비활성화 해제

이 블로그에는 티스토리 유료 스킨 중 하나인 스피드 스타(Speed Star)가 사용되고 있습니다. 스피드 스타 스킨이 최근 3.0.0 버전으로 업데이트되면서 속도와 SEO가 향상되었고, 곧이어 버그가 수정된 3.1.0이 공개되었습니다.

스피드 스타 스킨에서는 포스트 제목을 방문자들이 선택할 수 없도록 CSS 코드가 적용되어 있습니다. 저는 사용자들이 글 제목을 선택할 수 있도록 CSS를 조금 수정했습니다.

티스토리 스피드 스타 스킨: 제목 선택 비활성화 해제

스피드 스타 스킨에서는 글 제목을 선택할 수 없도록 다음과 같은 CSS 코드가 적용되어 있습니다.

    user-select: none;

[**user-select**] 속성은 요소의 텍스트를 선택할 수 있도록 할지를 지정합니다.

웹 브라우저에서 사용자가 텍스트를 더블 클릭하면 해당 텍스트가 선택되거나 강조 표시됩니다. 이 속성을 사용하여 텍스트 선택이 되지 않도록 할 수 있습니다.

CSS 문법:

user-select: auto|none|text|all;

속성 값:

값	설명
auto	기본값. 브라우저에서 허용하면 텍스트를 선택할 수 있습니다.
none	텍스트 선택 방지
text	사용자에 의해 텍스트가 선택 가능합니다.
all	더블 클릭 대신 한 번의 클릭(싱글 클릭)으로 텍스트가 선택됩니다.

[**user-select**] CSS 속성은 대부분의 브라우저에서 작동합니다.

응용:

스피드 스타 스킨에는 다음과 같은 CSS 코드가 추가되어 있어서 포스트 제목이 선택이 되지 않습니다.

.entry-title {
    user-select: none;
    }

스킨 편집의 CSS 탭에 다음과 같은 코드를 추가하면 포스트 텍스트 선택이 활성화됩니다.

.entry-title {
    -webkit-user-select: auto !important;
    user-select: auto !important;
}

마치며

티스토리에서는 다양한 무료 스킨이 있지만, 속도가 빠른 스킨을 원하는 경우 Speed Star와 같은 유료 스킨을 고려할 수 있으리라 생각됩니다.

저는 이 스킨의 상당 부분을 커스텀하여 사용하고 있어서 스킨이 업데이트될 때마다 수정 사항을 다시 추가해야 하는 번거로움이 있습니다. 워드프레스의 경우 올바르게 커스텀 되었다면 별도의 추가 작업 없이 업데이트가 되는 것과는 대조적입니다.

티스토리는 자바스크립트와 CSS를 사용하여 커스텀이 가능합니다. 최근 티스토리 자체 광고 때문에 일부 블로거들이 워드프레스나 구글 블로그스폿으로 이동했지만, 수익형 블로그가 아닌 경우에는 티스토리를 활용하는 것도 괜찮은 것 같습니다. 저는 많은 이미지를 업로드해야 포스트를 작성해야 하는 경우 티스토리를 유용하게 활용하고 있습니다.

참고

https://avada.tistory.com/2284

구글 애드센스 모바일 앵커 광고 하단에 표시하여 CPC 높이기 (업데이트)

https://avada.tistory.com/3072

클라우드웨이즈: 서버 크기와 페이지 뷰 범위(feat. DigitalOcean 서버)