미넴 스킨 제작 프로젝트

티스토리 미넴 스킨 2.2 업데이트 - 목차 기능 개선

변태 개발자 아미넴 2021. 4. 20.

오랜만에 업데이트 소식을 전합니다.

 

이번 버전에서는 특별히 목차 기능을 대폭 수정하였습니다.

화면 구성을 좀 더 원하는 대로 설정할 수 있는 기능도 추가하였습니다.

 

아래에서 자세히 설명하도록 하겠습니다.

 

목차

     

    신규 기능 및 개선 사항

    먼저 신규 기능과 개선 사항을 말씀 드리겠습니다.

     

    목차 접기 기능 추가

    목차를 기본적으로 접힌 상태에서 보이도록 기능을 추가하였습니다.

     

    이 기능은 다음 옵션으로 켜고 끌 수 있습니다.

     

    기능을 켜면 목차가 다음과 같이 접힌 상태로 보이게 되며 클릭하면 펼쳐 집니다.

    목차 펼치기 전(좌) 후(우)

     

    플로팅 목차 신 버전 추가

    목차 기능에 대해 요구사항이 많아서 새로운 버전을 만들어 보았습니다.

     

    본문 목차가 벗어나면 좀 더 즉각적으로 반응하여 사이드 여유 공간에 플로팅 목차가 등장하며 기존과 마찬가지로 접고 펼치기도 가능합니다. 다만 신 버전에서는 드래그 기능은 빠졌습니다.

     

    여유 공간이 좁아지면 접혀진 상태로 등장하게 됩니다.

    플로팅 목차 펼치기 전(좌) 후(우)

     

    플로팅 목차 스타일 옵션에서 기존 목차 스타일을 그대로 사용하실 수도 있습니다.

     

     

     

     

    상단 헤더 고정 기능

    상단 헤더를 고정하는 기능을 추가하였습니다. 이 기능을 활성화 시키면 위의 블로그 제목 부분과 메뉴가 항상 따라 다닙니다.

     

    글을 열람할 경우 블로그 제목 부분이 글 제목으로 변경됩니다.

     

    주요 설정 부분에서 이 기능을 켜고 끌 수 있습니다.

     

    컨텐츠 위치 조정 기능

    컨텐츠의 위치를 화면 중앙에 위치 시킬 수도 있지만 다음과 같이 왼쪽 정렬을 하여 오른쪽 여유 공간을 좀 더 효율적으로 활용할 수 있도록 하였습니다. 화면도 넓게 목차 영역도 넓게 활용할 수 있습니다.

     

    주요 설정의 컨텐츠 중앙 위치 옵션을 켜고 끔으로써 변경할 수 있습니다.

     

    본문 적용 글꼴 무시 옵션

    의도치 않게 본문에 적용된 글꼴이 있을 경우 보기 좋지 않을 수 있으므로 무시하는 옵션을 추가했습니다.

     

    본문 적용 글꼴 무시 옵션을 ON 하면 다음과 같이 적용된 글꼴이 무시됩니다. 기본 값은 OFF입니다.

    본문 적용 글꼴 무시 옵션 적용 전(좌) 후(우)

     

    사이드바 광고 따라다니기 기능 개선

    일치하는 광고만 따라다니도록 했었는데 그 기능을 개선하여 광고가 하나라도 있으면 따라 다니도록 만들었습니다. 우선순위는 일치하는 광고 > 그 외 애드센스 광고 > 카카오 애드핏 광고 순입니다.

     

    스킨편집에서 일치하는 광고를 설정하였다면 사이드바에 일치하는 광고가 고정되어 따라 다니게 됩니다.

     

    일치하는 광고 기능을 OFF해 보겠습니다.

     

    다음과 같이 구글 애드센스 광고가 따라 다닙니다.

     

    사이드바 애드센스 광고도 한 번 OFF 해 보겠습니다.

     

    예상대로 애드핏 광고가 잘 따라 다닙니다.

     

    커버 스타일 변경

    커버 스타일이 촌스러워 보여서 스타일을 좀 수정해 보았습니다.

     

    커버 스타일 변경 전(좌) 후(우)

     

    여백과 글자 크기 등을 조절하여 전체적으로 답답한 느낌을 줄였습니다.

     

    강조 커버 추가

    커버 스타일을 하나 더 추가하였습니다. 홈 화면에서 큼지막 하게 강조하고 싶은 포스팅이 있을 경우 활용하면 좋을 것 같습니다.

     

    커버 아이템에서 미넴커버 - 스페셜을 선택하시면 됩니다.

     

    다음과 같이 큼지막하게 컨텐츠를 표현할 수 있습니다.

    참고로 썸네일 이미지가 있는 게시물만 정상적으로 표시됩니다.

     

    사이드바 숨기기 옵션

    PC와 같은 넓은 화면에서도 컨텐츠만 더 넓게 보기 위해 사이드바를 숨기는 기능을 만들었습니다.

     

    스킨 편집에서 사이드바 숨기기 기능을 ON 하시면 됩니다. 기본은 OFF 입니다.

     

    그럼 다음과 같이 넓은 화면에서도 사이드바가 사라진 모습을 볼 수 있습니다.

     

    우측 상단 메뉴를 누르면 사이드바를 오픈할 수 있습니다.

     

    사이드바 크기 고정

    블로그 너비를 조정하면 사이드바의 크기도 같은 비율로 늘어나는 것이 그닥 좋아보이지 않아서 본문 영역만 너비가 커지고 사이드바는 300px로 고정하였습니다.

     

    다음과 같이 화면 너비를 1600으로 키워 보겠습니다.

     

    사이드바 크기는 고정이고 시원하게 본문 영역만 넓어진 것을 볼 수 있습니다.

     

    기본 다크 모드 추가

    사용자 변경이 아닌 기본적인 다크 모드를 추가하였습니다.

     

    스킨 편집에서 다음과 같이 기본 다크 모드를 ON 하시면 됩니다. 기본은 OFF 입니다.

     

    다음과 같이 항상 다크 모드로 표현이 됩니다. 이 경우 사용자가 임의로 전환할 수 없습니다.

     

    나눔바른펜 폰트 추가

    다양성을 주기 위해 나눔바른펜 폰트를 추가하였습니다.

     

    다음과 같이 폰트가 잘 적용되었습니다.

     

    기타 수정 사항

    1. 홈 화면 일치하는 광고 타이틀을 변경할 수 있도록 하였습니다.

    2. 커버 글머리를 통일하는 옵션은 불필해 보여 제거하였습니다.

    3. 커버 리스트의 이미지, 메타 정보를 빼고 넣을 수 있도록 하였습니다.

    4. 그 외 자잘한 오류를 수정하였습니다.

     

     

    소개 및 설치 방법

    다음 게시물을 참고하여 설치 바랍니다.

     

    친효 스킨, 고래 스킨 뒤를 이을 티스토리 무료 스킨 제작 프로젝트, 미넴 스킨 소개 및 설치 방법

     

    친효 스킨, 고래 스킨 뒤를 이을 티스토리 무료 스킨 제작 프로젝트, 미넴 스킨 소개 및 설치 방

    기본 제공 스킨을 나름대로 고쳐 쓰다가 만족하지 못하고 그냥 새로 만들었습니다. 여태까지 블로그를 하면서 적용한 많은 기능들을 대부분 포함하였으니 누군가에게는 상당히 유용한 스킨이

    sangminem.tistory.com

     

    업데이트 후 적용이 잘 안 되신다면 강제 새로고침을 해보세요. 단축키는 윈도우10 크롬 기준 Ctrl+Shift+R, 맥 크롬 기준 Command+Shift+R 입니다.

     

    미넴 스킨 2.2 버전 다운로드

    파일 제거 됨

    BIG

    댓글38

    • 2021.04.20 08:43

      비밀댓글입니다
      답글

      • 네 감사합니다 ㅎㅎ 모바일 화면에서 목차에 약간의 문제가 있어서 재업로드 하였으니 이미 받으셨다면 다시 받아서 사용해 주시길 부탁드릴게요. common.js 파일만 덮어 씌우셔도 됩니다.

    • LunaCell 2021.04.20 13:21 신고

      흠좀무... 업데이트를 안할래야 안할 수가 없겠군요.
      답글

    • 아미넴님 매번 휴대폰으로만 눈팅하다가 컴으로 봤더니 개발자 답게 홈페이지가 굉장히 화려했네요 ㅎㄷㄷ!!!!
      답글

    • teum♡ 2021.04.21 13:50 신고

      어엄지이 척~~~~ 👍
      답글

    • 오랜쥐 2021.04.25 18:14 신고

      와우 대박입니다아...잘 쓰겠습니다 정말정말 감사드립니다!
      답글

    • 서근 2021.04.26 04:45 신고

      미넴님 안녕하세요. 스킨에대해 방황을 많이 하다가 미넴님이 만드신 스킨으로 정착했습니다 :)
      좋은 스킨 만들어주셔서 정말 감사드립니다.

      그런데 Feedback 2.2 버전을 다운받아서 적용을 하고 보니 자동목차를 생성한 toc 들은 펼치기/숨기기 버튼이 두개씩 생겨있는 현상이 있습니다. 또 플로팅목차를 오른쪽에 나타나게 하고싶은데 왼쪽으로만 나타나고 있습니다 ㅠㅠ 스킨편집 부분에서 [플로팅 목차 오른쪽 등장] 을 체크 해도 똑같네요..
      답글

      • 아네 안녕하세요. 먼저 좋은 말씀 감사드리구요 ㅎ 피드백 버전은 예고없이 업뎃이 돼서 아마 다시 받으시면 상당부분 개선이 됐을겁니다.
        목차는 모바일이나 좁은 화면에서는 최적화를 위해 셋팅된대로 동작을 안할 수도 있습니다.

        다시 받아 적용해보시고 그래도 문제 있는 부분이 있으면 말씀 부탁드릴게요.

      • 서근 2021.04.26 14:48 신고

        아네 새로 다운받아서 적용해보겠습니다. 감사합니다.

        혹시 플로팅 목차는 계속 펼침 상태로 둘수는 없을까요? 접혀있는 상태로 나오는데 이 목차를 수동으로 펼친 후에 최상단으로 다시 올라가면 플로팅 목차가 사라지고 난 후에 다시 접힌 상태로 나와서요. common.js 부분에서 어느부분을 수정해야 할까요?

      • initFloatingTocNew 함수의 toc-body 부분에서 display 속성 값을 none으로 한 부분을 제거하면 됩니다.
        그리고 appendTocNew 함수에서 펼침 상태에 맞게 소스를 수정할 수 있습니다.

      • 서근 2021.04.26 20:24 신고

        정말 감사합니다. 아미넴님 덕분에 수정 완료 했습니다 :) 다시한번 좋으 스킨 배포해주셔서 감사드립니다. 항상 복 받으세요 😁

    • 수나 2021.04.26 18:54

      안녕하세요. 혹시 구글드라이브에 올린 mp3파일로는 음악 재생이 불가능 한가요?
      html audio는 https://sites.google.com/site/gdocs2direct/ 이사이트에서 변환해서 가져오면 재생이 가능한걸로 아는데
      미넴스킨의 플레이어는 작동이 되질 않아서요 ~ ㅎㅎ
      답글

      • 안녕하세요. 원칙적으로 리소스가 올라가 있는 도메인과 재생하려는 사이트의 도메인이 다르면 CORS 정책에 의해 접근이 제한됩니다. 브라우저에 강제로 재생하게 하는 옵션이 있기도 하지만 본인에게만 적용되는 사항이므로 무의미합니다.

        허용을 하려면 서버 설정을 변경해야 하는데 티스토리 서버는 저희가 마음대로 접근할 수는 없으므로 불가능하다고 봐야 합니다.

        다음 링크 참고해 보세요.

        https://developer.mozilla.org/ko/docs/Web/HTTP/CORS

    • |||||||||||||| 2021.04.28 18:34 신고

      안녕하세요. 훌륭한 블로그 스킨 개발해서 공유해주셔서 너무 감사합니다. 일단 기본적인 항목들 설정을 하고 몇가지 수정해서 사용하려고 합니다. 현재 제 블로그에 적용 중인데 문의사항이 있어서 이렇게 댓글을 남깁니다. 사용한 버전은 이 게시물에서 다운 받은 V2.2이고, 사용한 브라우저는 크롬 입니다.
      우선 기본적인 항목들을 설정을 해보고 기능을 보고 선택을 하고 있는데, '목차 설정'이 이상해서 댓글 남깁니다. 설정 내용은 아래와 같습니다.
      자동목차 사용 - 사용
      너비 꽉 채우기 - 사용
      기본 목차 접기 - 사용
      플로팅 목차 스타일 - 신 버전
      플로팅 목차 오른쪽 등장 - 사용

      이렇게 설정을 했지만, 플로팅 목차가 나오지 않습니다.
      구 버전으로 선택을 하면 플로팅 목차가 나오기는 하지만, 본문에서 목차가 접혀진 목차 1개와 펼쳐진 목차 1개로 총 2개의 목차가 나옵니다.
      혹시 몰라서 스킨을 다시 다운받아 적용해도 동일한 증상입니다. 혹시 어느부분을 보면 좋을지 알려주실수 있나요?
      댓글을 쓰다보니 위에 비슷한 질문 댓글이 있네요 ㅎㅎ
      좋은 스킨을 개발해 주셔서 감사합니다.
      답글

      • 안녕하세요. 좋은 말씀 감사드리구요. 다음 블로그에 2.2 버전을 똑같이 적용해 보았는데 저는 잘 되네요.
        https://miniminem.tistory.com/2

        일단 피드백 버전에서 상당부분 개선하였으니 계속 안 되시면 번거로우시더라도 피드백 버전으로 다시 적용 후 사용해 보시길 바랄게요.
        https://sangminem.tistory.com/519

      • |||||||||||||| 2021.04.29 15:01 신고

        오 빠른 답변 감사합니다. 그러게요 아미넴이 알려주신 블로그에서는 플로팅 목차가 잘나오네요 ㅜㅜ 물론 현재 이 블로그에서도 잘나옵니다.
        제 블로그에 다시 미넴 스킨 2.2와 피드백을 다운 받아서 적용을 해봤는 동일한 증상이네요 ㅜㅜ 브라우저도 바꿔가면서 해봤는데 여전히 플로팅 목차가 나오지 않네요. 제 블로그만 이상한가봐요 ㅜㅜ

      • 헉 이상하네요 나중에 시간되면 라빈후드님 블로그 점검 좀 해보고 다시 말씀드릴게요

      • |||||||||||||| 2021.04.29 16:58 신고

        감사합니다.

        제 블로그에서는 F12를 눌러서 코드를 보면 아래와 같습니다.

        <div class="floating-toc-new" style="height:1px;">
        ::after
        </div>
        딱 이렇게만 나옵니다.

        하지만 아미넴님 블로그는
        <div class="floating-toc-new" style="height: 200px; opacity: 1; top: 70px;">
        <div id="toc-title">...</div>
        <div id="toc-body" "="">...</div>
        ::after
        </div>

        이런 형태로 나오네요. 초보이다 보니 코드가 어렵네요 ㅎㅎ

      • 아 죄송합니다. 테스트가 미흡했네요.
        저는 목차 태그를 직접 넣어서 그 위주로 테스트해서 자동 목차 적용 시 약간 잘못된 부분이 있었습니다.

        수정해서 다시 올려놓았으니 재적용하셔도 되고 여러 설정을 다시 하기 번거로우시면 common.js 파일만 재업로드 하셔도 됩니다. 업로드 하신 뒤에는 꼭 강제 새로고침을 해 주시기 바랄게요.

      • |||||||||||||| 2021.04.30 15:00 신고

        감사합니다. 오늘 저녁에 적용해보고 피드백 드리겠습니다. ^^

      • |||||||||||||| 2021.04.30 23:10 신고

        번거롭게 한것 같아 죄송습럽네요 ^^
        2.2버전과 피드백 버전 둘다 적용해봤습니다.
        2.2버전은 예전과 동일하고, 피드백 버전은 플로팅 목차가 적용 되었네요.
        사이드바 고정되는 것과 고정 되지 않는 것도 선택하면 좋을것 같습니다. ^^ 지극히 개인적인 의견입니다. ^^
        감사합니다.

      • 2.2 버전도 수정해 놓았는데 캐시 문제로 안 됐을 가능성이 높아 보입니다. 어쨌든 잘 되신다니 다행이구요.
        사이드바는 옵션 기능 고려해 보겠습니다 ㅎ

    • 아이와우 2021.05.02 13:24 신고

      미넴스킨 잘 쓰고 있습니다. 서치 콘솔 상에서 CLS 0.1초과 URL이 100개가 넘습니다. 이정도는 티스토리라서 원래 그런건지 아니면 다른 문제가 있는건지 혹시 아시나요?
      답글

      • 감사합니다. 원래 건이 없다가 미넴스킨 사용 이후에 그렇게 발생한건가요?

        https://developers.google.com/speed/pagespeed/insights/

        위의 사이트에서 점검을 하면 대부분 양호하게 나오는데 사용자 환경은 각각 다르니 여러 환경적인 요인이 있어 보입니다. 또한 광고나 이미지를 불러오면서 엘리먼트 시프트가 발생하는 경우도 있습니다.

        이러한 현상이 최소화될 수 있도록 좀 더 연구해 보도록 할게요!

    • 안녕하세요. 미넴스킨 V2.2 로 변경하고 너무 만족스럽게 사용하고 있습니다.
      제 블로그에서 목차가 정상동작 안하는것 같은데 확인 부탁드려도 될까요?ㅠ
      ! 목차가 일부 페이지만 나타납니다.

      - 목차O : https://didalsgur.tistory.com/entry/필립스-278C4Q-IPS-LED-무결점-구매-후기-및-간단한-리뷰
      - 목차X : https://didalsgur.tistory.com/entry/R-패키지-오프라인-설치-방법-miniCRAN

      잠도 못자고 건드리고 있는데 점점 더 망가질까봐 질문 드리게 되었네요..
      (혹시나 제가 잘못건드려서 발생한 거라면.. 미리 사과드립니다..ㅠ)
      답글

      • 안녕하세요. 어떻게 수정하셨는지는 모르겠지만 글마다 태그 구성이 달라져 있네요.

        일단 임시방책으로 common.js 파일의 makeToc 함수 내에 있는 .tt_article_useless_p_margin를 전부 .content-article으로 변경해 보세요.

        저도 티스토리 구조를 100% 이해하고 있는 건 아니라서 왜 이런 현상이 일어났는지까지는 정확히 파악이 안 됩니다.

      • 답변 감사합니다!

        태그 구성은 기존에 사용했던 CCZ-CROSS가 heading을 3,4,5로 사용하여 기존 글들을 수정하고 있어 그렇습니다.

        말씀해주신 common.js 파일을 수정하니 일단 목차는 출력되는 것을 확인했는데.. 좀 더 살펴보니 제가 글을 생성하면 .tt_article_useless_p_margin 태그가 안생기네요..

        제가 주로 markdown으로 글을 써서 그런가 했는데, 티스토리 에디터로만 테스트해도 컨텐츠가 .tt_article_useless_p_margin에 담기지 않네요 ㅎㅎ

        js는 잘모르지만.. 좀 더 이것저것 건들여보겠습니다. 좋은 스킨 감사합니다 ^^

      • tt_article_useless_p_margin 클래스가 생기는 경우와 안 생기는 경우에 대해 정확히 알 필요가 있을거 같습니다.
        저도 시간이 되면 원인을 좀 찾아보도록 할게요.
        감사합니다.

      • 원인을 찾았습니다. ^^
        티스토리 - 글설정 에서 문단간격을 사용하지 않는다고 해야 tt_article_useless_p_margin 태그가 활성화 된다고 합니다.
        (출처 : https://est0que.tistory.com/2115)

        테스트 해보니 새로운 글부터는 기존 목차태그가 잘 적용되네요! (에디터, markdown 모두)

        기존 글들을 다 수정해야 할지.. 걱정이 많지만.. 그래도 속시원하네요 ㅎ

      • 아 그렇군요. 알려주셔서 감사해요.
        글을 다 수정하기보단 제가 위에 알려드린 대로 목차 기능을 수정하시는 편이 나아 보입니다.

    • 미넴스킨 덕분에 제 블로그가 조금 이뻐진 것 같아서 매우 만족합니다ㅎㅎㅎ
      하나 질문이 있는데요, 사이드바의 글자크기 조절버튼으로 크기를 조절이 가능하긴 한데, 글자 크기의 기본값을 바꿀 수 있는 방법도 있을까요? 제가 못찾는 걸까요?.. 글자크기가 조금 큰 것 같아서 매번 줄이고 있는데, 고정이 되진 않더라구요!

      항상 감사히 쓰고 있습니다 감사합니다~!
      답글

      • 미넴스킨 사용해주셔서 감사합니다.
        기본값으로 돌아가는건 세번째 버튼입니다. 처음엔 바꾼 크기를 고정되게 했었는데 득보다는 실이 많아서 뺐습니다.
        기본값 자체를 바꾸고 싶으신거면 css에 대한 이해가 조금 필요한데 제가 지금 폰으로 접속한거라 정확한 설명은 어렵네요.
        필요하시면 나중에 추가로 말씀드릴게요.

      • 앗 넵 기본값 자체를 바꾸고 싶습니다! font-size 뭐 이렇게 검색해봤는데 너무 많아서 어딜 건드려야하는지 모르겠네요ㅠㅎㅎ 설명해주시면 도전해볼게요! 감사합니다~!

      • 일단 전체적인 글자 크기는 스킨 편집 > html 편집 > css 에서

        html {
        font-size: 18px !important;
        }

        부분의 18px 값을 바꿔주시면 되는데 임의로 바꾸시면 각 요소마다 어색한 부분의 padding, margin 값 등을 수정해야 돼서 생각보다 손이 많이 갈 수 있습니다.

        미리 예측해서 알려드리긴 어려울 거 같구요. 하시다가 특정 부분을 수정하고 싶으면 도움을 드릴 수는 있을 것 같습니다. 앞서도 말씀 드렸지만 css 기본 개념은 알고 계셔야 수월할 겁니다.

      • 그부분만 바꿨는데 생각보다 어색한부분이 거의 없네요!! 감사합니다😊😊

    💲 추천 글