티스토리 커서 모양 바꾸기

 

친구가 티스토리 커서를 바꾸다가 이벤트가 발생했을 때 기본 포인터 모양으로 돌아오는 걸 보고

해결 방법을 찾다가 하는 김에 내 티스토리 블로그도 커서를 바꾸게 됐다ㅎ

적용된 커서

 

사실 티스토리 스킨 css수정만 하면 되는거라 이걸 프론트엔드 분류에 넣어도 되나 싶긴한데...

일단 적고싶어서 적어보는 티스토리 커서 이미지 바꾸기

 

---

 

# 커서 이미지 그리기

커서 이미지는 다른 곳에서 따와도 되지만 아래 링크에서 직접 그렸다.

 

https://www.cursor.cc/

Cursor Editor

 

패럿을 좋아해서 나름 패럿으로 그렸다.

그려본 커서 이미지 좌 기본 우 이벤트 발생 

cursor_point.cur

0.00MB

cursor.cur

0.00MB

 

 

# 티스토리 스킨 편집 파일 업로드 및 css 수정

'관리-스킨편집 - html편집'으로 들어가서 우선 위에서 만든 두 파일을 업로드했다

 

 

그리고 아래 코드만 표시하고 싶은 영역에 추가해주면 된다.

나같은 경우 평상시 커서는 'image/cursor.cur'

이벤트 발생시 커서는 'image/cursor_point.cur'로 지정했다

/* 이런 식으로 
cursor:url('파일 경로 및 이름'), auto !important; 
*/

cursor:url('images/cursor.cur'), auto !important; /* 기본 커서 */
cursor:url('images/cursor_point.cur'), auto !important; /* 이벤트 발생 시 커서 */

 

친구는 html, body 파트에만 해당 코드를 넣어서

이미지에 마우스를 올리는 등의 이벤트가 발생할 때 기본 커서로 표시되는 거였다.

 

이게 제일 기본이긴 함

 

cursor: default로 지정되어 있는 부분에 알맞는 커서 이미지 넣어주고 

기본 설정이 없더라도 a태그나 button이나 hover 같은 이벤트 발생 부분에는 cursor_poiont 이미지로 따로 지정해줬다.

 

 

적용까지 하면 블로그 커서 바꾸기 끝.