본문 바로가기

IT/Blog Tip

[티스토리] 본문의 링크 글자 색상 변경하기

반응형

티스토리의 본문에 있는 링크의 색이 글자 색상과 비슷해서 잘 보이지 않는 문제점이 있습니다.

물론 이 부분은 스킨에 따라서 달라질 수 있는 부분입니다.

링크의 글자 색상을 변경하기 위해 관리 페이지의 HTML/CCS 편집으로 이동합니다.

하단의 style.css가 보이는데 여기에 링크의 스타일을 수정하면 됩니다.

.article 을 style.css에서 찾으면 다음과 같은 부분을 확인할 수 있습니다.

코드에 보면 다음과 같은 부분이 보입니다.

.article a:link          { color:#666666;  text-decoration:none;}
.article a:visited       { color:#666666;  text-decoration:none;}
.article a:hover         { color:#666666;  text-decoration:underline;}
.article a:active        { color:#666666;  text-decoration:none;}

여기에 보이는 #666666 값은 짙은 회색으로 다음과 같은 색상입니다.

원하는 색상의 RGB 값을 가져와서 값을 변경하면 됩니다.

link는 방문되지 않은 링크를 표시하며, 일반적으로 파란색(0000FF)으로 표시됩니다.

visited는 방문했던 링크이며, 보통 보라색(800080)으로 표시되는 값입니다.

hover는 마우스 커서가 올라갔을 때 색상이며 active는 클릭될 때의 색상입니다.

원하는 색으로 변경하고 미리보기를 누르면 변경된 링크 색상을 볼 수 있습니다.

코드에서 보이는 것과 같이 text-decoration에 밑줄 등의 효과를 줄 수도 있습니다.

font-style을 통해서 이탤릭체(Italic) 등을 적용할 수도 있습니다.

다음과 같이 적용을 해보았습니다.

미리보기를 누르면 다음과 같이 정상적으로 출력되는 것을 확인할 수 있습니다.

원하는 형식으로 수정해서 사용하면 됩니다.

반응형