이미지 아래에 캡션(자막) 추가하기

워드프레스 정보를 제공하는 블로그 Avada 2017. 10. 17. 22:56 • 댓글:

워드프레스에서는 이미지에 캡션(자막)을 매우 쉽게 추가할 수 있습니다.

하지만 티스토리에서 서드파티 에디터를 사용하니 이미지를 삽입하는 것이 불편하고 캡션을 넣을 수 있는 옵션도 없네요.ㅠㅠ

어떻게 할까 고민하다가 stackoverflow에 제시된 소스를 참고하여 이미지를 삽입하고 글을 발행한 후에 다시 편집하여 캡션을 넣기로 했습니다. 이미지에 캡션을 추가하는 방법은 다음 stackoverflow 글을 참고하면 됩니다.

저는 위의 글을 참고로 하여 다음과 같은 형식으로 HTML 코드를 추가했습니다.

<FIGURE><IMG style="MARGIN-LEFT: auto; DISPLAY: block; MARGIN-RIGHT: auto" src="http://이미지경로"><FIGCAPTION class=timgcaption>Science 데모에 포함된 컨택트 폼</FIGCAPTION> </FIGURE>

그런 다음 "워드프레스 이미지 캡션 변경하기" 글을 참고하여 다음과 같은 CSS 코드를 추가했습니다.

/* 캡션 */
.timgcaption {
    font-size: 1.2em;
    line-height: 17px;
    padding: 10px;
    text-align: center;
   color: #aaa;
    font-style: italic;
}

그러면 다음 그림과 같이 캡션이 추가됩니다.

 

이렇게 수동으로 HTML 코드를 넣어서 캡션을 추가하는 것이 매우 번거롭지만 더 좋은 방법을 찾을 때까지 이 방법을 사용해볼 생각입니다.

위에 제시된 CSS 코드는 제가 사용하는 것으로 예시일 뿐입니다. 이 글을 작성하는 이유는 캡션을 추가할 때마다 참고하여 HTML 코드를 복사해 넣기 위함이기도 합니다.