티스토리 본문 링크 부분 형광펜 밑줄 효과

티스토리 본문 링크 부분 형광펜 밑줄 효과

 

티스토리 본문 링크 부분 형광펜 밑줄 효과

 

지금 이 하루일기 블로그에는 어포스트님의  티스토리 스킨 117 - 반응형 2단 심플리트 3 스킨이 적용되어 있습니다. 정말 깔끔하고 매력적인 스킨이지만, 아쉬운 점이 2가지 있습니다.

 

하나는 멀쩡하던 모바일 화면이 애드센스 코드만 넣으면 이상하게 말썽이 나는 점입니다. 다른 분들은 어떤지 모르겠습니다만, 저는 그랬습니다. 그래서 현재 티스토리 모바일 웹을 쓰고 있습니다. 무척 아쉽습니다. 

 

다른 하나는 하이퍼링크로 연결된 부분이 다른 텍스트와 다른 점이 없어 얼른 구별하기 어렵다는 것이었습니다.

 

임시방편으로 무지개 링크 플러그인을 적용해봤습니다만, 마우스를 옮기지 않고 그냥 봐서는 알 수 없었죠.

 

텍스트 색깔을 파랑으로 바꿔도 봤습니다. 하지만 너무 두드러져 보였습니다. 다른 글씨와 같은 색으로 하되, 형광펜으로 밑줄 친 효과를 주면 좋겠다는 생각이 들었습니다. Seapy님의 글을 읽고, 밑줄 두께와 색깔만 변형시켜 적용해 보았습니다.  

 

1. 관리자 홈 > 꾸미기 > 스킨 편집 > html 편집 > CSS

 

• CSS에서 '.entry-content a'를 찾습니다.
• 중괄호 {  } 안을 아래처럼 바꿨습니다.
• #b0e0e6 은 html 컬러코드입니다. 마음에 드는 색으로 바꾸면 됩니다. 
• 밑줄을 좀 더 굵게 하려면 'box-shadow:insert 0 -2px 0'의 2를 좀 더 큰 숫자로 바꾸면 됩니다. 
• '적용' 단추를 눌러 저장하는 것을 잊지 마세요.

.entry-content a {
	border-bottom: 1px solid #b0e0e6;
  box-shadow: inset 0 -2px 0 #b0e0e6;
  color: inherit;
  text-decoration: none;
}

 

2. 마음에 드는 색상 찾기

 

html 컬러 팔레트에서 마음에 드는 색을 찾아도, 실제 블로그에 적용하고 나면 또 다른 색처럼 보일 때가 있습니다. 폰트에 적용된 컬러 표를 보면 훨씬 수월합니다. 저는 공대누나님의 글을 참고했습니다. 제가 사용한 빛깔의 이름은 가루파랑이라고 합니다. 아무래도 두께가 있으니 똑같은 색이라도 폰트보다 밑줄 색이 더 진해 보입니다. 

 

같은 값이면 다홍치마, 보기 좋은 떡이 먹기도 좋다고 합니다. 과하지 않은 적당한 효과는 글을 읽고 정보를 얻는데 도움이 됩니다. 자기 블로그를 보기 좋게 정리하는 것은 내가 사는 집을 청소하고 단장하는 것처럼 기분 좋은 성취감을 느끼게 합니다. 

 

▶함께 읽으면 좋은 글

티스토리 반응형 스킨 제목 및 본문 폰트 크기 바꾸기

티스토리 스킨 반응형2단 심플리트3 제목 및 본문 폰트 크기 바꾸기