본문 바로가기

읽을 거리/블로그 이야기

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

태초에 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로 고친 후의 이미지 갤러리 자막



어때요?  쉽죠??

여러분도 이젠 마음에 드는 글씨체와 색깔을 변경해보세요^^
  • 이전 댓글 더보기
  • Favicon of https://donzulog.tistory.com BlogIcon 돈쥬찌 2008.02.18 12:57 신고

    역시 배울게 많은 티스토리... 넘후 어렵다 ㅋ

  • Favicon of http://meffect.tistory.com BlogIcon 달빛효과 2008.02.18 13:31

    오~ 좋은 정보입니다..ㅎㅎ
    떠먹여주는 듯한 곳도 좋긴 했지만,
    티스토리의 찾아서 블로그 인테리어 하는 것도..ㅎㅎ 재밌더라구요.
    솔직히 첨엔 좀 짜증났지만...
    원래 역경이 있어야 열매가 단 법 아니겠습니까~ ㅋㅋㅋ
    여기저기서 팁 얻어서 블로그 뚝딱뚝딱 하는 재미 쏠쏠하네요~
    근데 이건 언제 실행해보나...항상 실행은 늦게 한다는 단점이..ㅡㅡ;

    (참..저 파비콘이랑 아이콘 바꿔봤어요. 일단 실험이지만..더 짠한 이미지 나타나면 제대로 바꿔보려구요..ㅎㅎ)

    • Favicon of https://blutom.tistory.com BlogIcon 파란토마토 2008.02.19 00:42 신고

      엇?? 달빛효과님.ㅋㅋ 블로그 아이콘을 이렇게 바꾸신 거군요. 계속 예전 그림이 나오더니.. 제 구글 광고 위치 요리 조리 붙여보느라 계속 F5를 눌렀더니 이제야 보이네요.ㅋ 귀엽습니다. 사막을 지나는 고양이 글 맞죠? :)

      그건 글코.. 티스토리 넘 골치아파요.ㅠㅠ 전 솔직히 떠먹여주는게 더 좋은데.ㅋㅋㅋ 그래도 네이버처럼 거기서 주는 것만 하라고 하면 이젠 갑갑해서 못할 거 같네요.:)

  • Favicon of http://manualfocus.tistory.com BlogIcon Fallen Angel 2008.02.18 14:57

    저거 예전에 태터툴즈 스킨에서 한번 본건데 잊어버리고 그 스킨을 못찾고 있었는데 ㅎㅎ...
    잘 찾으셨네여...ㅎㅎ
    예전엔 태그를 이리저리 바꾸는 재미로 막 했었는데...요즘은 그냥 한가지에 안착을 ㅎㅎ..
    스킨한번 손되기 시작하니 바끼는게 많아서리...

    • Favicon of https://blutom.tistory.com BlogIcon 파란토마토 2008.02.19 00:44 신고

      Fallen Angel님 스킨 이쁘잖아요^^ 댓글창에 야웅이도 너무 이쁘구요. 저는 그런 이미지가 없어서 허접한 포토샵 실력으로 만든 제 파란토마토를 넣었지만요.ㅋㅋ 이거 진짜 티스토리랑 다음 서버를 다 뒤져도 없더라구요. 순일땅님 아니었으면 지레 포기했을 듯..

  • Favicon of http://kyrhee.tistory.com BlogIcon Ikarus 2008.02.18 15:17

    파란토마토님의 글을 볼때 마다 참 부지런하시다는 느낌이 듭니다. 저는 처음 갤러리와 개별 그림의 캡션이 다르다는 말을 보고도 무엇을 이야기 하는지 알아차리지 못했거든요. 왜냐면 어떻게 출력되는지 관심을 가져 본 적도 없고 고쳐야 겠다는 생각도 안 들더라구요. 참 게으르게 블로깅하는 거 같아 반성했습니다.

    • Favicon of https://blutom.tistory.com BlogIcon 파란토마토 2008.02.19 00:48 신고

      어이쿠.. 부지런하긴요. 다만 하나 궁금한 거 찾아다니다가 알게 된 자료를 같이 나누려고 한 것이죠. 이거 대충 알아본 날짜는 1월 초인데 힘들어서 차일피일 미루다가 한달 보름 후에나 겨우 글쓴 거에요.:) 과분하신 칭찬 감사합니다만.. 이카루스님 블로그 충분히 훌륭하십니다. 반성하실 필요 전혀 없습니다.

      그나저나 확실히 블로그팁이나 재미로 보는 자료가 영어보다 호응이 좋군요. 영어는 다들 싫어하는구나..게속 영어만 올리면 구독자, 방문자 다 떨어질라~~ 어흑~~ㅋㅋ

  • Favicon of http://001ti.tistory.com BlogIcon 중계사 2008.02.18 16:32

    토마토님 새로운 한주 즐겁게 보내세요^^
    이미지 캡션은 시간이 한가할때 배우도록 하겠습니다.^^

  • Favicon of http://beepurple.net BlogIcon 비퍼플 2008.02.18 16:35

    이런 기능이 있었군요...^^
    재미있는 정보 잘 배우고 갑니다..^^

  • Favicon of http://marinehank.tistory.com BlogIcon 빨간여우 2008.02.18 17:10

    옷!!이런 방법이 있었군요.
    안그래도 흐릿하니 영~~맘에 안들었었는데 저도 색상을 한번 바꿔 봐야겠네요.....

  • Favicon of http://kdaum.tistory.com BlogIcon 까우 2008.02.18 19:48

    블로그에 좋은정보들이 많네요. 안녕하세요~ Daum신지식 담당자입니다 ^^
    바로 조금전 신지식 트랙백답변이 오픈하였습니다. 전에 http://jumpcut.tistory.com/22 네멋대로 써라님의 블로그에 남겨주신 댓글보고 방문했습니다. 아직 공지도 올리기전인데^^ 블로그내 좋은 지식들 신지식에 트랙백으로 한번 엮어보세요~

    • Favicon of https://blutom.tistory.com BlogIcon 파란토마토 2008.02.19 00:50 신고

      우와.. 다음 신지식도 티스토리 블로그가 있었군요!! 다음 신지식 트랙백 오픈이라니.. 정말 축하합니다!! 저도 기쁘네요. 블로그 칭찬 감사합니다.:)

  • Favicon of https://oyabung.tistory.com BlogIcon sils 2008.02.18 19:57 신고

    앗!!! 이렇게 일일이 설명해주시다니.....파란토마토님 센스쟁이!!!ㅋㅋㅋㅋ
    사실 저도 좀 손대볼까 하다가 소스 위치 찾기가 귀찮아서 미루고 미루고 있었는데..ㅠ_ㅠ
    이렇게 찾아서 설명까지 해주시니...!!!!! 또 바꿔봐야겠네요..ㅋㅋㅋ
    오늘 뭐 하나 건졌네요...으흐흐흐흐흐-_,-!!!ㅋㅋㅋ

    • Favicon of https://blutom.tistory.com BlogIcon 파란토마토 2008.02.19 01:05 신고

      저는 아예 모르던 백지 상태에서 순일땅님 덕분에 알게 되었답니다. 정말 힘들어서 한달 넘게 미루다가 이제야 글 올리네요.ㅋ 도움이 되었다니 기쁩니다.

  • Favicon of http://soonilddang2.namoweb.net/tc BlogIcon Soon-il DDang 2008.02.18 21:57

    앗... 오랜만이예요. 파란 토마토님~ ^^ 오랜만에 남겨주신 파란토마토님의 흔적을 타고 왔어요... ^^)/

  • Favicon of http://jungkooki.byus.net BlogIcon 안군 2008.02.18 22:52

    이미지 하니까 몇가지 괜찮은 사이트 남기고 갑니다

    http://bbom.org/tools/index.html
    http://www.poporo.co.kr/main.asp

    1. 사진편집, 2. GIF animation, 3. 연속사진, 4. 사진일기 (오픈예정)
    웹에서 위의 기능 사용하여 이미지 편집할 수 있는 사이트에요 'ㅅ')


    http://home.kele8.com/smallgame/signetImg/default.aspx
    요기는 도장 이미지 만들어 주는 사이트.

  • Favicon of http://jungkooki.byus.net BlogIcon 안군 2008.02.18 22:53

    이미지 하니까 몇가지 괜찮은 곳 남기고 갑니다

    http://bbom.org/tools/index.html
    http://www.poporo.co.kr/main.asp

    1. 사진편집, 2. GIF animation, 3. 연속사진, 4. 사진일기 (오픈예정)
    웹에서 위의 기능 사용하여 이미지 편집할 수 있는 곳이에요'ㅅ')


    http://home.kele8.com/smallgame/signetImg/default.aspx
    요기는 도장 이미지 만들어 주는 곳

  • Favicon of http://jungkooki.byus.net BlogIcon 안군 2008.02.18 22:53

    이미지 하니까 몇가지 괜찮은 곳 남기고 갑니다

    bbom.org/tools/index.html
    www.poporo.co.kr/main.asp

    1. 사진편집, 2. GIF animation, 3. 연속사진, 4. 사진일기 (오픈예정)
    웹에서 위의 기능 사용하여 이미지 편집할 수 있는 곳이에요'ㅅ')


    home.kele8.com/smallgame/signetImg/default.aspx
    요기는 도장 이미지 만들어 주는 곳

  • Favicon of http://jungkooki.byus.net BlogIcon 안군 2008.02.18 22:53

    이미지 하니까 몇가지 괜찮은 곳 남기고 갑니다

    bbom.org/tools/index.html
    www.poporo.co.kr/main.asp


    home.kele8.com/smallgame/signetImg/default.aspx
    요기는 도장 이미지 만들어 주는 곳

  • Favicon of http://wingchip.tistory.com/ BlogIcon 날개칩 2008.02.18 23:11

    호 좋은 팁이네요.
    그러나 전 스킨이 또 자체 인공지능(?)으로 어떻게 망가질지 알 수 없으므로
    당분간은 그냥 밝은 것만 쓰렵니다. ㅡㅡ;

  • Favicon of http://diarix.tistory.com BlogIcon 그리스인마틴 2008.02.19 00:03

    아.. 정말 좋은 팁이네요.
    이런걸 쓰시다니.. 실력이 대단하십니다.
    티스토리 자체를 업그레이드 시키신듯 합니다. ^^

    • Favicon of https://blutom.tistory.com BlogIcon 파란토마토 2008.02.19 01:07 신고

      아이쿠. 과찬이십니다.ㅋ 저는 순일땅님의 도움이 없었다면 암것도 못했을 거에요.^^;; 그냥 물어물어얻은 답으로 계속 실험해가며 얻은 답이죠^^

  • Favicon of http://ilovenecely.tistory.com BlogIcon 러브네슬리 2008.02.19 00:13

    전지현만 뚫어지라 쳐다보다 도망가는 ㅠㅠㅋㅋ

  • Favicon of http://bluenlive.net BlogIcon bluenlive 2008.02.19 00:50

    참고로, !important는 css 스타일을 지정하다가 두 개의 스타일이 충돌될 때 이 쪽을 써달라는 뜻입니다.
    즉,

    .gallerycaption {color:red;
    color:blue !important; }

    하면 red를 무시하고, blue를 선택하라는 뜻입니다.

    그냥 적어봤습니다. (_._)

  • Favicon of https://blog.jaea.net BlogIcon 재아 2008.02.19 20:53 신고

    토마토 아이콘이 바뀌었네요 ^^// 눈이 달렸어요 ㅎㅎ 오호 더 귀여워졌다는 ~! ㅎ

  • 히부 2010.06.10 17:13

    정말 감사합니다.
    큰 도움이 되었습니다.