티스토리 블로그 본문 링크에 예쁜 밑줄 효과 주는 방법

티스토리 블로그 본문 링크에 예쁜 밑줄 효과 주는 방법을 알려드리겠습니다. 이런 것까지 올리면 진짜 잡블로그가 되는 건데... 뭐 상관없어요. 한 분에게라도 도움이 된다면.. ^ㅅ^)/

 

티스토리 블로그 본문 글에 링크를 삽입하거나 텍스트에 링크를 걸었을 때, 이게 링크가 걸린 건지 티가 안 난다면 사람들이 링크인 줄도 모르겠죠. 링크를 타고 이동하지도 않을 거구요. 제 블로그로 링크인지 전혀 티가 안나서 검색을 좀 ㅎ봤더니 아래 블로그가 나왔습니다. 

 

https://muksteem.tistory.com/17

html/CSS 웹사이트 본문 링크밑줄 예쁘게 효과주기

 

문제는, 작성한지 3년이나 지나서인지, 안되는 거예요. 티스토리 CSS 관리자로 들어가도 해당 클래스(class)가 없더라구요. 그래서 업데이트해서 올려드립니다.

 

1. 티스토리 설정 > 꾸미기 메뉴 - 스킨편집 > html 편집 > CSS 탭 으로 들어갑니다.

2. Ctrl + F 누르셔서 .entry-content a 를 검색합니다. 제 기준으로 1440 행쯤에 있어서 개인별로, 스킨별로 다 다를 거예요.

3. 거기를 아래와 같이 수정해줍니다.

 

/* 게시물 본문 링크 스타일 */
.entry-content a {
	text-decoration:none;
	font-weight:bold;/*링크굵게*/
	border-bottom:3px solid rgba(69, 176, 248, 0.705); /*밑줄색깔*/
	box-shadow:inset 0 -4px 0 rgba(69, 176, 248, 0.705); /*그림자색깔*/
	color:#000000 !important;/*링크텍스트색깔*/
	overflow-wrap:break-word;
	word-wrap:break-word;
	word-break:break-word;
}
.entry-content a:hover {
	background:rgba(69, 176, 248, 0.705); /*마우스올렸을때색깔*/
}

 

색상코드 몰라도 아래 화면처럼 직접 고를 수 있어요. (색상영역에 마우스 올리면 나타납니다.)

 

 

4. '적용'을 눌러주세요.

 

그러면 이렇게 링크가 예뻐집니다. ^ㅅ^