친절한효자손 취미생활

티스토리 업데이트로 인한 친효스킨 CSS 코드 수정 안내

블로그/친효스킨
2022. 8. 8. 17:31

안녕하세요. 친절한효자손입니다. 어제까지만해도 안 그랬는데 2022년 8월 8일! 오늘 티스토리에 접속해보니 뭔가 본문에 업데이트가 된 모양입니다. 보아하니 티스토리측에서 본문 관련 CSS를 새롭게 추가한 듯 합니다. 이 코드로 인해 친효스킨의 본문 중 일부가 스타일이 엉망이 되는 현상을 목격했습니다. 현재까지 발견된 오류는 다음과 같습니다.

 

1. 본문 글꼴 및 리스트 스타일

2. 첨부파일 스타일

3. 본문 자동링크 스타일

4. TOC 자동목차 스타일

5. 유튜브 썸네일 자동생성 스타일

 

이 문제들을 수동으로 해결할 수 있는 방법을 안내해 드리겠습니다.

 

본문 글꼴 및 리스트 스타일

친효스킨 본문의 기본 글꼴은 이롭게바탕체입니다. 그런데 애플 고딕체로 강제 적용이 되었더군요. 마음에 들지 않기에 친효스킨의 오리지널 스타일로 적용하는 방법입니다. 친효스킨 CSS로 들어가 아래의 첨부파일을 다운로드 받으시고 몽땅 복사해 아무 곳에 붙여넣기 해주시면 됩니다.

 

티스토리 본문 업데이트.txt
0.00MB

 

붙여넣기 완료 후 다시 한번 본문을 확인해 주세요. 글꼴은 정상적으로 적용되었을 것입니다. 본문 리스트 수정은 CSS에서 다음의 코드를 찾습니다. 본문 리스트라고 검색하시면 쉽게 찾을 수 있을겁니다.

 

/* 본문 리스트 */
#contents .article ul,
#contents .article ol {
    margin-left: 40px;
}

이것을 아래처럼 변경합니다.

 

/* 본문 리스트 */
#contents .article ul,
#contents .article ol {
    margin: 0;
    padding: 0 0 0 20px;
}

이렇게 수정하시면 끝입니다.

 

첨부파일 스타일 수정하기

친효스킨 첨부파일의 주변에 그림자가 발생하는 증상을 발견했습니다.

 

보시는 것처럼 첨부파일 박스만 보여야 하는데 주변으로 뭔가 넓게 그림자가 들어가있죠? 이를 없애려면 친효스킨 CSS에서 아래의 코드를 찾아 수정해주세요.

 

/* 첨부파일 (새로운 글쓰기 에디터) */
figure.fileblock,
#tt-body-page figure.fileblock {
    position: static !important;
    margin: 20px 0 !important;
    border: none !important;
    width: 100% !important;
    height: 100% !important;
    font-family: "Noto Sans Kr", sans-serif !important;
}

이 부분을 찾습니다. 그리고 여기에 다음의 CSS 스타일코드를 추가합니다.

 

box-shadow: none;

추가 후 저장을 눌러 확인해보세요. 그림자 박스 스타일은 사라졌을 것입니다.

 

본문 자동링크 스타일 수정하기

가장 심각하게 뒤틀린 스타일은 본문에 링크글을 입력하고 엔터를 누르면 바로 아래에 링크 스타일이 생성되잖아요? 친효스킨에서는 크기가 너무 크다고 생각되어 4분의 1로 줄인 스타일이 적용되어있는데 여기에서 문제가 발생했습니다. 증상은 아래와 같습니다.

 

엉망이죠? 이것을 수정하기 위해서 CSS로 들어가 다음의 코드를 찾습니다. 자동 링크라고 검색하시면 쉽게 찾을 수 있을겁니다.

 

/* 티스토리 자동 링크 스타일 */
.rgy-article-autolink-on figure[data-ke-type='opengraph'] a,
.rgy-article-autolink-on #tt-body-page figure[data-ke-type='opengraph'] a {
    height: 100px !important;
}

.rgy-article-autolink-on figure[data-ke-type='opengraph'] div.og-image {
    width: 100px !important;
}

.rgy-article-autolink-on figure[data-ke-type='opengraph'] div.og-text {
    left: 100px !important;
    padding: 10px !important;
}

.rgy-article-autolink-on figure[data-ke-type='opengraph'] div.og-text p.og-title,
.rgy-article-autolink-on #tt-body-page figure[data-ke-type='opengraph'] div.og-text p.og-title {
    max-width: 550px !important;
    font-size: 18px !important;
    color: #555 !important;
}

.rgy-article-autolink-on figure[data-ke-type='opengraph'] div.og-text p.og-desc,
.rgy-article-autolink-on #tt-body-page figure[data-ke-type='opengraph'] div.og-text p.og-desc {
    padding-right: 50px;
    max-height: initial !important;
    -webkit-line-clamp: 1 !important;
    line-height: 17px !important;
    color: #999 !important;
}

.rgy-article-autolink-on figure[data-ke-type='opengraph'] div.og-text p.og-host,
.rgy-article-autolink-on #tt-body-page figure[data-ke-type='opengraph'] div.og-text p.og-host {
    bottom: 0 !important;
    right: 10px !important;
    font-size: 9px !important;
    color: #ccc !important;
}

