친효스킨 1.16 버전에서 이미지 좌측정렬 및 리스트 스타일 일부 적용이 안 되는 문제 해결 방법
안녕하세요, 친절한효자손 입니다. 댓글로 일부 문제에 대한 제보를 받았습니다. 현재 1.16버전에서 알려진 문제는 다음과 같습니다.
1. 새로운 글쓰기 에디터에서 본문보다 가로폭이 작은 이미지를 삽입하고 해당 이미지에 텍스트 자막(캡션)을 매우 긴 내용으로 입력 시, 이미지가 자동으로 좌측정렬이 되는 문제
2. 구버전 및 새로운 글쓰기 에디터에서 리스트 스타일로 목록 입력 시, 일부 리스트 스타일이 정상적으로 출력되지 않는 문제
이 두가지 문제 입니다. 해당 문제는 육안으로 확인 했으며, 두가지 모두 1.17 버전에서는 수정이 완료 된 상태 입니다. 하지만 지금 당장 친효스킨을 사용해야 하므로 CSS에서 위의 문제를 해결하는 방법에 대해 설명드리고자 합니다.
이미지 좌측 정렬 문제 해결 방법
친효스킨 CSS 탭에서 아래의 부분을 검색합니다. "티스토리 본문 이미지" 라고 검색하시면 쉽게 찾을 수 있을 것 입니다.
/* 티스토리 본문 이미지 (새로운 글쓰기 에디터) */
.tt_article_useless_p_margin > figure.imageblock {
margin: 25px auto 20px !important;
text-align: center !important;
}
.tt_article_useless_p_margin > figure.imageblock span img {
display: block !important;
margin: 0 !important;
outline: 1px solid #ccc !important;
}
.tt_article_useless_p_margin > figure.imageblock figcaption {
padding: 10px !important;
outline: 1px solid #ccc !important;
text-align: center !important;
font-style: italic !important;
color: #555 !important;
word-break: break-word !important;
caption-side: bottom !important;
background-color: #eee !important;
}이 부분 입니다. 엄청 많이 바뀐건 아닙니다. 일부만 변경이 되었습니다. 위의 코드를 모두 지우고 본문 마지막에 있는 첨부파일의 완성된 CSS 코드로 입력하면 됩니다. 그대로 바꿔치기 하면 되는 간단한 방법 입니다. 어렵지 않게 작업하실 수 있을 겁니다.
리스트 스타일 문제 해결 방법
마찬가지로 친효스킨 CSS 탭에서 아래의 부분을 검색합니다. "본문 리스트 스타일" 이라고 검색하시면 쉽게 찾을 수 있습니다.
/* 본문 리스트 스타일 (새로운 글쓰기 에디터) */
.tt_article_useless_p_margin > ul {
margin-left: 30px;
}
.tt_article_useless_p_margin > ol {
margin-left: 30px;
list-style-type: decimal !important;
}
.tt_article_useless_p_margin > ol > li {
list-style: inherit !important;
}이 부분은 모두 삭제하시고 첨부파일의 내용으로 교체하시면 됩니다.
이렇게 하시면 친효스킨 1.16에서 문제가 되었던 부분을 수정할 수 있습니다. 앞으로 친효스킨을 사용하시다가 버그나 기타 문제가 있다고 생각되는 부분은 망설이지 마시고 댓글로 제보 부탁드립니다. 시간이 되는대로 확인 후 수정해서 소식 전해드리겠습니다. 감사합니다. 끝.
"친절한효자손 취미생활" 을 검색!
