친효애드온 : 티스토리 본문에 들어가는 이미지 테두리 자동 적용 (마크1)

본문에 이미지들 많이 넣으시죠? 혹시 넣으실때마다 테두리를 적용하시나요? 티스토리의 포토에디터에서는 다양한 테두리 스타일을 제공하고 있습니다. 하지만 저의 경우는 이 중에서 검정 테두리만 주로 사용을 하는 편 이며, 이따금씩 까먹고 그냥 삽입하고는 합니다. 일반적으로 촬영한 사진들은 괜찮은데 강좌를 위한 스크린샷 화면의 경우는 배경이 흰색인 이미지들이 있을때면 테두리를 만들어주지 않으면 본문과 햇갈려서 어디까지가 이미지고 어디가 본문의 백그라운드인지 잘 모를때가 있습니다. 그래서 이를 구별짓기위해 테두리를 만들어 줍니다.

티스토리의 포토에디터가 가끔 오류가 날 때가 있습니다. 그러면 처음부터 다시 작업해야 합니다. 사진이 한두장인 경우는 그냥 다시 처음부터 진행해도 크게 무리는 없지만, 10장 이상되는 사진을 재작업 한다는건 참으로 귀찮은일이 아닐 수 없습니다. 뭐 대단한 편집을 하는것도 아니고 아주 간단한 테두리만 넣는 작업인데도 말입니다.

이 방법을 사용하면 포토에디터에서 테두리를 사용하지 않으셔도 됩니다. 장점은 이미지 사진들을 빨리 업로드 할 수 있다는 점 입니다. 단점은 지금까지 올린 모든 이미지에도 일괄 적용된다는 점 입니다. 적용하실분들은 이 차이점을 잘 기억하시어 차질이 없도록 합시다.

친효애드온 본문 이미지 일괄적용 CSS 세팅

여느때와 마찬가지로 티스토리의 html 편집으로 들어가서 CSS 탭에 아래의 내용을 붙여넣기 합니다. 위치는 빈 줄 공간에 엔터키로 여유 공간을 확보하시고 붙여넣기 해주시면 됩니다.

.rgyImg .imageblock {

box-sizing: border-box !important;

box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.8) !important;

margin-bottom: 10px !important;

}

.rgyImg .imageblock .cap1 {

padding: 10px !important;

font-style: italic !important;

font-size: 14px !important;

color: #555 !important;

box-sizing: border-box !important;

background: #eee !important;

}

위의 내용을 아래에 텍스트 파일로 첨부하도록 하겠습니다. 받으셔서 사용하시면 됩니다. (내용은 업드레이드 되어 변경될 수 있습니다. 첨부파일이 더욱 정확합니다.)

친효애드온-본문 이미지 테두리 (CSS).txt

HTML 세팅

일괄 적용을 시키려고 하였으나, 이미 예전에 사용했던 첨부파일 스타일과 클래스명이 겹치는 문제로 인해서 따로 적용시키기로 했습니다. 먼저 적용된 결과는 아래를 참고하여 주시기를 바랍니다.

출처 : 구글 이미지 검색

이렇게 적용이 됩니다. 이미지 밑에 들어간 텍스트 또한 티스토리 글쓰기 에디션에서 기본 제공하고 있는 기능입니다. 글쓰기 모드에서 이미지를 선택하시면 오른쪽에 사진 설정화면이 나옵니다. 그곳에서 자막 부분에 텍스트를 입력하면 이렇게 캡션으로 설명처럼 글자가 추가됩니다. 해당 자막 영역에도 스타일을 만들었습니다.

사용 방법은 티스토리 글을 작성하실 때 이용하시면 됩니다. 먼저 이미지를 삽입하기 전, 아래와 같은 태그를 입력해 둡니다.

여기에 이미지를 넣어주세요

<div>

위의 빨간색 부분을 입력하시면 됩니다. 그리고 텍스트 부분에 사진 이미지들을 넣으시면 됩니다. 그러면 빨간색 태그 안쪽의 모든 이미지가 위의 예제에 나온 것 처럼 일괄 적용이 됩니다.