본문 바로가기
읽을 거리/블로그 이야기

이미지, 이미지갤러리(티스토리) 캡션/자막 수정하는 방법

by 파란토마토 2008. 2. 18.
태초에 w0rm9님의 질문이 있었으니 구하라~ 그래서 찾았습니다.^^ㅋㅋ

http://badnom.com/777 을 봐주세요.
사진 한장짜리 밑에 캡션이랑 이미지 갤러리로 올린 사진의 캡션이랑 다르다는걸 알 수 있습니다.
그걸 같게 하고 싶습니다ㅠ.ㅠ/헬프미~


지금은 w0rm9님께서 이미 저 문제를 해결하셨으므로, 저는 제 test블로그를 캡쳐했습니다.
이것은 티스토리에서 기본으로 제공되는 이미지 아래의 자막입니다.
전지현 17차 CF 로데오편

이것은 이미지갤러리의 자막입니다.
전지현 17차 CF 로데오편


이미지 자막은 연회색, 이미지 갤러리의 자막은 연청색인 것을 알 수 있으며, 이는 스킨이 변경되어도 바뀌지 않습니다. 그러므로 어두운 색이나 푸른 계통의 스킨을 쓰시는 분들에게는 상당히 불편하겠지요.

글씨체는 고사하고, 색상조차 바꾸지 못한다면 너무 큰 불편이겠죠?

좀 더 편리한 티스토리 생활을 위해서 여기 저기 검색을 하다 보니 저랑 비슷한 궁금증을 가진 분이 딱! 한 분 게시더군요. 바로
Soon-il DDang님이신데요, 이 분께서 태터툴즈 포럼 게시판에 이에 대한 글을 올리셨습니다.


Soon-il DDang님의 글 중에서 style.CSS 부분 인용했습니다. (도움 많이 주셔서 감사합니다.)

태터툴즈/텍스트큐브 기본 스타일 (이미지 캡션 스타일)

/* image caption style 이미지 아래 캡션 스타일 */
.cap1 { color:#fff;  text-align:center;}

/* imageblock 그림 */
.imageblock { }

/* align left 왼쪽 */
.left { }

/* align center 가운데 */
.center { }

/* align right 오른쪽 */
.right { }

/* image 2 align 그림 2개 배치 */
.dual { background-color:#345; margin-bottom:5px;}

/* image 3 align 그림 3개 배치 */
.triple { background-color:#345; margin-bottom:5px;}

/* media 동영상 */
.mov {background: #345; margin-bottom: 5px;}




이 중에 우리에게 필요한 것은 이 부분입니다.

/* image caption style 이미지 아래 캡션 스타일 */
.cap1 { color:#fff;  text-align:center;}


티스토리의 여러 스킨을 가지고 이것 저것 실험을 해본 결과 티스토리의 모든(?) 스킨에는 기본적으로 단일 이미지 아래에만 캡션 html태그를 제공하고, 여러 장을 한꺼번에 올릴 수 있는 이미지 갤러리에는 태그 자체가 없습니다. 하지만 티스토리에 안되는게 어딨니? 다 되지~ 우리는 갤러리 캡션을 입력만 해주면 되는 것입니다.

이것이 제 블로그 Style.css 의 기본 캡션 스타일입니다.

.cap1 { color:red; text-align:center; padding:4px 0; margin:0;}

이미지 갤러리에는 캡션 설정이 아예 없습니다만 다음을 입력하면 설정변경이 가능합니다.
요건 여러분 블로그의 .cap1 부분을 찾아서 고대로 복사해서 조금만 수정하면 됩니다.

.galleryCaption  {color: blue !important; font-weight: bold; font-family: dotum, gulim, sans-serif !important; }


잘 살펴보시고, 필요한 부분만 고치시면 됩니다.

.cap1             - 한 장씩 올라오는 이미지의 캡션
{ color: red;  ====> 색깔 변경
text-align:center;  ====> 위치 변경
padding:4px 0;
margin:0;
font-weight: bold;  ====> 굵기 변경
font-family: Gungsuh;
  } ====> 폰트 변경


이미지 한 장씩 수정하는 것과 달리 이미지 갤러리의 캡션 수정은 일반 html 태그를 입력해도 조정이 안되었습니다. 이유는 알 수 없으나 !중요하다고 ( !important ) 강조를 해주니까 되더군요.

.galleryCaption  - 이미지 갤러리에서의 캡션
{ color: blue !important
font-weight: bold  ;
font-family: verdana !important ; }

이렇게 수정을 해주고 나면 드디어 원하는 스타일의 자막/캡션을 얻을 수 있습니다.

전지현 17차 CF 로데오편

궁서체로 고친 후의 이미지 자막

전지현 17차 CF 로데오편

verdana로 고친 후의 이미지 갤러리 자막



어때요?  쉽죠??

여러분도 이젠 마음에 드는 글씨체와 색깔을 변경해보세요^^