hELLO 스킨 태그 색상
정상우 님이 무료로 배포하는 hELLO 스킨의 버전에 따라 커스텀하는 코드가 달라질 수 있습니다. 이 글에서 제공하는 CSS 코드는 hELLO 스킨 v4.9.0에 맞춰 작성된 것입니다. 따라서, 자신의 블로그에 적용하기 전에 사용 중인 버전에 맞게 적절히 수정하시기 바랍니다. 여러분의 블로그에 최적화된 디자인을 위해 필요한 수정 작업을 잊지 마세요.
태그 색상 커스텀
이번 hELLO 스킨 커스텀 CSS 부분은 기본적인 코드를 수정할 필요 없이 추가하기만 하면 됩니다. 기본 태그는 기본 폰트 색상에 마우스 호버 효과만 적용되어 있어, 다소 심심해 보일 수 있습니다. 마우스 호버 색상도 간단하게 처리되어 있어, 시각적으로 더욱 매력적으로 바꿀 수 있는 여지가 있습니다.
따라서, 이 글에서는 조금 더 돋보이게 만들 수 있는 방법을 소개하겠습니다. 추가할 CSS 코드를 통해 블로그의 디자인을 한층 업그레이드하고, 방문자들에게 더 나은 시각적 경험을 제공해 보세요.
.tags .cloud1 {
color: rgb(31, 102, 168);
}
.tags .cloud2 {
color: rgb(224, 142, 69);
}
.tags .cloud3 {
color: rgb(28, 125, 130);
}
.tags .cloud1:hover,
.tags .cloud2:hover,
.tags .cloud3:hover {
--tw-text-opacity: 1;
color: rgb(246 86 96 / var(--tw-text-opacity))
}
.dark .tags .cloud1 {
color: rgb(246, 86, 96);
}
.dark .tags .cloud2 {
color: rgb(255, 187, 100);
}
.dark .tags .cloud3 {
color: rgb(58, 152, 185);
}
.dark .tags .cloud1:hover,
.dark .tags .cloud2:hover,
.dark .tags .cloud3:hover {
--tw-text-opacity: 1;
color: rgb(255 187 100 / var(--tw-text-opacity))
}기본적으로 티스토리 태그는 작성된 태그의 비율에 따라 cloud1, cloud2, cloud3, cloud4, cloud5로 구분됩니다. 이 시스템을 활용하여 최상위 3개의 태그에는 특별한 색상을 부여하고, 나머지 태그는 기본 폰트 색상을 유지하도록 설정하였습니다.
또한, 마우스 호버 시에는 시각적으로 돋보일 수 있는 색상을 추가하여 사용자 경험을 향상했습니다. 이렇게 디자인된 태그는 방문자들에게 더욱 매력적으로 다가갈 수 있을 것입니다. 여러분의 블로그에서 태그의 시각적인 요소를 강화해 보세요.
태그 색상 커스텀 마무리
위 CSS 코드가 적용된 모습은 저의 블로그에서 확인하실 수 있습니다. 여러분의 블로그에 어울리는 색상으로 변경하거나 추가하여, 더욱 깔끔하고 돋보이는 디자인으로 커스텀해 보시기 바랍니다. 이렇게 자신만의 개성을 담은 블로그를 만들어, 방문자들에게 특별한 경험을 선사해 주세요! (티스토리 플러그인 '무지개링크'를 사용하시는 분들은 CSS코드 hover부분을 사용하지 않으셔도 됩니다.)
