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

    블로그 / / 2020. 5. 7. 21:37

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

     

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

     

    지금 이 하루일기 블로그에는 어포스트님의  티스토리 스킨 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 제목 및 본문 폰트 크기 바꾸기

    티스토리 스킨 반응형 2단 심플리트3 제목 및 본문 폰트 크기 바꾸기 현재(2020.5.4.) 하루일기 블로그에는 어포스트님의 반응형 2단 심플리트3 스킨이 적용되어 있습니다. 본문 크기가 상당히 작아 시력이 그다..

    fruitfulife.tistory.com

    • 네이버 블러그 공유하기
    • 네이버 밴드에 공유하기
    • 페이스북 공유하기
    • 카카오스토리 공유하기

    댓글을 달아 주세요

    ">
    1. thumbnail
      BlogIcon sword

      헙 신기한 기능이네요
      밑줄이 굵으니까 확실히 잘보여요
      이렇게 코드 관리 잘하시는 분들 보면 부럽습니다 ㄷㄷㄷㄷㄷ

      • thumbnail
        BlogIcon 열매맺는나무
        2020.05.08 13:50 신고

        원래는 링크된 부분도 까만색 글씨어서 구분이 되지 않았습니다. 파란 글씨로 바꿔도 봤지만, 갑자기 글씨 색이 바뀌니 그것도 자연스럽지 못하더군요.
        요즘 언론 미디어 기사글을 보면 이렇게 밑줄 긋는 것이 눈에 띄길래 한번 시도해 봤습니다.
        사실 저는 코드 하나도 몰라요. 적어 놓지 않으면 다음번에 하는 방법 잊어버렸을 때 또 찾아다녀야 하니까요. 다른 분들과 공유도 할겸 정리해 둡니다. ^^

    2. thumbnail
      BlogIcon 워드프레스, 웹호스팅 정보를 제공하는 블로그 Avada

      좋은 정보 감사합니다.

      텍스트의 절반 높이만 형광펜으로 표시하는 것도 가능하네요.

      https://jsfiddle.net/5v709k2p/

    3. thumbnail
      BlogIcon 워드프레스, 웹호스팅 정보를 제공하는 블로그 Avada

      좋은 정보 감사합니다.

      이 방법은 테두리를 사용하네요.

      텍스트의 절반 높이만 형광펜으로 표시하는 것도 가능한 것 같습니다.

    4. thumbnail
      Avada
      2020.05.09 06:34

      텍스트의 절반만 형광펜 효과 주는 방법에 대한 글을 하나 제 블로그에 올렸습니다.

      (제 티스토리 계정으로 댓글을 다니 오류가 발생하네요.)

      • thumbnail
        BlogIcon 열매맺는나무
        2020.05.09 10:50 신고

        티스토리의 그 고절적인 스팸필터 오류였을까요? 몇몇 분들이 아직도 댓글 달기 어려워하셔서 고민이에요.
        휴지통에 있는 댓글은 복원했습니다.