티스토리에 비밀댓글을 달면 보기 싫은 아바타 이미지가 표시되어 이미지를 교체하는 방법이 없을까 고민하다가 간단한 CSS 코드를 사용하여 바꾸어보았습니다.
티스토리의 비밀댓글 아이콘 바꾸기 (CSS로 이미지 교체하기)
방법은 CSS-TRICKS의 "Replace the Image in an <img> with CSS"라는 글의 코드를 사용했습니다.
.banner {
display: block;
-moz-box-sizing: border-box;
box-sizing: border-box;
background: url(http://notrealdomain2.com/newbanner.png) no-repeat;
width: 180px; /* Width of new image - 새 이미지의 폭 */
height: 236px; /* Height of new image - 새 이미지의 높이 */
padding-left: 180px; /* Equal to width of new image - 새 이미지의 너비와 동일하게 */
}
위의 코드를 조금 응용하면 되는데요. 저는 다음과 같은 코드를 사용했습니다.
img[src="https://t1.daumcdn.net/tistory_admin/blog/admin/profile_default_01.png"] {
display: block;
-moz-box-sizing: border-box;
box-sizing: border-box;
background: url(새로운 이미지 URL) no-repeat;
width: 80px; /* Width of new image */
height: 80px; /* Height of new image */
padding-left: 80px; /* Equal to width of new image */
}
적용 전과 적용 후의 모양을 살펴보면...
적용 전:
그림의 두 번째 아이콘의 경로가 https://t1.daumcdn.net/tistory_admin/blog/admin/profile_default_01.png입니다. 무슨 파충류 같기도 하고... 하여튼 별로 보기가 안 좋네요.
적용 후:
인터넷에서 무료 아이콘을 하나 다운로드하여 올려보았습니다. 확실히 나아보이네요.ㅎㅎ
스크립트를 사용하지 않고 간단히 CSS로 이미지를 교체하고 싶은 경우 이 방법을 사용해볼 수 있습니다.
이외에 자바스크립트나 jQuery를 사용하여 이미지를 교체할 수도 있습니다.
- Dynamically replace image source with jQuery (jQuery로 동적으로 이미지 소스 변경하기)
- With JavaScript: Detect an image src and replace it… (자바스크립트로 image src를 감지하여 바꾸기...)
- Replace image by javascript (자바스크립트로 이미지 교체하기)