어제 SNS 공유 버튼을 변경하려고 HTML/CSS -> 파일 업로드에 이미지를 업로드하다 익숙한 모습의 아이콘을 보았습니다. 비로그인 손님이 방명록이나 댓글을 남겼을 때 보여지는 아이콘. Readiz 님께서 스킨 제작하실 때 다양한 사람들이 사용할 수 있도록 무난하면서도 편안한 아이콘으로 제작하신 거 같습니다. 저도 좋아하고요. 그런데 저 아이콘을 HTML/CSS에서 보고 혹시 동일한 파일명으로 이미지를 덮어씌우면 다른 아이콘으로 변경이 가능한가? 싶어 파일명을 같게해 다른 아이콘을 업로드해보았는데 아무 변화 없이 그대로였습니다....
▲ user.png
그래서 혹시 몰라 HTML/CSS -> HTML에서 "user.png"를 검색해보았는데 4개의 검색 값이 나타났습니다.
1번째 - 방명록 글 아이콘
2번째 - 방명록 글의 답글
3번째 - 포스트 댓글 아이콘
4번째 - 포스트 댓글의 댓글(답글?) 아이콘
인거 같아, 제 블로그에 다른 아이콘 파일을 올려 테스트해보았는데 맞는 거 같습니다.
이제 어느 부분을 변경하면 되는지 알았으니 사용할 다른 아이콘을 준비합니다.
▲ 무료 아이콘 사이트
사용할 아이콘을 직접 만들거나 또는 무료 아이콘 사이트에서 받아 사용하시면 될 거 같습니다. 4곳을 전부 각각 바꾸고 싶으시면 4개를 준비하시면 되고. 저는 1번째, 3번째 즉 댓글용 1개 / 2번째, 4번째 대댓글용 1개. 총 2개를 준비하여 적용하였습니다.
참고로 무료 아이콘 사이트에서 받으실 때 파일 포맷은 PNG 로 받으세요.
▲ 파일명은 자신이 알아볼 수 있도록 쉽게
아이콘 준비가 완료되었으면 HTML/CSS -> 파일 업로드에 아이콘 업로드 후 저장 -> 이미지 주소 복사 (메모장에 저장해 놓으세요)
HTML/CSS -> HTML에 다시 들어가 "user.png"를 검색 후 'http://cfs.tistory.com/custom/blog/161/1613108/skin/images/user.png' 이 주소를 지우고 조금 전 복사한 주소를 대신 넣어줍니다. 만약 4개의 아이콘을 업로드 하셨으면 4개의 이미지 주소를 아래 4곳에 각각 넣으시면 됩니다.
1번째 - 방명록 글 아이콘
2번째 - 방명록 글의 답글
3번째 - 포스트 댓글 아이콘
4번째 - 포스트 댓글의 댓글(답글?) 아이콘
4곳 모두 이미지 주소를 새로 넣으셨으면 우측 상단 저장.
잘 적용되었는지 확인. 제 블로그에서만 테스트해본 거라 혹시 모르니 이미지 주소 교체 하기 전 스킨 백업을 먼저 해 두시길 바랍니다. 스킨 백업은 관리자 - 꾸미기 - 스킨 변경 - 상단 스킨 보관에서 하시면 됩니다.
마지막으로 저는 gif 움짤 파일도 가능한 건지 테스트하느라 gif 파일로 하였는데, 움짤은 아무래도 용량이 조금 크니 파일 용량은 너무 크지 않게 해서 하는 게 좋을 거 같습니다. 끝 :)
정보 & Tip/블로그 다른 글
블로그 인기 글블로그 최신 글