친효스킨 1.17 버전 오류 안내 및 수정 방법
매번마다 완벽한 스킨을 제작하겠노라고 외치지만 역시 사람은 실수를 합니다. 이번 친효스킨 1.17 버전도 지난 버전 대비 대폭 좋아진게 사실입니다. 하지만 그럼에도 불구하고 버그가 발생하고 있습니다. 이번 버전에서도 몇 가지 오류를 발견했고, 다행스럽게도 많은 분들이 제보와 도움을 주셨습니다. 현재 친효스킨 다운로드 페이지에는 긴급한 몇 가지 문제를 수정하여 다시 파일을 재업로드해둔 상태 입니다. 친효스킨 1.175 버전으로 파일이 올라가 있습니다. 1.175 버전은 본문에서 설명하는 모든 문제가 해결된 파일 입니다. 따라서 기존 스킨 위에 덮어쓰기를 하셔도 되고 본문의 내용을 정독하시어 수동으로 수정하셔도 됩니다. 물론 덮어쓰기 할 때는 기존에 설정해둔 개인 코드들은 반드시 백업해줘야 합니다.
목차
코드 다운로드
먼저 아래의 텍스트 파일을 다운 받으시기 바랍니다. 다 받으셨다면 열어보세요. 수정에 필요한 코드들이 담겨 있는걸 확인할 수 있습니다.
본문 폰트 오류
본문의 폰트는 이롭게바탕체가 적용되어야 하는데 오타 하나 때문에 나눔고딕으로 적용되어 있습니다. 그냥 나눔고딕이 마음에 드신다면 굳이 수정하지 않으셔도 되지만, 전자책 가독성 폰트 중 하나인 이롭게바탕체로 적용을 원하신다면 CSS에서 아래의 부분을 찾습니다. "진짜본문" 이라고 검색하면 나옵니다.
/* 진짜본문 (article_rep_desc) */
#contents .article {
word-break: normal;
-webkit-word-break: normal;
padding: 20px;
border: 1px solid #E5E5E5;
border: 1px solid var(--subColor);
border-radius: 0;
border-radius: var(--borderRadius);
font-family: "IropkeBatang", "Nanum Gothic", sans-serif;
font-size: 1em;
}여기에서 font-family의 "IropkeBatangM" 이라고 되어 있는 부분 중 M을 지워서 위처럼 만들어 주시면 됩니다.
모바일 버튼 토글 동작 시 최상단 영역이 일부 틀어지는 문제 해결 방법
먼저 친효스킨의 HTML에서 다음의 영역을 찾습니다. "모바일 슬라이드 버튼" 이라고 주석 부분을 검색하면 됩니다.
// 모바일 슬라이드 버튼 //
$(".mobile-btn").click(function() {
$(".menu").stop().slideToggle(400, function() {
if ($(".menu").css('display') == 'none') {
$("#topEmpty").css('height', 20);
} else {
$("#topEmpty").css('height', ($("#topEmpty").height() + $(".menu").eq(0).height()));
}
});
});해당 부분을 위의 제이쿼리 스크립트로 교체해 주시면 됩니다. 이 문제를 수정해주신 "진빼이"님 감사합니다. 이 오류에 대한 자세한 내용은 진빼이님 글에서 확인 가능 합니다.
[ETC] 친효스킨 v1.17 메뉴 눌렀을 시 컨텐츠 밀리는 오류 해결 방법
친효스킨(v1.17)을 사용하고 있다. (v1.18에서는 이 오류가 해결될 것으로 보여진다) 매번 사용할 때마다 생각보다 깔끔하고 좋다는 느낌을 받는다. 그리고 친효스킨 제작자님이 사용 중이신 스킨��
devjh.tistory.com
새로운 글쓰기 에디터 CSS 전체 코드 수정
티스토리의 신형 글쓰기 에디터에서 글을 작성하면 발생하는 약간의 오류들을 수정했습니다. 본문 이미지 테두리가 미세하게 어긋나는 문제, 크롬에서는 큰 문제가 없지만 익스플로러에서 접속 시 이미지가 큰 경우 본문을 초과하는 오류가 있었습니다. 또한 에디터에서 임의로 이미지 크기를 변경해도 실제로 적용이 되지 않는 문제가 있었습니다. 이 부분을 수정했습니다. 또한 접은글 사용 시, 아이콘이 정상적으로 나타나지 않는 문제도 수정했습니다.
친효스킨 CSS에서 다음의 영역을 검색합니다. "새로운 글쓰기 에디터 시작" 이라고 검색하면 나옵니다.
/* ========== 새로운 글쓰기 에디터 시작 ========== */
/* 티스토리 본문 이미지 (새로운 글쓰기 에디터) */
.tt_article_useless_p_margin > figure.imageblock.alignCenter {
margin: 25px auto 20px !important;
outline: 1px solid #eee !important;
}
.tt_article_useless_p_margin > figure.imageblock figcaption {
margin-top: -10px !important;
padding: 10px !important;
font-style: italic !important;
color: #777 !important;
background-color: #eee !important;
}
/* ========== (중략) ========== */
.tt_article_useless_p_margin > figure.fileblock a:hover div.desc div.size,
.tt_article_useless_p_margin > div#toc-contents > figure.fileblock a:hover div.desc div.size {
background-color: #FF5544 !important;
background-color: var(--mouseHoverColor) !important;
filter: brightness(0.8) !important;
-webkit-filter: brightness(0.8) !important;
-moz-filter: brightness(0.8) !important;
-ms-filter: brightness(0.8) !important;
-o-filter: brightness(0.8) !important;
}
/* ========== 새로운 글쓰기 에디터 끝 ========== */"새로운 글쓰기 에디터 시작"부터 "새로운 글쓰기 에디터 끝" 이라고 하는 주석까지 해당 구역 안쪽의 모든 CSS 코드를 첨부파일의 코드로 변경하면 됩니다.
다음 카카오 애드핏 중앙정렬 방법
이건 오류는 아니지만, 카카오 애드핏 광고를 사용하시는 분들 중 중앙 정렬을 원하시는 분들이 계셨습니다. 친효스킨의 CSS에서 빈 공간을 확보 후 아래의 코드를 삽입하시면 됩니다.
/* ================ 다음 애드핏 ================ */
.kakao_ad_area {
position: relative;
left: 50%;
transform: translateX(-50%);
-webkit-transform: translateX(-50%);
}이건 어렵지않게 적용시킬 수 있으실 겁니다.
마무리
정말 완벽에 가깝다고 생각하면 새로운 문제가 발생하고, 그걸 또 해결하면 또 다른 난관이 기다리네요. 하지만 이 맛에 개발하는 것 같습니다. 실력이 턱없이 부족하지만 그래도 주변에서 코딩 능력자 몇몇분들께서 도와주시니 이 얼마나 다행스러운 일인가요? 너무 기쁩니다. 바로 원하던 것이기도 하구요.
친효스킨은 티스토리 사용자 분들과 다 같이 개발하고 업그레이드하는 스킨 입니다. 혼자서는 절대 이만큼 성장시킬 수 없었습니다. 앞으로도 많이 사용해 주시고 문제가 발견된다면 주저없이 댓글로 남겨주시거나 메일을 보내주시기 바랍니다. 저는 시간 되는대로 그리고 능력 되는대로 고쳐서 더 좋은 반응형 스킨이 되도록 노력하겠습니다. 끝.