이 부분을 아래의 첨부파일에 있는 코드로 몽땅 교체해 줍니다.

 

자동 링크 스타일.txt
0.00MB

 

교체 완료 후 직접 확인해 보시기 바랍니다.

 

TOC 자동 목차 스타일 수정하기

이 부분도 엉망이 되었습니다. 증상은 아래와 같습니다.

 

뭔가 심하게 벌어지는 구간이 많습니다. 친효스킨 CSS에서 아래의 코드를 찾습니다.

 

/* 친효애드온 : 본문 목차 목록 모듈 (TOC) 시작 */
div.rgyList,
div#rgyTOC {
    position: relative;
    padding: 10px;
    border-top: 10px solid #FF5544;
    background-color: #e5e5e5;
}

div.rgyList::after,
div#rgyTOC::after {
    position: absolute;
    content: "<LIST>";
    top: 5px;
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    font-size: 1.3em;
    font-family: "NanumPen", "Noto Sans Kr", sans-serif;
    font-style: italic;
    color: #FF5544;
    letter-spacing: 5px;
}

div.rgyList ul,
div#rgyTOC ul {
    margin-left: 0 !important;
}

div.rgyList > ul,
div#rgyTOC > ul {
    border-bottom: 1px dashed #FF5544;
}

div.rgyList li,
div#rgyTOC li {
    list-style-type: none !important;
    border-top: 1px dashed #FF5544;
}

div.rgyList li a,
div#rgyTOC li a {
    position: relative;
    display: block;
    padding-left: 10px;
    font-size: 14px;
}

전부 수정할 필요는 없습니다. 수정할 부분은 아래와 같습니다.

 

div.rgyList ul,
div#rgyTOC ul {
    margin: 0 !important;
    padding: 0 !important;
}

div.rgyList li,
div#rgyTOC li {
    margin: 0 !important;
    list-style-type: none !important;
    border-top: 1px dashed #FF5544;
}

div.rgyList li a,
div#rgyTOC li a {
    position: relative;
    display: block;
    padding: 2px 2px 2px 10px;
    font-size: 14px;
}

이렇게 변경해 주세요. 수정 전과 후를 비교해 보시고 달라진 부분만 바꿔주시면 됩니다.

 

유튜브 썸네일 자동생성 스타일

본문 글쓰기 시 유튜브 공유 URL 링크를 넣고 엔터를 입력하면 바로 아래에 유튜브 썸네일이 큼지막하게 자동으로 생성됩니다. 그런데 티스토리 업데이트 이후 이 썸네일이 엄청 작아졌습니다. 친효스킨 CSS에서 다음의 코드를 찾습니다.

 

/* 유튜브 플러그인 */
figure[data-ke-type='video'][data-ke-style='alignCenter'] {
    margin: 0 auto -10px !important;
}

이것을 아래의 코드와 같이 변경합니다.

 

/* 유튜브 플러그인 */
figure[data-ke-type='video'][data-ke-style='alignCenter'] {
    display: block;
    margin: 10px auto !important;
}

이렇게 수정하시면 다시 예전처럼 정상적으로 본문을 꽉 채우는 반응형 썸네일로 나타날 것입니다.

 

마무리

여기까지가 현재 발견된 친효스킨 스타일 오류입니다. 친효스킨을 사용하시는 분들 중에서 본문에서 안내해드리고 있는 증상 외의 다른 오류를 발견하셨다면 댓글로 오류 내용 및 증상을 확인할 수 있는 링크를 남겨주시면 시간 나는대로 바로 확인 후 조치를 취하겠습니다. 티스토리는 예고도 없이 이런 업데이트를 해서 참 당혹스럽습니다. 그래도 꾸준히 업데이트를 한다는건 그만큼 발전 가능성이 무한하다는 의미이므로 환영입니다. 단지 제가 좀 힘들어질 뿐이죠. (웃음) 끝.

 

추가내용 (2022.8.10.수)

이메일로 연락을 받았습니다. 티스토리에서 적용했던 추가 업데이트가 다시 롤백이 되어 사라졌다는 내용이었습니다. 그렇다면 본문에서 소개해드리고 있는 내용을 굳이 업데이트를 해야 하는지에 대한 의문이 생기실 것입니다. 결론은 「적용해도 된다」입니다. 물론 적용시키지 않으셔도 상관 없습니다. 편하신 방법으로 선택하시기 바랍니다. 만약 수동으로 적용하실 생각이시라면 첫번째의 본문글꼴 리스트 업데이트에 대한 CSS는 적용시키지 않아도 됩니다. 친효스킨 2.5b 버전을 적용시키신 분들은 본문글꼴 리스트 업데이트 관련 CSS를 모두 삭제해 주시면 됩니다. 그냥 둬도 되지만 굳이 불필요한 CSS 코드를 늘릴 필요는 없기에 삭제를 권고하는 것입니다. 끝.

저작자표시 비영리 변경금지

공유하기

facebook twitter kakaoTalk kakaostory naver band

'블로그/친효스킨' 의 관련글

티스토리툴바