친절한효자손 취미생활

매번마다 완벽한 스킨을 제작하겠노라고 외치지만 역시 사람은 실수를 합니다. 이번 친효스킨 1.17 버전도 지난 버전 대비 대폭 좋아진게 사실입니다. 하지만 그럼에도 불구하고 버그가 발생하고 있습니다. 이번 버전에서도 몇 가지 오류를 발견했고, 다행스럽게도 많은 분들이 제보와 도움을 주셨습니다. 현재 친효스킨 다운로드 페이지에는 긴급한 몇 가지 문제를 수정하여 다시 파일을 재업로드해둔 상태 입니다. 친효스킨 1.175 버전으로 파일이 올라가 있습니다. 1.175 버전은 본문에서 설명하는 모든 문제가 해결된 파일 입니다. 따라서 기존 스킨 위에 덮어쓰기를 하셔도 되고 본문의 내용을 정독하시어 수동으로 수정하셔도 됩니다. 물론 덮어쓰기 할 때는 기존에 설정해둔 개인 코드들은 반드시 백업해줘야 합니다.

 

 

목차

     

    코드 다운로드

    먼저 아래의 텍스트 파일을 다운 받으시기 바랍니다. 다 받으셨다면 열어보세요. 수정에 필요한 코드들이 담겨 있는걸 확인할 수 있습니다.

     

    친효스킨 v1.175 수정 내용.txt
    0.01MB

     

    본문 폰트 오류

    본문의 폰트는 이롭게바탕체가 적용되어야 하는데 오타 하나 때문에 나눔고딕으로 적용되어 있습니다. 그냥 나눔고딕이 마음에 드신다면 굳이 수정하지 않으셔도 되지만, 전자책 가독성 폰트 중 하나인 이롭게바탕체로 적용을 원하신다면 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()));
            }
        });
    });

    해당 부분을 위의 제이쿼리 스크립트로 교체해 주시면 됩니다. 이 문제를 수정해주신 "진빼이"님 감사합니다. 이 오류에 대한 자세한 내용은 진빼이님 글에서 확인 가능 합니다.

     

    https://devjh.tistory.com/47

     

    [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%);
    }

    이건 어렵지않게 적용시킬 수 있으실 겁니다.

     

    마무리

    정말 완벽에 가깝다고 생각하면 새로운 문제가 발생하고, 그걸 또 해결하면 또 다른 난관이 기다리네요. 하지만 이 맛에 개발하는 것 같습니다. 실력이 턱없이 부족하지만 그래도 주변에서 코딩 능력자 몇몇분들께서 도와주시니 이 얼마나 다행스러운 일인가요? 너무 기쁩니다. 바로 원하던 것이기도 하구요.

     

    친효스킨은 티스토리 사용자 분들과 다 같이 개발하고 업그레이드하는 스킨 입니다. 혼자서는 절대 이만큼 성장시킬 수 없었습니다. 앞으로도 많이 사용해 주시고 문제가 발견된다면 주저없이 댓글로 남겨주시거나 메일을 보내주시기 바랍니다. 저는 시간 되는대로 그리고 능력 되는대로 고쳐서 더 좋은 반응형 스킨이 되도록 노력하겠습니다. 끝.

    당신을 위한 콘텐츠

    이 글을 공유합시다

    facebook twitter googleplus kakaoTalk kakaostory naver band

    본문과 관련 있는 내용으로 댓글을 남겨주시면 감사하겠습니다.

    비밀글모드

    1. 자고 일어나서 버전업 해야겟네여.
      감사합니다.
      2020.06.13 03:08 신고
    2. 다른 건 다 적용했는지,
      다음 애드핏은
      어떻게 넣으면 되나요?

      CSS에서 빈 공간을 확보 후
      넣으라고 하셨는데

      솔직히
      어디다 넣어야 하는지
      알 수가 없어서요.

      다음 애드핏 아직 신청 하지 않아서
      사용 중이진 않다면

      코드 넣지 않아도 상관이 없나요?



      p.s1
      스킨 버전업 했다고
      버전업 숫자 표기를 하려고
      푸터 영역쪽 숫자만
      고치려는데
      그건 괜찮나요?

      v1.17을
      이번 수정 버전에 맞게
      v1.175로만 바꿔넣게요.



      p.s2
      버전업 했더니
      본문 폰트가 바뀐게
      맘에 들고요,
      메뉴바 상단 글귀가
      모바일에서 짤리던게
      이젠...
      아, 그건 여전히
      글자가 길어서 짤리네요(...)

      꽤 선호하는 문구라
      바꿀 수가 없어서
      어쩔 수 없네요ㅠㅜ

      본문에
      새로운 에디터로 쓸 때
      이미지 크기 임의 지정
      안된다는 오류도 확실히
      수정되어서
      이제 임의로 이미지 크기
      지정하면 그대로 나오네요^^


      p.s3
      스킨 버전업 했더니,
      굵은 글자 처리한
      글자들이 전부
      녹색 배경색이 칠해져
      나오던데,
      이것도 이번
      스킨 버전업에
      내용에 포함된 건가요?

      굵은 글씨 처리보단
      녹색 배경색 칠해져 있는게
      훨씬 알아보기 쉬워서
      내버려둘 생각이지만
      원래
      수정 의도인지 궁금해서요.
      2020.06.13 10:12 신고
      • 안녕하세요. 네. 다음애드핏 안 쓰시면 그냥 적용 안 하셔도 됩니다.

        1. 1.175로 변경 하셔도 됩니다. 감사해요.
        2. 네...짤리는건 어쩔 수 없답니다 ㅠㅠ
        3. "친효애드온 : 형광펜 모듈" 이게 적용되어서 그렇게 표현 됩니다. 그냥 기존 방식대로 굵게 표시되게 하려면 해당 모듈을 삭제하시거나 주석처리 하면 됩니다.
        2020.06.13 13:39 신고
    3. 비밀댓글입니다
      2020.06.18 01:39
      • 안녕하세요, 구형 글쓰기 에디터인가요?
        2020.06.18 01:52 신고
      • 비밀댓글입니다
        2020.06.18 01:56
      • 슬라이드가 아니고 표네요. 표에 이미지를 넣는건 비추 입니다. 그냥 이미지를 하나 하나 넣으시길 바래요. 저렇게 배치를 원하신다면 포토샵이나 포토스케이프에서 작업 하시고 이미지를 하나로 만들어 넣는걸 추천합니다.
        2020.06.18 02:46 신고
      • 그렇군요..ㅜ 늦은 시간에도 불구하고 답변 감사드립니다 좋은 밤 보내세요^^
        2020.06.18 02:52 신고
    4. 매번 잘쓰고 있습니다. 감사합니다. 그런데 하나 질문을 드리자면, 현재 애드핏 광고를 신청하고 이 가운데 샘플 광고만 게시된 상황인데요. 모바일 화면에서는 광고 사이즈가 맞지 않습니다. 해결 방법이 없을까요?
      2020.06.22 11:48 신고
      • 안녕하세요, https://rgy0409.tistory.com/3823 이 글을 참고하시면 됩니다.
        2020.06.22 14:56 신고