미넴 스킨 제작 프로젝트

티스토리 미넴 스킨 1.6 업데이트 - 화면 너비 조절

변태 개발자 아미넴 2021. 3. 22.

미넴 스킨 1.6 업데이트 내용은 다음과 같습니다.

 

목차

     

    개선 사항

    먼저 개선 사항 입니다.

     

    화면 너비 조절 기능

    화면을 원하는 너비 만큼 자유롭게 조절 가능합니다. 기본 값은 1080입니다.

     

    기본 값일 경우 화면 너비 입니다.

     

    1200으로 변경해 보겠습니다.

     

    화면이 시원하게 넓어졌습니다.

     

    목차 너비 꽉 채우기 기능

    목차 너비를 꽉 채우기를 원하시는 분이 있어서 옵션을 추가하였습니다.

     

    목차 너비를 꽉 채워 보겠습니다. 현재는 너비 꽉 채우기가 기본 값 입니다.

     

    다음과 같이 목차가 본문 너비에 맞게 꽉 채워졌습니다.

     

    기타 수정 사항

    1. 테두리 적용 시 좁은 화면에서도 테두리가 보이도록 margin을 부여했습니다.

    2. 플로팅 목차의 브라우저 너비에 따른 위치 선정 문제를 수정하였습니다.

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

     

    소개 및 설치 방법

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

     

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

     

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

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

    sangminem.tistory.com

     

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

     

    미넴 스킨 1.6 버전 다운로드

    파일 제거 됨

    BIG

    댓글29

    • 권두손 2021.03.22 23:18 신고

      아미넴님 이거 정말 물건입니다! 그런데 제가 무지해서
      한가지 질문 드리겠습니다.

      제가 방금 1.5 버전을 설치하고, 열심히 세팅했는데,
      방금 1.6버전을 올려주셔서, 이거 업데이트는 어떤 방식으로 해야할까요?
      답글

      • 감사합니다 ㅎㅎ index.xml이 변경되었기 때문에 스킨을 새로 설치하셔야 모든 옵션 이용 가능합니다.

        만약에 임의로 수정하신 부분이 있으시다면 따로 백업 받아두시고 1.6 버전 새로 적용 후 다시 수정하시는 방법 밖에 없습니다 ㅠ

        제가 너무 업데이트를 자주 하는 거 같네요 ㅠㅠ 앞으로 모아 두었다가 한꺼번에 업데이트 하겠습니다.

      • 권두손 2021.03.22 23:24 신고

        애드센스는 또 적용을 시켜줘야겠죠?
        클라이언트랑 슬롯코드 다시 받아서 스킨편집에서 넣어줘야하죠?🥲

      • 네 업데이트 하기 전에 미리 다른 곳에 적어두셨다가 바로 복사 붙여넣기 하시는게 좋을거예요.
        저 같은 경우는 그래서 index.xml에 그 부분에 값을 직접 넣어 놓기도 하는데 그 방법이 좀 어려우시면 비공개 게시물 하나 만드셔서 거기다가 필요한 정보들을 한꺼번에 적어놓으신 다음 새로 바뀔 때마다 복사 붙여넣기 하는 방법을 이용하셔도 좋습니다.

      • 권두손 2021.03.22 23:33 신고

        어렵지 않게 업데이트 했습니다.
        저 같은 사람도 쉽게 할 수 있도록 워낙 잘 만들어 주셔서 ㅎㅎ 감사합니다! 정말 대단하세요!

      • 네네 ㅎㅎ 감사해요~
        유용하게 사용하시길 바랄게요 :)

      • 아 두손님 방금 발견한 문제인데 모바일에서 사이드바쪽 추천 글 일치하는 광고가 조금 잘려 나오네요.

        스킨 편집 > html 편집 > html 에서 139라인
        .sidebar #recommend-ads > ins {width:280px} 을
        .sidebar #recommend-ads > ins {width:280px !important} 으로 변경해 주시면 됩니다.

        스킨 파일도 새로 올려 놓았는데 다시 적용하기 번거로우실 테니 저 부분만 변경해서 사용하세요~

      • 권두손 2021.03.22 23:53 신고

        방금 말씀대로 수정하였습니다!
        모바일로 확인해보니 깔끔하게 잘 보이네요. 감사합니다!

    • 권두손 2021.03.23 08:32 신고

      아미넴님 안녕하세요!
      모바일 환경에서 홈화면 말고 포스팅에 들어가면, 화면에 보이는 영역만큼 옆에 공란이 있더라구요. 그래서 스크롤움직이며 읽다보면 옆에 공란으로 계속 화면이 넘어가게되버리는... 무슨말씀인지 아시죠 그 하얀색 빈페이지가 화면에 보이는 만큼 또 있어요.
      이걸 어떻게 설명드려야하지 ...😅 아이폰입니다!
      답글

      • 아 아이폰에서만 그런가 보네요 ㅠ 아이폰 환경에서 테스트 좀 해볼게요 확인 감사합니다

      • 아이폰 12 프로 맥스에서 테스트 해봤는데 제가 테스트 한 글에서는 그런 현상이 없네요.
        특정 케이스에서만 발생하는 현상일 수도 있을거 같은데 혹시 그런 현상이 일어나는 글 링크 남겨 주실 수 있을까요?

      • 권두손 2021.03.23 10:08 신고

        특정 글에서만 나타나는 현상이 아니라 제 모든 글에서 나타납니다.
        스크롤바가 위아래 올리고 내릴때만 보이는게 아니라 양 옆으로도 바가 보여서, 화면보이는 만큼 공란으로 스크롤이 됩니다. 아이폰 12미니 사파리 브라우저 였습니다!

      • xcode simulator에서 테스트 결과 아이폰12 미니에서도 그런 현상이 없긴한데 os 버전 문제일 수도 있으니 일단 좀 더 확인해 볼게요~

      • 권두손 2021.03.23 10:27 신고

        넵! 추가적으로 어제 서치콘솔에서 돌렸을 때 모바일 환경에서 두가지 오류가 잡혔는데요,

        1. 클릭할 수 있는 요소가 너무 가까움
        2. 콘텐츠 폭이 화면 폭보다 넓음

        이렇게 두 가지가 나왔습니다.
        이미 완벽한 스킨이지만, 좀 더 도움 되실까 말씀드립니다. 감사합니다아미넴님!

      • 네네 말씀 감사합니다.
        그런데 저도 서치콘솔 항상 확인하는데 그런 오류가 없거든요. 일단 더 많은 기기에서 테스트 해보도록 할게요!

      • 일단 추측하기로는 상단 광고 문제 같습니다.
        광고의 크기가 미니 사이즈의 아이폰을 감당하지 못하는 걸로 보여요. 원인은 이거 하나 같은데 일정 사이즈 이하로 작아지면 광고를 아예 게재하지 않거나 사이즈를 줄이는 방법을 생각해 봐야겠네요~

      • 두손님 수정했습니다. css 부분 두 군데 수정하시면 될거 같아요.

        먼저 1598번째 라인 정도 보시면
        .top-ads {
        text-align: center;
        margin-bottom: 10px;
        }

        .top-ads {
        text-align: center;
        margin-bottom: 10px;
        overflow: hidden;
        }
        와 같이 바꿔 주시면 되구요.

        그리고 아무 곳에나
        .revenue_unit_wrap {
        overflow: hidden;
        }
        이 부분도 추가해 주세요.

        스킨 파일도 수정해서 올려 놓았습니다.

      • 권두손 2021.03.23 13:21 신고

        광고를 게재하지 않는 걸로 수정하신건가요? 퇴근하고 수정해야겠네요! 감사합니다 아미넴님!

      • 네 기본적으로는 336px 미만 해상도에 고정 크기 광고가 들어갈 수 없는 건 맞아서 그렇게 해야될거 같아요.
        transform 속성으로 크기를 줄일 수 있긴한데 깔끔하지 않을 수도 있어서 그건 추후 고려해 보도록 하겠습니다.

      • 광고가 화면보다 커지면 그냥 스크롤이 생기게 바꿨어요. 고칠 부분이 좀 많은데 필요하시면 적용하시기 바랄게요.

        일단 HTML 부분에서
        <!-- 상단 광고 2개 삽입 start -->
        ...
        <!-- 상단 광고 2개 삽입 end -->

        이 부분을 찾아서

        <!-- 상단 광고 2개 삽입 start -->
        <s_if_var_content-google-ads>
        <div class="top-ads">
        <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
        <div id="ad-top-left" class="revenue_unit_item adsense">
        <ins class="adsbygoogle top-left"
        data-ad-client=""
        data-ad-slot=""
        data-ad-format="rectangle"
        data-full-width-responsive="true"></ins>
        <script>
        if($(window).width() < 710) {
        $('#ad-top-left').remove();
        } else {
        (adsbygoogle = window.adsbygoogle || []).push({});
        }
        </script>
        </div>
        <div id="ad-top-right" class="revenue_unit_item adsense">
        <ins class="adsbygoogle top-right"
        data-ad-client=""
        data-ad-slot=""
        data-ad-format="rectangle"
        data-full-width-responsive="true"></ins>
        <script>
        (adsbygoogle = window.adsbygoogle || []).push({});
        </script>
        </div>
        </div>
        </s_if_var_content-google-ads>
        <!-- 상단 광고 2개 삽입 end -->

        으로 교체하시구요.
        css에서 .top-ads 부분을 찾아서 /* toc style */ 직전 부분까지 다음 코드로 싹 교체 하시면 됩니다.

        .top-ads {
        display: flex;
        margin-bottom: 10px;
        }
        #ad-top-left {
        margin: auto;
        overflow: auto;
        }
        #ad-top-right {
        margin: auto;
        overflow: auto;
        }
        .adsbygoogle.top-left {
        display: block;
        width: 336px;
        height: 280px;
        }
        .adsbygoogle.top-right {
        display: block;
        width: 336px;
        height: 280px;
        }
        .revenue_unit_wrap {
        overflow: auto;
        }

        소스 수정하여 다시 업로드 해 놓았으니 다운 받으셔서 참고하셔도 됩니다.

    • 요즘아빠 :) 2021.03.23 12:52 신고

      와~매번 기능이 발전하는군요 ㅎ 이렇게 빠른 업데이트를 해주는 아미넴님이 최고입니다 :) 혹시 메인에 전체글에서 선택한 카테고리 글들만 보여줄 수는 없을까요?
      답글

      • 안녕하세요. 감사합니다 ㅎㅎ
        커버 기능을 만들면 될 것 같긴한데 블로그 특성상 메인을 타고 들어 오는 사람이 많지는 않을 것으로 판단해서 일단 메인은 크게 신경을 안 썼거든요. 추후 기능을 만들어 보도록 하겠습니다!

        근데 사실 커버 기능을 활용해도 만들 수 있는지는 아직 잘 모르겠습니다. 봐야 알 거 같아요. 아마 다른 스킨에서 비슷한 기능을 제공하고 있다면 가능할 것 같기는 합니다.

        (내용 추가)
        찾아보니 커버 기능 설명에 아래 같은 내용이 있는거 봐서 그런 기능은 없을거 같기도 하네요 ㅠ
        category: 사용자의 카테고리를 알 수 없으므로 전체(ALL), 공지사항(NOTICE)만 사용할 수 있습니다.

      • 요즘아빠 :) 2021.03.23 13:27 신고

        빠른 피드백 감사합니다 :) 제가 지금 북클럽을 쓰고 있는데 커버 기능에서 원하는 카테고리만 가져올 수 있어서 가능한 지 물어봤었는데 안되는거였군요 ㅜ 컨텐츠들이 많이 늘어나면 아미넴님 스킨으로 바꿀려구요 ㅎㅎ

      • 아 북클럽에서 되고 있나요? 제가 그 부분을 정확히 안 봐서 이따가 북클럽 스킨 참고해 볼게요~
        감사합니다 ㅎㅎ

      • 기능은 확인했어요 ㅎㅎ 조만간 간단하게 만들어 보겠습니다

      • 요즘아빠 :) 2021.03.24 09:12 신고

        오오~확인감사합니다!! 새로운 미넴스킨 기대하고 있겠습니다 ㅎㅎ

      • 커버 기능 만들어 보았습니다. 보시고 괜찮으면 한 번 써 보세요 ㅎㅎ

    • teum♡ 2021.03.24 11:41 신고

      ㅎㅎㅎ아미넴 님~ 짱 ~! ^^
      답글

    • 유왕~~~ 목차 너비 꽉 채우는 기능😆👍👍👍
      답글

    💲 추천 글