RSS블로그의 콘텐츠는 주제에 따라 텍스트, 이미지, 멀티미디어 중심의 다양한 형태로 작성된다. 보편적으로 텍스트 형태가 주류를 이루고 있지만, 텍스트 중심의 콘텐츠도 보다 돋보이고, 독자에게 내용의 이해와 시각적인 즐거움을 제공하기 위해 관련 이미지를 첨부하는 성향이 두드러지고 있다.
텍스트만 있는 콘텐츠라고 해서 가치가 절하되거나 블로그 디자인에 영향을 주는 것은 결코 아니다. 하지만 이왕이면 다홍치마라고 보기좋은 떡이 먹기도 좋은 까닭이다. 관련 이미지가 첨부되면 일단 독자에게 시각적으로 볼거리가 제공하고, 콘텐츠 집중도를 높이며 한걸음 나아가 블로그 디자인에도 좀 더 생기를 띄게 만드는 시너지 효과를 발휘하게 된다.
이미지 캡션 폰트, 컬러 변경이 적용된 블로그 디자인
티스토리 편집모드, 대체 텍스트, 이미지 캡션 입력
본론으로 들어가서, 블로그 콘텐츠 작성에 있어 이미지 첨부도 중요하지만 대체 텍스트와 자막(Caption)을 잘 활용하면 콘텐츠가 깔끔하게 정리되어 독자들이 보기 좋은 콘텐츠로 한결 돋보이게 만들 수 있다. 일반적으로 대체 텍스트와 자막(Caption)을 입력하면 style.css에서 본문과 Caption 항목에 정의된 폰트와 컬러로 표현되어 잘 구분되지 않거나 본문에 묻혀 지나가는 경우가 많다. 하지만 이것을 좀 더 돋보이는 자신만의 폰트와 컬러로 변경해 해당 콘텐츠 관련 이미지에 집중도를 높이고, 전체적인 블로그 디자인을 돋보이는 효과를 얻을 수 있는 방법을 알아 보려는 것이다.
먼저 첨부 이미지 자막(Caption)의 폰트와 컬러를 변경하기 위해서 블로그 관리자 모드로 접속해 [스킨 > HTML/CSS 편집]을 선택한 다음 skin.html 아래 style.css 창으로 이동을 한다. 그리고 아래로 스크롤 해 /* 이미지 아래 캡션 스타일 */이란 주석문을 찾고 그 아래 스타일 정의를 변경하면 된다.
style.css의 이미지 캡션 스타일 위치
이미지 캡션 기본 CSS 정의
이미지 자막(caption) CSS 정의 예제
참고로 표준폰트 기준 이미지 자막 css 정의 코드를 아래에 작성해 놓아 티스토리 사용자를 위한 복사 후 기존의 캡션 스타일에 붙여넣기하여 쓸 수 있도록 했다.
(폰트크기-12픽셀, 폰트-맑은 고딕, 돋움, 애플고딕 외, 컬러-블루, 자막정렬- 중앙)
.cap1 { font:12px/1.7 Malgun Gothic, Dotum, AppleGothic, Arial, Verdana, Sans-serif; color:#00F; text-align:center;}
위의 내용을 참고해 이미지 자막의 폰트와 컬러를 변경한 다음 저장하게 되면 자신이 지정한 폰트, 폰트 크기 그리고 컬러로 모든 콘텐츠 첨부 이미지의 자막(caption)변경된 것을 확인할 수 있게 된다. 단순한 작업이기도 하지만 몰랐을 때는 아쉬운 부분이고, 그렇게 비중있는 과정은 아니지만 최소한 블로그를 운영하면서 자신의 글을 시각적으로 편하고 보다 돋보이는 콘텐츠를 제공하려는 노력은 독자들을 위한 성의있는 배려이자 팬 서비스 차원으로 생각하면 좋지 않을까 싶다. 이로써 블로그 디자인에 관심있는 블로거에게 조금이나마 도움이 되었으면 하는 바람이다.
![Feed Burner RSS-디자인로그[DESIGNLOG]](https://tistory4.daumcdn.net/tistory/39580/skin/images/rss.gif){kind=small}
아무래도 블로그 포스트에 텍스트로만 나열하는 것이 아니라 이미지와 같은 콘텐츠도 함께 들어가는 것이 더 보기가 좋은 것 같아요~
의외로 더 집중성을 높이는 것 같고요^^
글을 자연스럽게 읽어보고 싶도록 만드는 매력이 있습니다.
아하하하.. 텍스트보다 700 이상 사이즈 사진이 훨씬 많은 저같은 블로그도 있어요 ㅠㅠ...
김치군님껀 여행지 검색만 하면 다나옵니다.
걱정마세요 ㅋㅋㅋㅋ
^^주제와 블로그 스타일에 따라 다르게 적용하는게 맞습니다. 특히 이미지의 비중이 큰 경우는 큰 이미지를 잘 정리해서 독자들이 관심부분을 쉽게 이해하도록 하는 것도 센스있는 운영 노하우가 될 겁니다.
좋은 정보입니다.^^^; 굿잡~
감사합니다. 재아님 새해 인사가 늦었네요.
올해는 건강하시고 행복한 나날이 계속되길 기원합니다.
자주 찾도록 노력하겠습니다.
610px로 맞춰놓고 사용중 ^^;
그림은 플리커로 ^^
잘 하시고 계시는 거죠.^^
3줄 테크닉은 아시는지 모르겠네요.ㅎㅎㅎ
요거 궁금했었는데 감사합니다 ^^
좀 더 활용하면 비주얼한 캡션을 구현할 수도 있지만, 블로그 특성상 페이지 로딩 속도를 감안해서 이 정도가 가장 적당할 것 같습니다.
도움이 되셨다니 기쁩니다. 새해 인사를 못 드렸네요.
화군님, 올해는 부자되시고 멋진 일들만 계속되길 빌겠습니다. 화이팅!!!
캡션기능이 따로 있었군요. 감사합니다.
그동안은 그냥 글로 밑에다 적고 중간정렬 하느라 불편했어요 ^^;
안녕하세요? 재밍님.
좀 더 빨리 알려 드릴 껄 그랬습니다.ㅎㅎㅎ
이제는 좀 더 편하게 블로깅을 즐기시길 바랍니다.
최근 재밍님의 글 잘 보고 있습니다.
새해에는 왕성한 활동으로 이웃블로그의 사랑을 독차지하시길 기원합니다.
마루님/ 제가 처음 블로그를 시작했는데 격려해주셔 감사드립니다.
블로그를 하는데 앞으로 많은 도움 부탁드립니다.
새해 복많이 받으세요,
탐진강님도 즐거운 시간 되시고, 새해 복 많이 받으세요
아~~ 좋습니다. ^^
HTML 잘 모른 저같은 경우엔 대단히 유용한 팁입니다...
조금이나마 도움이 되었으면 합니다.
잘 지내시죠?
와... 옛날에 html 배웠는데 조금씩 생각나네요 ㅋㅋ 감사합니다
활용하시는데 조금이나마 도움이 되었으면 합니다.
고대로 복사해서 적용을 했는데 바뀌질 않네요 ㅠㅠ
깨알만한 원래 글씨체 그대로...흑흑
IE6이라 안보이는 건가요 흠;;
드디어 바꿨습니다.
.cap1 요부분도 있었는데
.article 안에 들어있는 cap을 바꿔야 적용이 되더군요.
감사합니다~! ^^
문제를 해결하셨다니 제가 더 기쁘네요.^^
좋은 정보 감사합니다. ^^ 그래서 기쁜 마음에 적용시켜 보려 했는데 /* 이미지 아래 캡션 스타일 */ 주석이 제 스타일시트에는 없네요 이럴땐 어떻게 하면 좋을까요?
그러셨어요? 그럼 style.css 내용을 복사하셔서 메모장으로 스타일.txt로 저장하신 다음 maruzzang@gmail.com으로 보내주시면 확인 후 수정해서 보내드리도록 하겠습니다.
오늘 바로 적용했어요^^
근대 현웅재님께는 저도 주석 없어서 그대로 타이핑해서 넣으시면 된다고 전해주세요.
그런데 굵게는 어떻게 하죠???
아!
font-weight:bold;
이렇게 추가하니깐 되었어요.^^
감사합니다.^^
그런데요...
제 블로그는 너무 사진이랑 캡션이 딱 달라붙어 있네요;;
엔터를 한번 친다고 해야하나???
어쨋든 블로그에 한번 오셔서 확인을 해주실 수 있을까요???
결론 : 너무 사진과 캡션이 딱 붙어있어 보기에 별로이다.
해법은???
너무 바짝 붙긴 하네요.^^
CSS로 정의하는 거라 외부에 보이는 것으로는 원인을 찾기 힘든 사항입니다.
제가 직접 살펴보고 수정할 수 있도록 관리자 모드 접속후 팀블로그탭에 제 메일 maruzzang@gmail.com을 관리자로 초대해 주시면 접속 후 원인을 살펴보고 개선해 드리도록 하겠습니다.^^
혹시 작은 사진을 올렸을때 캡션의 글이 이미지 크기에 맞게 줄 바꿈 할 수 있는지 아시나요? ㅠㅠ
CSS를 조정해서 컨트롤 하기는 힘들 것으로 생각되는데, 티스토리가 나머지 영역은 사용자에게 권한을 부여하지 않는지라 좀 더 연구해 보고 답을 찾으면 알려 드리도록 하겠습니다.
역시 그렇군요 ㅠㅠ 혹시나 했는데
좋은 정보 감사합니다. ^^ 앞으로 많은 도움 받을 것 같아요~ 몇가지 질문이 있는데 괜찮을 까요? 첫번째는 현재 블로그 기본 색이 보라색인데, -디자인로그님의 블로그처럼-바깥쪽은 연한 보라색으로 안쪽은 흰색으로 바꾸고 싶습니다. 아무래도 현재는 가독성이 떨어지는 것 같습니다^^; 둘째는 본문들어가는 부분이 가로로 너무 긴 것 같아서요. 이 부분을 조정하고 싶은데 어떻게 하면 좋을 까요 ?^^;
즐겨찾기 해놓았습니다. 좋은 정보가 많이 있네요..
앞으로 자주 찾아뵐께요
감사합니다. 도움이 되는 정보들이 있으시면 참고하시길 바랍니다.
덕분에 캡션을 수정했습니다. 그런데 스킨에 따라서는 .cap1 이 없는 경우도 있더군요.
유용한 정보 감사합니다. 도움을 얻고 갑니다.