티스토리 인용구 아이콘 이미지 바꾸기

예쁜 블로그 꾸기미! 오늘은 인용구의 어정쩡한 '큰따옴표' 아이콘을 다른 이미지로 바꿔 보겠습니다.

글쓰기 에디터에 들어가면 아래 이미지와 같이 인용구 아이콘을 보실 수 있습니다.

인용구 아이콘을 클릭하고 글을 쓰면 다음과 같이 점선의 네모 박스안에 글을 쓰게끔 돼어있죠.

이렇게 작성된 글은 최종적으로 다음과 같이 보여 집니다.

움...초라하기 그지 없는 큰! 따옴표! 에요..;;
인용문은 말그대로 다른 문구를 인용하여 쓰거나 내용정리, 강조할 문구 등에 쓰는,
어찌보면 글쓰기에서 매우 중요한 역할을 하고 있다고 해도 과언이 아닐것 입니다.

그런 중요한 역할을 하고 있는데 저런 빼짱말라 비틀어진 큰따옴표로 시선을 끌려고 하다니...
용서할 수 없어서 바꿔봤습니다.ㅡ,.ㅡ^

인용구 아이콘 바꾸기

1. 일단 사태를 파악하기 위하여 관리자모드로 들어가 스킨을 살펴봅니다.

style.css 에서 인용문을 검색하니 다음과 같이 정의 되어있군요. 이미지였어!!

큰따옴표가 텍스트가 아닌 이미지 임을 파악하고 해당 이미지를 찾습니다.... 저녀석이었군요!
"iconBlockquote.gif"
요 이름을 잘 기억해 둡니다. 메모장에 복사라도 해둡니다.

2. 새로운 인용구 아이콘 만들기

큰따옴표를 대체할 이미지를 만들어야겠죠?!
포토샵으로 간단하게 이미지를 만듭니다.
저는 50x50 사이즈의 물결 이미지를 만들었습니다.
이때 새로 만든 이미지의 이름을 메모장에 복사해둔 "iconBlockquote.gif"로 합니다.

이유는 나중에 소스 수정할때 이미지 이름 바꿀필요없이
기존 이미지는 삭제하고 새로만든 이미지만 올리면 되기 때문입니다.
어차피 파일이름은 똑같으니 이미지경로 소스 바꿀 필요없겠죠.

단, 파일이름을 다르게 하신분들은 나중에 style.css의 인용문 부분의 소스에서
background:url(images/새로만든 아이콘 이미지 파일이름)
이렇게 바꿔주셔야 합니다.

이렇게 기존의 큰따옴표 이미지를 삭제하고 새로만든 이미지를 업로드합니다.

3. 소스 수정하기

그리고 약간의 소스 수정을 해야합니다. 왜냐믄 이미지 사이즈가 바뀌었기 때문에,,,,,,
이미지 경로는 아까말씀드렸듯이 손댈필요없습니다.

소스 설명드리겠습니다.

먼저,

[기존] margin:5px; -------> [변경] margin-top:15px;     margin-left:100px;

기존의 margin은 상단, 왼쪽을 동시에 5px 띄우라는 말입니다.
이것을 상단과 왼쪽을 각각 다른 사이즈로 띄어쓸수 있게 수정하였습니다.

[기존] padding-left:16px; --------> [변경] padding-left:50px;     padding-top:30px;

이것은 인용문 텍스트를 기준으로 합니다. 인용문 아이콘과 텍스트의 거리를 말하는데요. 기존의 큰따옴표와 작성된 텍스트의 띄어쓰기 거리가 16px 이라는 말입니다.
이것을 왼쪽에서 50px 띄운 이유는 새로 만들어진 아이콘의 크기가 가로 50px 이기 때문입니다. 위에서부터 30px를 띄운이유도 새로 사이즈가 50px 이기 때문에 글자크기와 합쳐 인용구 공간의 높이를 늘려서 이미지를 잘리지 않게 나타내기 위한것이죠.

이렇게 해서 기존의 칙칙했던 말라비트러진 큰따옴표에서 큼지막하고 뭔가 강조하려 하는구나라는 생각이드는 인용문 아이콘으로바뀌었습니다.

설명이 다소 난해할 수 도있겠습니다면 일단 천천히 따라해 보시면 설명이 어느정도 이해 가실겁니다.

정리하자면,

1. 새로운 인용구 아이콘을 만들고 업로드한다.

2. style.css 의 인용문 소스를 수정한다.

간단하죠?!

오늘도 블로그 운영에 불꽃을 튀기고 계시는 수백만 블로거님들께~
작게나마 도움이 되는 글이었으면 합니다.
즐거운 하루 보내세용.^^