나는 dotted 대신에 underline 사용.
출처: http://hquest.tistory.com/13
티스토리 시작하면서 단순하고 깨끗한 스킨 - Tistory Studio (White) - 을 골랐더니,
작성한 글에서
연결(hyperlink) 표시가 나지 않고, 마우스를 올렸을 때만 밑줄이 나타났음.
물론 메뉴에서는 표시가 없는 것이 더 깔끔하지만,
본문에서는 불편한 느낌이 있었음.
어떻게 수정할까 생각을 하다가, 그냥 단순하게 점선과 역상으로 표시하였음.
이는 CSS(Cascading Style
Sheets)를 수정하면 됨.
참고자료
CSS 공식 홈페이지 :
http://www.w3.org/Style/CSS/
CSS2 Reference : css
property가 잘 정리되어 있음.
http://www.w3schools.com/css/css_reference.asp
CSS
TUTORIAL - CSS Links : 수정에 필요한 내용이 여기에 있음!
http://www.echoecho.com/csslinks.htm
정리하면,
a:link, a:visited, a:hover, a:active 에서 아래의 속성
적용.
text-decoration: (none, underline, overline, line-through,
blink)
border-bottom : (border-color, border-bottom-width,
border-style)
border-bottom-color : (color,
transparent)
border-bottom-width : (thin, medium, thick,
length)
border-bottom-style :(none, hidden, dotted, dashed, solid, double,
groove, ridge, inset,
outset)
스킨수정
Admin - 스킨 - HTML/CSS 편집
- (2번째 창) style.css
이 스킨에는 link 표시 설정하는 곳이 15군데 있음. (본문 1곳, 달력 2곳, 사이드바
7곳, 내용 5곳)
content : #localog, #taglog, .titleWrap, .article,
.actionTrail
한참 내려가면, 아래의 항목이 있음.
.article
a:link { color:#666; text-decoration:none;}
.article a:visited {
color:#666; text-decoration:none;}
.article a:hover { color:#666;
text-decoration:underline;}
.article a:active { color:#666;
text-decoration:none;}
.article은 작성한 글.
색상 변화 없이(#666) 마우스가 위에 왔을 때(hover)인 경우만 underline이 표시되게
되어 있음.
이것을 아래와 같이 수정.
.article
a:link { border-bottom: #ef5612 1px dotted;}
.article a:visited {
border-bottom: #ef5612 1px dotted;}
.article a:hover { background:
#f7ab8a; border-bottom: none}
.article a:active { border-bottom: #ef5612
1px dotted;}
작성한 글의 색상이 여러가지 이므로, 원래 색상은 그대로 둠. (color 항목 삭제)
평상시에는 #ef5612 색의 1px 굵기
dotted 선을 아래에 표시하고, (border-bottom: #ef5612 1px dotted)
마우스가 위에 오면 글자 배경색을
바꾸면서 밑줄은 숨김. (본문 a:hover에 underline이 있으므로)
참로고, #ef5612는 Tistory logo 앞쪽의
풍선 색상 , 이 것의 한단계 연한 색상이 #f7ab8a.
점선 굵기를 안주거나, thin으로 주면 줄이 굵어 보임.
혹시
점선이 나타났다 말았다 하면, !important 명령을 주어 우선순위(priority)를
조정하면 됨.
(outsider님이 작성한 CSS 적용 우선순위 참조.)
autolink.js
