친절한효자손 취미생활

안녕하세요, 친절한효자손 입니다. 댓글로 일부 문제에 대한 제보를 받았습니다. 현재 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;
}

이 부분은 모두 삭제하시고 첨부파일의 내용으로 교체하시면 됩니다.

 

친효스킨 v1.16 CSS FIX.txt
0.00MB

 

이렇게 하시면 친효스킨 1.16에서 문제가 되었던 부분을 수정할 수 있습니다. 앞으로 친효스킨을 사용하시다가 버그나 기타 문제가 있다고 생각되는 부분은 망설이지 마시고 댓글로 제보 부탁드립니다. 시간이 되는대로 확인 후 수정해서 소식 전해드리겠습니다. 감사합니다. 끝.

 

 

 

공유하기

facebook twitter kakaoTalk kakaostory naver band

댓글

비밀글모드

  1. 정말 빠른 답변과 수정 감사 드립니다!!!
    2020.04.01 22:59 신고
    • 안녕하세요, 적용 잘 되나요?
      2020.04.02 02:28 신고
    • 안녕하세요.
      올려주신 수정 사항 적용해 보았습니다. 그런데 이미지는 가운데로 정렬이 되는데 캡션의 크기가 사진의 가로폭으로 제한되지가 않는 것 같습니다(https://hohohyo.tistory.com/225 참조).

      이리저리 궁리를 해보았지만 저의 짧은 지식으로는 아직 답을 찾지 못했습니다.

      아무래도 제가 캡션을 길게 쓰는 편이라 세로로 찍은 사진을 쓸 때 이렇게 되는 문제가 있으니 나중에 사진을 올릴 때 고려를 해서 글을 써야할 것 같습니다.

      아무튼 빠른 수정 감사 드립니다!
      2020.04.02 12:33 신고
    • 네.캡션은 사진과 같이 움직이지는 않아요. 이것도 나중에 한번 살펴보도록 하겠습니다.
      2020.04.02 12:34 신고
    • 그렇군요. 배워본 적이 없는 분야라 이리저리 시도해 보고 있는데 은근히 재미있네요.
      2020.04.02 12:49 신고
  2. 저도 스킨에 대해서 공부해보고 변경해보고 싶은데 무료배포 스킨인건가요??
    2020.04.02 08:08 신고
  3. 에디터에서 이미지 클릭하면 나오는 메뉴 중 "글 오른쪽 정렬" 기능을 이용해 사진을 글문단 오른쪽으로 배치시켜 글을 작성해 보았습니다. 그러니 사진과 글이 붙어서 표시가 되는데요. 본문이미지 margin 좌우가 auto 로 되어 있어서 그런거 같은데요. auto 를 빼고 10px 씩 줘보니 글하고 사진하고 간격은 벌어지지만, 다른 게시글 이미지들이 다 좌측으로 붙어 버리더라구요. 방법이 있을까요?
    2020.04.30 16:34 신고
    • 안녕하세요, 오른쪽 정렬이라는게 두 가지 입니다. 첫번째는 이미지만 단순히 오른쪽으로 이동시키는 것, 두번째는 float: right; 속성이 들어가는 우측 배치 방식인데요, 질문하신 부분은 아마 float 부분에 해당되는 것 같습니다. 이 방식은 원래 그렇습니다. 매소드 속성이 그런거에요. 보통 이 방식은 본문 우측상단 1개 애드센스를 넣을때 사용하는 방식 입니다. 텍스트가 이 애드센스를 감싸게 되는 것 입니다. 방금 확인한 auto 속성 때문에 이미지를 단순 좌측, 중앙, 우측으로 정렬하는데 오류가 있다는건 확인해서 현재 수정완료 했습니다.
      2020.04.30 16:53 신고