4. 스킨 옵션 - 기본 색상

이미지를 활용해 다양한 기능을 제공하는 티스토리 반응형 스킨

드디어 스킨 옵션 첫 장을 시작합니다. 가이드라인을 잡고 글을 발행할 예정이며 차후 빠진 부분은 조금씩 추가할 생각입니다. 오늘은 설명서의 네 번째이자 가장 중요한 내용인 스킨 옵션 활용의 첫 소개입니다. 아래에서 설명할 모든 기능은 '블로그관리 > 꾸미기 > 스킨 편집'의 스킨 옵션을 통해 쉽게 설정 가능합니다.

기본 색상

색상표에서 원하는 색상을 선택하거나 혹은 직접 HTML 색상코드를 입력하면 스킨 여러 곳에 지정된 색상으로 변경됩니다. 아직은 많은 곳에 적용하지는 않았어요. 일단 적용해서 괜찮다 싶은 곳을 선택해서 기본 색상이 변경되면 해당 색상으로 노출되도록 작업했습니다.

1) 댓글

댓글 영역 중에서 버튼과 라인이 기본 색상으로 변경됩니다. 기본 색상이 적용되면 좀 어색할 수 있는 부분이 있어 기본적으로 opacity 설정을 한 곳도 있습니다. 원한다면 해당 영역의 opacity 값이 적절히 조정해 변경할 수 있습니다. 뿐만 아니라 마지막에 설명드릴 CSS 영역을 참조하면 기본 색상을 지정할 곳을 추가하거나 제외할 수 있습니다.

2) 위로 가기

모든 페이지에 늘 따라다니는 위로 가기 버튼입니다. 해당 버튼을 클릭하면 언제라도 페이지 맨 위로 이동합니다. 해당 버튼도 기본 색상을 지원합니다.

3) 사이드바

모든 사이드바에 노출되고 있는 링크가 달린 글 위에 마우스를 올리면 기본 색상으로 표현됩니다.

4) 밑줄(언더라인)

흔히 언더라인 태그라고 하죠. <U>스킨 옵션</U>으로 HTML을 작성한 경우 밑줄이 기본 색상으로 보입니다. 언더라인 태그는 티스토리 에디터에서 쉽게 적용할 수 있는 기능입니다.

4) 기본 색상이 정의된 곳

앞서 댓글의 기본 색상을 설명하며 사용자가 원하는 기능에 기본 색상을 지정할 수 있다고 말씀드렸습니다. 아래 CSS는 '블로그관리 > 꾸미기 > 스킨 편집'의 [html 편집]에서 'HTML'에서 확인할 수 있습니다.

53
54
55
56
57
58
59
60
61
/* 기본 색상 */
body .theme-color { color: [##_var_default-color_##]; border-color: [##_var_default-color_##] !important }
body .theme-background { background-color: [##_var_default-color_##] }
body .svg-icon path { fill: [##_var_default-color_##] }
.comment-form-action .secret-checkbox:checked + .secret-label .svg-icon path { fill: [##_var_default-color_##] }
.comment-list .comment > ul > li.timeline:before, .comment-list .comment > ul > li.timeline:after { background-color: [##_var_default-color_##] }
#imap p:before { color: [##_var_default-color_##] }
{ border-color: [##_var_default-color_##] }
.sidebar a:hover { color: [##_var_default-color_##] }
cs

줄 번호는 변경될 수 있겠죠. 하지만 늘 그 위치에서 조금 벗어날 뿐 쉽게 찾을 수 있을겁니다. 그러길 바랍니다. 앞서 밑줄은 기본 색상을 지원한다고 말씀드렸습니다. 그럼 굵은 글씨 태그 그러니까 볼드 태그에 기본 색상을 적용해보려 합니다.

62
{ border-color: [##_var_default-color_##] }
cs

위 정의를 추가하면 이제 티스토리 에디터에서 굵은 글씨 태그를 적용한 영역에 기본 색상으로 표현됩니다. 물론 원하지 않는 영역이 있다면 해당 정의를 삭제하면 되겠죠.

이미지 맵

롤랑존

이미지를 활용해 다양한 기능을 제공하는 티스토리 반응형 스킨

    '설명서' 카테고리의 다른 글

    글에 남긴 여러분의 의견은 0개 입니다.

    *

    *