티스토리 엠원스킨 본문 a 태그 글자색 밑줄 효과 주기

티스토리에 엠원스킨을 적용하면 본문의 링크 텍스트가 그냥 검은색으로 나오기 때문에 클릭을 유도하는 효과를 주기 어렵다는 생각을 했습니다.

 

그래서 좀더 시각적으로 잘 보이도록 하기 위해서 3가지 기능을 추가했는데요~

1. 밑줄

 

2. 글자색

 

3. 무지개 플러그인

 

무지개 플러그인은 링크에 올리면 무지개 색깔로 글자색이 바뀌게 됩니다. 

 

티스토리 엠원스킨 본문 a 태그 글자색 밑줄 효과 주기

 

효과는 아래와 같습니다.

 

 

혹시 저처럼 엠원스킨을 사용하시면서 이 부분을 고치고 싶어셨다면 아래 코드를 css 가장 하단에 넣어 주시면 됩니다.

 

스킨편집 > html 편집 > css 선택 > 가장 하단에 코드 추가

 

a:link { 
	background-image: linear-gradient(rgba(0, 195, 6, 0.2) 100%, transparent 0);
	background-position: 0 0.85em;
	background-repeat: repeat-x;
	background-size: 1px 0.5em;
}

.post a {
    color: #008ae8;
}

 

첫번째 a:link { }는 티스토리 전체의 a 태그에 백그라운드 컬러를 일부 적용하여 밑줄처럼 적용한 것입니다. 

 

아래 링크의 티스토리 포스팅을 적용하였습니다.

[CSS] A태그를 스타일링하는 네 가지 방법.

두번째 .post a { }는 본문 내의 a 태그에만 글자색을 파란색 계열로 적용한 것입니다.

 

깔끔하니 보기 좋습니다. 

 

한번 해보세요~