미넴스킨 본문 링크 스타일 변경하는 방법(+ css 코드 변경 Tip)

 

미넴스킨 최신 2.7.3 버전 다운받으러가기

 

 

미넴스킨을 아주 잘 사용하고 있습니다. 지금 블로그도 미넴스킨을 이용하고 있죠. 상당히 강력하게 만들어졌으면서도 무료로 미넴스킨 배포해 주신 '미리 알았다면 좋았을 텐데' 블로그의 주인장분 감사합니다. 그런데 제가 만든 스킨이 아니라 다른 분께서 만든 스킨을 제 블로그에 적용하려니 편리하지만, 조금씩 변경하고 싶은 부분들이 발견되었습니다.

 

그중 하나로 본문의 하이퍼링크 색상이 문제였습니다. 기존 미넴 스킨의 '그 외 요소 색'에서 지정해 둔 색상에 맞춰 본문의 링크 색상이 달라졌습니다. 하지만 이 경우 처음 방문한 사용자 입장에서는 해당 본문이 링크인지, 아닌지 파악하기 불편합니다.

 

그래서 링크를 수정해줘야 하는 과정을 거쳐야 합니다. 하지만 미넴 스킨의 경우 스킨 편집에서 '그 외 요소 색'을 통해 링크의 색상이 변경될 수 있도록 코드가 구성되어 있습니다. 그래서 html에서 연결되는 해당 코드를 삭제해 줘야 합니다.

 

html을 수정하는 과정이다 보니, 혹시나 실수로 다른 코드를 삭제하여, 복구하기 어려운 문제가 발생할 수도 있습니다. 그러니 되도록이면 미리 현재 사용 중인 스킨을 보관하셔서 백업해 두시길 바랍니다.

 

HTML에서 본문 링크 코드 삭제하기

1. 블로그 관리 접속
2. 스킨 편집 클릭
3. html 편집 클릭
4. etc-color 검색

etc-color를 검색하시면 <s_if_var_etc_color> 코드를 발견할 수 있습니다. 해당 코드를 통해서 색상 변경이 되게 되는데요. 이 코드 안에서 링크코드를 찾아 삭제해 주면 됩니다.

 

.content-article a,

.content-article a, 를 삭제해시면 됩니다. 쉼표(,)도 잊지 말고 삭제해서 문법을 맞춰주세요. 하지만 이 과정이 전부가 아닙니다. 다크모드에서의 연결 또한 삭제해 줘야 하기 때문이에요.

 

body.dark-mode .content-article a,

bodt.dark-mode .content-article a, 를 검색해서 삭제해 주시면 됩니다. 쉼표(,)도 잊지 말고 삭제해서 문법을 맞춰주세요.

 

 

CSS에서 링크 코드 입력하기

 

미넴스킨_링크_CSS 코드.txt

위의 링크를 통해서 링크 CSS 코드를 복사하셔서 CSS에 붙여 넣기 하시면 됩니다. 저 같은 경우, 아래와 같은 스타일을 사용하고 있어요. 다르게 스타일을 사용하시려면 아래를 참고해 주세요.

 

 

• color: #62a5fd; : 링크의 색상에 대한 코드입니다.
• font-weight: bold; : 링크의 글자 굵기에 대한 코드입니다. '굵게'로 되어 있어요.
• text-decoration: underline; 링크 아래 밑줄을 추가해 주는 코드입니다.
• text-decoration-style: wavy; 링크 아래 밑줄의 스타일에 대한 코드입니다. 저는 wavy로 했어요.

 

• .tt_article_useless_p_margin a:hover{ : 마우스를 올리면 변경될 효과에 대한 코드입니다.

이제 봤는데 hover 코드 아래에 font-weight: bold; 는 굳이 적을 필요가 없었는데 적었었네요. 필요 없는 코드이니 삭제해 주셔도 돼요.

 

 

아래 이미지가 마우스를 링크에 호버링 전, 호버링 후 이미지입니다. 참고하셔서 자신이 원하는 스타일로 링크를 만드시길 바랍니다.

 

 

마치며

천천히 티스토리 블로그를 가꾸어 가고 있지만, 무료로 스킨을 제작하셔서 무료로 배포하시는 분들은 정말 존경스럽습니다. 티스토리 블로그를 하기 위해서는 어느 정도 코드 문법에 대해 알아가야 하는데, 공부하면서 알아가는 것들을 저의 블로그를 통해 공유하도록 하겠습니다. 혹시나 잘 안되거나, 질문이 있으신 분들은 댓글을 달아주시면 답변해 드리겠습니다.