티스토리 블로그 타이틀 마우스오버 색상(색깔, 컬러) 변경하기 방법

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

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

▼ 티스토리 관리

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

▼ CSS 화면

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

첨부파일 : h3mouseover.txt

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

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

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

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

▼ 블로그 타이틀 화면

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

▼ 마우스를 갖다 댄 블로그 타이틀 화면

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

티스토리 블로그 CCL 설정하기 방법

티스토리 블로그 줄간격 변경 방법

티스토리 블로그 글목록 리스트 카테고리에 구글 애드센스 광고 달기 방법

티스토리 블로그 티에디션(T-edition) 설정하기 방법 fastboot스킨

티스토리 블로그 채팅창 달기(설정, 설치) 방법 2부 :: 채널 데스크 이용편

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

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

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