티스토리 포스트내의 링크색 바꾸기

티스토리 포스트내의 링크색 바꾸기

티스토리에 블로그 둥지를 틀고 블로깅을 하다 보면 티스토리 특성상 스킨변경이나 포스트디자인에 관심들이 많습니다. 스킨은 포스트제목에서 링크, 글자색, 댓글표시방식, 각종 버튼들이 세트화되어 한꺼번에 바뀌어버리는 특징이 있습니다. 만약에 스킨중 제목색이라든지 댓글색등 일부만 변경하길 원한다면 skin.html이나 style.css를 수정해야만 합니다. 여기서는 style.css를 변경하는 방법을 설명합니다.

스타일시트(CSS)에 대해서 모르는 분은 읽어보세요! -> 스타일시트(CSS) 이해하기 for 티스토리

티스토리에는 여러종류의 링크가 있습니다. 제목링크, 카테고리 링크, 포스트내의 링크, 태그링크등 여러종류의 링크가 있는데 링크된 글자를 같은 색으로 할 수 있고 각기 다른 색으로 할 수도 있습니다. 오늘은 포스트내의 링크^[각주:1]색을 변경하는 방법에 대해서 포스팅을 할까 합니다.

링크색을 지정하는 스타일

링크에 대한 글자색이나 데코레이션등 각종 스타일을 지정하는 스타일 요소는 A(Anchor)입니다. A에 대한 속성은 아래와 같습니다.

a:link	링크가 설정된 문자 스타일
a:visited	한번 이상 방문한 링크 스타일
a:hover	마우스를 링크위에 올렸을 때의 링크스타일
a:active	링크를 클릭하는 순간 링크스타일

위와 같은 앵커태그(A태그)를 이용하여 포스트내의 링크나 카테고리 링크등에 대한 스타일을 지정할 수가 있습니다.

치환자를 찾는다.

지금 변경을 하려는 링크스타일(여기서는 링크글자색)은 포스트내에 있는 링크된 글자색이므로 skin.html에서 포스트의 내용을 담고 있는 치환자를 찾아야 합니다.  티스토리 관리자페이지의 "스킨-html/css 편집"을 클릭하여 skin.html에서 치환자를 찾습니다.

포스트 본문내용을 담고 있는 치환자는 [## _article_rep_desc_ ##] 입니다. (치환자는 공백없이 모두 붙여야 합니다.)

이제 마지막으로 [## _article_rep_desc_ ##] 치환자를 둘러싸고 있는 <div>나 <span> 태그를 확인해야 합니다.

<div class="article">          [## _article_rep_desc_ ##]  </div>

확인해보니 위의 노랑색 글자처럼 <div>태그 안에  article 스타일에 감싸져 있네요. 이런경우 포스트의 본문은 article 스타일(본문색, 링크색, 배경색등)의 적용을 받습니다. (글이 길어져서 나머지 스타일지정에 대한 가장 기본적인 부분에 대해서는 별도로 추가 설명을 해야 할것 같아 추가적인 설명은 추후에 하기로 하겠습니다.)

style.css 수정

이제 포스트 본문이 어떤 스타일의 영향을 받는지 알았으므로 해당 스타일이름을 찾아서 링크색(a:xxxx) 스타일을 지정하면 됩니다. style.css에서 article 스타일을 찾아보니 아래와 같습니다.

              ※ article에 지정된 스타일

.article                 {  width:620px ; font-size: 12px; color:#666666; overflow:hidden;} .article a:link          { color:#4E73E4;  text-decoration:none;} .article a:visited       { color:#4E73E4;  text-decoration:none;} .article a:hover         { color:#4E73E4;  text-decoration:underline;} .article a:active        { color:#4E73E4;  text-decoration:none;}

 style.css에서 위의 소스를 찾아서 갈색부분의 color 값을 변경하면 됩니다. 저는 color:#ccc 로 되어 있던 회색링크를 color:#4E73E4 로 변경하여 링크글자를 파란계열로 바꾸었습니다. 이제 원하는 색으로 변경을 한다음 저장을 하면 됩니다.

만약에 위 소스의 의 갈색부분이 없다면 위 소스처럼 추가하면 됩니다.
쉽게 설명한다고 하는데 왜이렇게 장황스럽게 설명이 되는지 모르겠습니다. 아무래도 이런 글을 읽을 사람을 생각하며 쓰다보니 장황하게 설명을 한것 같은데 머리만 어지럽히지 않았나 모르겠습니다.

관련글
2008/07/24 - [블로그팁] - RGB 색상코드표
2008/07/27 - [CSS for 티스토리] - 티스토리 사이드바 리스트 글자색 변경
2008/08/15 - [CSS for 티스토리] - 티스토리에서 글리스트 색 변경하기

1. 다른 사이트나 다른 포스트등 인터넷의 다른페이지로 연결시키는 것. [본문으로]