티스토리 블로그 꾸미기 : 이미지 캡션 수정

블로그는 보편적으로 텍스트 형태가 주류를 이루고 있지만, 

텍스트 중심의 콘텐츠도 보다 돋보이고 내용의 이해와 시각적인 즐거움을 제공하기 위해 관련 이미지를 첨부하는 성향이 두드러지고 있습니다.

그냥 관련 티스토리에 이미지만 첨부하기 보다 이에 대한 대체 텍스트와 해당 그림을 설명하는 자막이 있으면 좋습니다.

이 기능이 캡션입니다. 

특히 사진 블로그를 운영하는 사람들에겐 이미지가 더 중요할 수 있습니다.

아래를 보시면 티스토리의 경우 글에 그림을 첨부하고 이를 클릭하면 우측 패널에  크기를조정하는 너비, 대체 텍스트,  하단 설명을 적는 자막 입력 패널이 보이게 됩니다.

너비는 가로 기준 크기를 지정하게 되고, 대체 텍스트는 이미지를 대체해서 보여주는 텍스트로 검색엔진에 반영됩니다.

이걸 잘 작성해야 로봇이 검색할 때 잘 가지고 간다고 합니다.

자막은 부연 설명을 담당하는 기능을 합니다. 

글작성시에는 보이지 않지만 퍼블리싱을 하면 보이게 됩니다.

사진을 보는데 방해 되지 않는 선에서 이미지캡션을 깔끔하게 만들어 봤습니다.

보라색으로 가로 선을 하나 만들고 본문의 글자색보다 조금 흐린 색상을 선정하여 본문의 글로 인식하지 않게 했습니다.

저의 티스토리가 0.1% 더 고급스러워 졌습니다. ^^

/* Image cap1 */
.cap1 {
    margin:-10px 0 5px 0; padding-top:1px;
    font-size:14px; color: #999; text-align: left;
}

.cap1:before {
    display: inline-block;
    content: "|";
    color: #a41;
    padding-right: 5px;
    font-size: 14px; }

제 블로그 이미지캡션의 소스입니다.

이런식으로 만들어서 CSS파일에 추가해 주시면 됩니다.