hELLO 스킨 4.9.0 버전 기준으로 작성된 글입니다.
기본 디자인에서는 하이퍼링크가 파란색이 아닌 붉은색으로 나옵니다.
또한 밑줄이 없어서 이게 하이퍼링크임을 인지하기 어렵습니다.
하이퍼링크 색을 파란색으로 바꾸고 자동으로 밑줄이 적용되도록 수정해보겠습니다.
#tt-body-page #article .contents_style p a,
#tt-body-page #article .contents_style ol[data-ke-list-type] a,
#tt-body-page #article .contents_style ul[data-ke-list-type] a,
#tt-body-page #article .contents_style table[data-ke-align] a,
#tt-body-page #article .contents_style blockquote[data-ke-style=style2] a,
#tt-body-page #article .contents_style blockquote[data-ke-style=style3] a {
display: inline-block;
--tw-text-opacity: 1;
color: rgb(255 85 68 / var(--tw-text-opacity))
}
.dark #tt-body-page #article .contents_style p a,
.dark #tt-body-page #article .contents_style ol[data-ke-list-type] a,
.dark #tt-body-page #article .contents_style ul[data-ke-list-type] a,
.dark #tt-body-page #article .contents_style table[data-ke-align] a,
.dark #tt-body-page #article .contents_style blockquote[data-ke-style=style2] a,
.dark #tt-body-page #article .contents_style blockquote[data-ke-style=style3] a {
--tw-text-opacity: 1;
color: rgb(93 176 215 / var(--tw-text-opacity))
}
티스토리 스킨 편집창 CSS에서 위와 같은 부분을 찾으시면 됩니다.
윗 부분은 일반 모드에서의 하이퍼링크 설정,
아래의 .dark 가 붙어있는 부분은 다크 모드에서의 하이퍼링크 설정입니다.
이를 아래와 같이 바꿔줍니다.
#tt-body-page #article .contents_style p a,
#tt-body-page #article .contents_style ol[data-ke-list-type] a,
#tt-body-page #article .contents_style ul[data-ke-list-type] a,
#tt-body-page #article .contents_style table[data-ke-align] a,
#tt-body-page #article .contents_style blockquote[data-ke-style=style2] a,
#tt-body-page #article .contents_style blockquote[data-ke-style=style3] a {
display: inline-block;
--tw-text-opacity: 1;
text-decoration: underline;
color: rgb(68 85 255 / var(--tw-text-opacity))
}
.dark #tt-body-page #article .contents_style p a,
.dark #tt-body-page #article .contents_style ol[data-ke-list-type] a,
.dark #tt-body-page #article .contents_style ul[data-ke-list-type] a,
.dark #tt-body-page #article .contents_style table[data-ke-align] a,
.dark #tt-body-page #article .contents_style blockquote[data-ke-style=style2] a,
.dark #tt-body-page #article .contents_style blockquote[data-ke-style=style3] a {
--tw-text-opacity: 1;
text-decoration: underline;
color: rgb(93 176 215 / var(--tw-text-opacity))
}
일반 모드에서의 rgb값을 파란색으로 변경해주었고,
일반 모드와 다크 모드 양쪽 모두에 underline 속성을 추가하여 밑줄 속성을 넣었습니다.
하이퍼링크에 밑줄이 생기고 일반 모드에서의 색깔도 파란색으로 정상적으로 수정되었음을 확인할 수 있습니다.