지난 포스팅에서는 티스토리 블로그 타이틀에 링크넣기 방법에 대해 알아보았습니다. 하지만, 링크 효과만 넣어주게 되면, 타이틀 색이 마음대로 하늘색으로 변하게 되는 현상이 발생합니다. 타이틀을 클릭했을 때 홈화면으로 링크가 되는 기능만 되면 색깔 따위는 아무래도 괜찮다는 분도 계시지만, 마우스를 갖다 대었을 때 하늘색으로 변하게 하지 않고, 내가 원하는 컬러로 바뀌도록 하고 싶으신 분들 또한 많으실 거라 생각합니다.

그래서 오늘은 블로그 타이틀 제목에 내가 원하는 색으로 마우스 오버가 될 수 있도록 하는 방법에 대해 알아보도록 하겠습니다.

▼ 티스토리 관리

이 작업도 소스 코드를 만져주어야 하는 작업을 필요로 합니다. 내 블로그 관리화면으로 들어간 후 꾸미기에서 HTML/CSS를 눌러서 CSS 코드를 수정해보도록 합시다.

▼ CSS 화면

주의하셔야 할 점은 타이틀에 링크를 넣는 작업은 HTML탭에서 할 수 있었다면, 타이틀 링크 마우스 오버효과를 주는 작업은 CSS 탭에서 가능하다는 점입니다. CSS를 클릭해준 후 마우스 스크롤을 가장 아래까지 내립니다. 그리고 마지막줄에 위 사진처럼 입력을 해줍니다. 일일이 타이핑 하는 것이 귀찮으시다면, 아래 첨부파일을 받으셔서 그 안에 있는 내용을 복사 붙여넣기 해주시면 됩니다.

첨부파일 : h3mouseover.txt

단 여기서 주의하셔야 할 점이 있다면, 제가 빨갛게 투명 효과를 넣은 부분입니다. 위쪽 빨간 부분은 평상시에 내 블로그 타이틀 글씨에 적용될 폰트 색상이고, 아래에 있는 빨간 부분은 마우스를 갖다 대었을 때 마우스 오버 효과가 나타나는 폰트 컬러라는 점입니다. 제가 적어드린대로 입력하셔도 상관은 없습니다만, 가급적 본인이 원하는 색상 코드를 넣어서 예쁘게 꾸며줄 수 있도록 하는 것이 바람직하겠습니다.

내가 원하는 색상코드를 잘 모르겠다 하시는 분들은 아래 글을 통해 글자색 코드를 찾는 방법에 대한 글을 참고해주시기 바랍니다.

※ 참고글 : HTML 색상표, 색상코드표, 컬러코드표 간단히 이용하기

모두 적용이 완료되셨다면, 오른쪽 위에 있는 저장을 누르고, 내 블로그를 확인해주시기 바랍니다. 마우스 커서를 갖다 대어보셔서 마우스오버 색상 변경 효과가 잘 적용이 되셨다면, 모든 것이 끝난 것입니다.

마우스를 갖다대지 않은 모습입니다.

마우스를 갖다대면 이렇게 내가 원하는 색으로 바뀌게 됩니다.

도움이 되셨다면 아래 하트 공감을 부탁해요!

공감 ♡하트와 댓글은 저에게 많은 힘과 도움이 됩니다.

더 알차고 좋은 정보로 보답하겠습니다.