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

티스토리에 블로그 둥지를 틀고 블로깅을 하다 보면 티스토리 특성상 스킨변경이나 포스트디자인에 관심들이 많습니다. 스킨은 포스트제목에서 링크, 글자색, 댓글표시방식, 각종 버튼들이 세트화되어 한꺼번에 바뀌어버리는 특징이 있습니다. 만약에 스킨중 제목색이라든지 댓글색등 일부만 변경하길 원한다면 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. 다른 사이트나 다른 포스트등 인터넷의 다른페이지로 연결시키는 것. [본문으로]

댓글을 달아 주세요

댓글창에 배경그림 넣는방법

  1. BlogIcon 라이너스™ 2008.10.21 10:38 신고  댓글주소  수정/삭제  댓글쓰기

    좋은 팁입니다^^
    아는것과 정리하고 깔끔하게 글을 써내는것과는
    또다른 차이가있는데... 많은 분들에게 큰 도움이 될듯.
    잘보고갑니다^^

  2. BlogIcon 오백이 2008.10.21 23:19 신고  댓글주소  수정/삭제  댓글쓰기

    어렵네요 +_+;;

  3. BlogIcon 드자이너김군 2008.10.22 09:46 신고  댓글주소  수정/삭제  댓글쓰기

    오호 손대고 싶지 않은 CSS ㅋ^^;;
    가끔은 블로그를 엄청 멋지게 만들고 싶은 생각도 들지만...
    생각만 입니다.. 생각만.. ㅎㅎㅎ

    • BlogIcon Kay~ 2008.10.22 13:15 신고  댓글주소  수정/삭제

      하하.. 그래도 이제는 알아야 할 내용인것 같아요.
      저희 회사는 2007년도에 테이블없이 홈페이지를 만들어서
      안 배울래도 안 배울수가 없었어요. ㅋㅋ

  4. BlogIcon 양떼구름 2008.10.28 11:52 신고  댓글주소  수정/삭제  댓글쓰기

    와, 검색해서 정보 얻어갑니다.
    필요한 소스였어요
    감사합니다 :D

    • BlogIcon Kay~ 2008.10.28 13:04 신고  댓글주소  수정/삭제

      나에겐 이미 정보가 아닌것들도
      때론 다른 사람에게 유용한 정보가 될 수 있다는 것을 느끼게 되는군요. ^^

  5. BlogIcon ICARUS-G 2008.11.20 18:44 신고  댓글주소  수정/삭제  댓글쓰기

    저도 바꿔봤습니다만 바뀌지 않는군요.. 혹시나싶어 [## _notice_rep_desc_ ##] 를

    [## _article_rep_desc_ ##] 바꿨더니 색상은 바뀌는데 공지글을 누르면 [## _article_rep_desc_ ##]

    이라고만 뜨고 공지글이 나오지 않네요..ㅜㅜ 어떻게 해야하나요..

    ps그래서 다른 스킨으로 바꾸고 하려 했습니다만 거긴 article 관련 태그조차 없었습니다..

    • BlogIcon Kay~ 2008.11.20 22:22 신고  댓글주소  수정/삭제

      ICARUS-G님이 사용하는 스킨이 BASIC 2008 스킨이 아닌가요?
      그리고 article a:link { color:#4E73E4에서 color값을 바꾼게 맞나요?
      다른곳은 바꾸면 안됩니다.
      제가 basic 2008 스킨에서 바꿔보니 잘 바뀌네요!

    • BlogIcon ICARUS-G 2008.11.21 10:08 신고  댓글주소  수정/삭제

      색상값만 바꾸면 되는거였습니까..

  6. 2008.12.01 10:49  댓글주소  수정/삭제  댓글쓰기

    비밀댓글입니다

    • BlogIcon Kay~ 2008.12.01 13:05 신고  댓글주소  수정/삭제

      article_rep_desc를 둘러싸고 있는 태그에 들어간 속성이 article 이 맞나요?
      맞다면 아래부분의 색을 바꾸시면 됩니다..
      .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;}

      스킨에 따라서 그 명칭을 티스토리 표준 css이름을 따르지 않는 스킨도 있더라고요.
      만약에 윗 부분이 없다면 다른 이름이나 다른 곳에서 정의했겠지만
      위 4줄을 직접 삽입해주셔도 됩니다.
      그래도 안되는 경우 다시 스킨이름을 알려주시면 제가 확인해보겠습니다.

    • 2008.12.01 16:50  댓글주소  수정/삭제

      비밀댓글입니다

    • BlogIcon Kay~ 2008.12.02 00:03 신고  댓글주소  수정/삭제

      무빙박스(브라운)을 확인해보니 article을 article_post로 사용을 했더군요.
      그리고 article_post A에 대한 속성이 따로 정의되어 있지 않아서
      추가로 정의해줘야 합니다.

      .article_post h3,
      .article_post h4,
      .article_post h5,
      .article_post h6 {padding:10px 0; line-height:1.1em;} <--요 부분 아래에
      아래 내용을 추가해주시고요.
      color(#4E73E4 부분)만 원하는 색으로 변경해주시면 링크색이 바뀔것입니다.

      .article_post a:link { color:#4E73E4; text-decoration:none;}
      .article_post a:visited { color:#4E73E4; text-decoration:none;}
      .article_post a:hover { color:#4E73E4; text-decoration:underline;}
      .article_post a:active { color:#4E73E4; text-decoration:none;}

      그럼 성공하시길 바랄께요! ^^

    • BlogIcon 낚시의시간***** 2008.12.02 00:10 신고  댓글주소  수정/삭제

      밤이 늦었는데 제 질문 답변하시느라 고생 많으셨네요.
      바로 답변을 드리는 것 같아서 기분 좋습니다..^^

      좋은 밤 되시고, 꼭 성공하고 싶은걸요...^^;
      감사합니다. Kay님!!!

    • BlogIcon Kay~ 2008.12.02 00:23 신고  댓글주소  수정/삭제

      하하..답변이 늦은것 같아서 자기전에라도 들려야할것 같아서 드렸는데
      이 시간까지 안주무시다니.. ㅎㅎ
      좋은 꿈 꾸세요!

    • BlogIcon 낚시의시간***** 2008.12.02 09:05 신고  댓글주소  수정/삭제

      그런데 Kay님 말씀하신대로 했는데..ㅜ.ㅜ

      뭐가 문제일까요? ㅡ.ㅡ;;

      잠은 좀 더 늦게 자거든요..ㅎㅎ

    • BlogIcon Kay~ 2008.12.02 09:08 신고  댓글주소  수정/삭제

      음. 그래요? 제가 테스트를 해보고 말씀드린것인데..
      이상하네요! 그래도 안된다면..
      skin.html하고 style.css를 봐야 알것 같은데요. ㅎㅎ

    • BlogIcon 낚시의시간***** 2008.12.02 18:41 신고  댓글주소  수정/삭제

      아 그럼 KAY님 메일 주소를 알려주시면 제가

      텍스트 파일로 메일을 보내드려도 될까요?

      번거롭게 해서 죄송합니다. ㅜ.ㅜ

  7. BlogIcon 제노모프 2009.01.07 12:51 신고  댓글주소  수정/삭제  댓글쓰기

    본문 링크 색상을 바꾸는 방법을 도무지 몰랐는데 이 포스팅 덕분에 쉽게 바꿀 수 있었습니다. html이나 css를 좀 공부해봐야겠어요. 모르니 참 답답하네요. 좋은 정보 고맙습니다.^^

  8. BlogIcon 아디오스(adios) 2009.01.10 19:17 신고  댓글주소  수정/삭제  댓글쓰기

    저도 색상 변경했습니다.. ^^

  9. BlogIcon 안녕나야 2009.02.02 03:16 신고  댓글주소  수정/삭제  댓글쓰기

    감사합니다~!!!!!!!!!!!!!!!! 저도 무사히 링크 색상 바꿨어요^^*

  10. BlogIcon 세이규 2009.04.17 09:49 신고  댓글주소  수정/삭제  댓글쓰기

    항상 좋은 정보 보고 갑니다. 대박나세요~
    포스팅 글 적을 때, 링크걸고자 하는 곳에 메뉴중에 링크걸기(ctrl+u)로 링크를 잡아주잖아요. 거기서 링크를 잡아주면 최초 보여지는 기본값이 ff8400에 언더라인으로 하고 싶은거거든요. 실제 등록된 글에서는 마우스 오버시 ff8400으로 잘 적용이 되는데요. 포스팅할때 관리자에서 강제로 색상변경하고 밑줄을 설정하면 색상은 변경되는데 밑줄은 포스팅 후에 안 잡히더라구요. 강제로 하게 되면 무지개링크도 깨지구요.
    그리고 하단에 삽입한 이미지에는 링크를 걸수 없나요?
    주소는 : http://echristian.tistory.com/ 입니다.

    • BlogIcon Kay~ 2009.06.25 21:55 신고  댓글주소  수정/삭제

      허거덩.. 지금쯤은 모두 해결이 되었지요? ^^
      처음 시작할때는 해야할일들이 왜이리 많고 배워야할일들이 왜 그렇게 많은지.. ㅎㅎ

  11. BlogIcon 아디오스(adios) 2009.06.25 21:40 신고  댓글주소  수정/삭제  댓글쓰기

    ㅋㅋ 링크색 바꾸기 검색하니 케이님 글이 젤 잘 나와있네요 ^^

  12. 2009.09.08 11:55  댓글주소  수정/삭제  댓글쓰기

    비밀댓글입니다

  13. BlogIcon 키르케♪ 2009.09.09 11:53 신고  댓글주소  수정/삭제  댓글쓰기

    어머어머! 나 어떻해요!
    또 성공했어요. 너무 신기합니다.
    호호홋, 정말 카이님 덕분에 신나요.♪

    • BlogIcon Kay~ 2009.09.09 13:21  댓글주소  수정/삭제

      성공하셨군요!
      위 질문에 답도 못해드렸는데.. ^^
      그런데 블로그에 가보니 아무 내용도 없네요! ^^

  14. BlogIcon haveone 2010.04.25 09:07 신고  댓글주소  수정/삭제  댓글쓰기

    감사합니다~ 제 CSS는 좀 달라서 이리저리 헤매다가 겨우 성공했네요.ㅎ

    • BlogIcon Kay~ 2010.04.25 20:16 신고  댓글주소  수정/삭제

      아 그러시군요! ^^
      맞어요.. 스킨에 따라서 약간씩 틀리더라고요~~^^
      표준방식을 이용하면 좋은데 그렇지 않은경우에는 조금 난감한 경우들이 있는것 같아요!

  15. BlogIcon 애니메이션 2010.06.28 21:31 신고  댓글주소  수정/삭제  댓글쓰기

    무지개 색으로 바꾸는건
    무슨 폰트 져 ?

  16. BlogIcon 싱긋^ 2010.12.08 18:36 신고  댓글주소  수정/삭제  댓글쓰기

    안녕하세요. 초보 블로거라 이것저것 검색하다 찾아와서 배우고 갑니다.
    그런데 제가 사용하는 스킨에는 위의 갈색 부분 소스가 없어서
    추가해야 할 것 같은데, 어느 위치에다가 추가해야 하는건지 도통 감이 안와요 ㅠㅠ
    도와주세요... ㅠㅠㅠ

    • BlogIcon Kay~ 2014.02.14 20:18 신고  댓글주소  수정/삭제

      소스가 없으면 아무곳에서 추가해도 되지만..
      다른 이름으로 되어 있을지 모릅니다.
      다른이름으로 되어 있는경우 추가해도 소용이 없어서
      html 소스를 들여다 봐야 합니다.

  17. BlogIcon 동식 2012.02.26 14:59 신고  댓글주소  수정/삭제  댓글쓰기

    말씀해주신대로 하니까 쉽게 되네요. 좋은 팁 감사합니다~

  18. 2012.05.23 17:37  댓글주소  수정/삭제  댓글쓰기

    안녕하세요^^ 좋은내용 감솨합니다^^ 하나 물어봐도 되요?

    혹시 티스토리 "비밀댓글 글자색"변경은 어떻게 하나요?

  19. BlogIcon 릴리야 2014.01.20 23:56 신고  댓글주소  수정/삭제  댓글쓰기

    처음엔 어떻게든 대강대강만 바꿔보려고 했는데, 그게 더 시간이 오래걸리더라구요ㅠㅠ
    사람마다 다 방법이 달라서 간단한 색깔 하나 바꾸는데도 몇시간을 뒤져야 간신히 알고요..
    여기 와서 글 읽으면서 차근차근 하다보니 금방 문제가 뭔지 알게 됐어요
    감사합니다!! 종종 와서 공부해야겠어요