미넴 스킨 제작 프로젝트

티스토리 미넴 스킨 2.0 업데이트 - 커버 아이템 추가

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

미넴 스킨이 2.0으로 업데이트 되었습니다.

중요한 신규 기능이 추가되어 버전을 2.0으로 내 놓았습니다.

 

많은 분들의 지속적인 관심 감사합니다.

 

목차

     

    신규 기능 및 개선 사항

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

     

    커버 아이템 추가

    사실 처음에는 홈 화면이 크게 중요하지 않다고 생각을 하여 커버 아이템을 만들지 않았는데 은근히 원하는 분들이 많았고 블로그 용도에 따라 홈 화면도 중요하게 쓰일 수 있다는 생각을 하게 되어 추가하였습니다. 직접 입력한 글은 아직 지원되지 않습니다.

     

    스킨 편집 화면에서 다음과 같이 커버로 바꾸면 이용이 가능합니다.

     

    그리드 형태 커버

    커버 아이템을 미넴 커버 - 그리드로 선택하면 됩니다.

     

    최신글 선택 시 제공하는 스타일을 그대로 따라가도록 하였습니다.

     

    리스트 형태 커버

    커버 아이템을 미넴 커버 - 리스트로 선택합니다.

     

    다음과 같이 리스트 형태의 스타일을 가지는 커버 아이템 입니다.

     

    커버 아이템 타이틀 글머리를 수정할 수도 있습니다. 기본은 해시태그 아이콘입니다. 그리드는 기존 옵션을 이용하여 다양한 형태로 수정할 수 있지만 리스트는 단일 스타일 입니다.

     

    다음 사이트에서 유니코드 값을 확인하실 수 있습니다.

     

    Font Awesome - Free Icons

     

    Font Awesome

    The world’s most popular and easiest to use icon set just got an upgrade. More icons. More styles. More Options.

    fontawesome.com

     

    상단 메뉴 스크롤 기능 추가

    상단에 메뉴가 좁은 모바일 화면에서 스크롤로 넘겨 볼 수 있습니다. 기존 버전에서 아이폰 사파리에서 문제가 있어서 수정하였습니다.

     

    좁은 화면 광고 게재 가능

    좁은 화면에서 광고를 빼는 것이 나을 지 어떻게든 유지하는게 나을 지 고민하다가 일단은 유지하는 쪽으로 방향을 잡고 고정 크기의 광고 사이즈가 화면보다 클 경우 스크롤을 이용하여 다 담았습니다. 크게 이질감이 없이 배치가 무난하여 당분간은 이대로 유지하고 추후 안 좋은 의견이 많을 경우에 방법을 다시 연구해 보겠습니다.

     

    CLS 관점에서 애드핏, 애드센스 광고 종류에 따라 높이는 고정 시켜주는 것이 좋습니다. CSS에서 다음 부분을 사용할 광고 크기에 맞게 바꿔주세요. 참고로 저는 상하단 광고는 애드핏을 본문 상단 2개 광고는 애드센스를 이용하기 위해 다음과 같이 고정하였습니다.

    #upper .revenue_unit_wrap {
    	height: 105px !important;
    }
    .tt_article_useless_p_margin .revenue_unit_wrap {
    	height: 280px !important;
    }
    #lower .revenue_unit_wrap {
    	height: 105px !important;
    }

     

    그리고 사이드바의 광고는 애드센스와 애드핏을 둘 다 적용할 경우 revenue_unit_wrap 클래스에서는 구분을 할 수가 없어서 하위 클래스를 지정하여 너비와 높이 값을 주었습니다. revenue_unit_wrap 클래스에 직접 고정 값을 주는 것보다 흔들림이 있긴 하지만 딱히 다른 방법이 떠오르지 않아서 일단 이렇게 조치하였습니다.

    .sidebar .revenue_unit_wrap .adsense {
        width: 300px !important;
        height: 600px !important;
        margin-left: auto;
        margin-right: auto;
    }
    .sidebar .revenue_unit_wrap .adfit {
        width: 300px !important;
        height: 255px !important;
        margin-left: auto;
        margin-right: auto;
    }

     

    따로 설정을 안 해도 큰 문제는 없지만 DOM이 동적으로 변하는 것이 웹 지표에 좋지 않은 영향을 주기 때문에 웬만하면 고정 값을 이용하시는 것이 좋습니다.

     

    기타 수정 사항

    1. 모바일 화면에서 다국어 번역 시 스크롤 생기는 현상을 수정하였습니다.

    2. 좁은 화면 또는 모바일에서 화면 구성을 좀 더 최적화 하였습니다.

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

     

    소개 및 설치 방법

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

     

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

     

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

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

    sangminem.tistory.com

     

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

     

    미넴 스킨 2.0 버전 다운로드

    파일 제거 됨

    BIG

    댓글25

    • 권두손 2021.03.25 22:07 신고

      대단하십니다아미넴님, 스킨을 사용하면서 가장 만족하는 부분은 모바일 환경에서의 최적화입니다. 그리고 자동목차입미다.
      답글

    • LunaCell 2021.03.26 15:20 신고

      안녕하세요 아미넴님 혹시 다양한 글꼴을 추가해서 스킨편집 설정에서 글꼴을 고를 수 있도록 건의가 가능할까용?
      답글

      • LunaCell 2021.03.26 15:29 신고

        오우... 적용 중에 버그 하나를 발견했습니다.

        자동 음악을 설정했는데 음... 플레이 버튼을 눌러도 작동을 하지 않는군요 혹시 따로 만줘져야 할 부분이 있을까용?

      • 안녕하세요. 글꼴은 기본/이롭게바탕체 정도로는 옵션으로 적용해도 괜찮을거 같은데 워낙 취향을 많이 타는 부분이라 직접 css를 수정하는 편이 더 나아 보여요 일단 생각을 좀 더 해보겠습니다 의견 감사해요 ㅎ

        배경음악은 설명에도 나와있듯이 URL이 길 경우 잘릴 수가 있는데 그런 케이스가 아닌지 확인 부탁드릴게요.

        https://sangminem.tistory.com/506#%EB%B0%B0%EA%B2%BD%EC%9D%8C%EC%95%85_%EC%84%A4%EC%A0%95_%EA%B8%B0%EB%8A%A5

      • LunaCell 2021.03.26 19:30 신고

        음... URL을 짧게 했는데 잘 안되는군요. 이 부분은 계속 테스트 해봐야 겠습니다.

      • 네 복사 붙여넣기 할 때 URL이 잘리는지 정확히 확인할 필요가 있습니다.

        그리고 사이트 방문해 보니 홈 상단 광고가 너무 좁게 스크롤이 생기는데 그 부분은 광고 크기에 맞게 수정을 좀 해주셔야 합니다. 본문에 내용 추가하였으니 참고 바랄게요~ CLS를 크게 신경쓰지 않는다면 그 부분을 아예 제거해 주어도 상관은 없습니다.

      • LunaCell 2021.03.26 22:54 신고

        홈 상단 광고는 티스토리 자체적으로 탑재된 자동 광고 기능을 쓰고 있는데 따로이 설정을 해주어야 하나용?

      • 아 자체 광고 기능을 사용하는 것과 CSS로 그 부분의 스타일을 변경해 주는 건 다른 의미입니다.

      • LunaCell 2021.03.26 23:35 신고

        음~ 뭐 어떻게 할 수 있는 부분이 없는거군요. 티스토리에서 따로 만져주지 않는 이상은... 스킨 편집 기능에서 "목록 상단 광고 표시" 기능을 나중에 추가할 의향은 있으신가용?

      • 아뇨.. 잘못 이해하신 것 같은데 자체 광고 게재 기능을 이용하더라도 스타일은 따로 설정할 수 있다는 말을 한겁니다 ㅎㅎ

      • LunaCell 2021.03.26 23:46 신고

        아... 그렇군요. 저는 또 자체 광고 기능을 하게 되면 CSS로 변경을 못한다는건줄 이해했습니다. 아직 HTML 웹 코드에 지식이 없는 사람이다보니 그냥 이대로 써야 될 것 같네요 ㅋㅋㅋ

      • 2.1 베타버전에서 말씀하신 부분에 대해 개선했습니다. 읽어보시고 사용 부탁드릴게요!

        https://sangminem.tistory.com/519

      • LunaCell 2021.03.27 16:01 신고

        감사합니다. 지금 밖에 회의중이라 나중에 집에 들어가서 문제가 생긴다면 즉각적으로 피드백 넣도록 하겠습니다. 항상 고맙습니다.

    • teum♡ 2021.03.26 18:12 신고

      하트하트~! ㅎㅎㅎ 오늘도 잘보고 갑니다 주말 잘보내세요
      답글

    • 2021.03.27 11:11

      비밀댓글입니다
      답글

      • 안녕하세요. 조언 감사합니다.

        저도 그렇다고 생각은 하는데 만들어 놓은 기능을 쌓아놓고 있기도 아쉽고 눈에 띄는 단점을 그대로 두기도 찝찝해서 ㅎㅎ 일단 앞으로는 베타 버전으로 내놓고 정식 버전 업데이트는 한달 주기로 하도록 하든지 다른 방안을 좀 더 강구해 보도록 할게요!

        아마 지금은 초기라서 잦은 업데이트가 생기는 것 같고 자리 좀 잡히면 점점 주기가 길어질 것으로 기대하고 있습니다.
        감사합니다 :)

    • LunaCell 2021.03.28 19:49 신고

      미넴님 안녕하세요!

      2.0 스킨 적용 중에 표 사용하고 문제가 생겨 댓글 남기게 됐습니다.

      https://lunacellstone.tistory.com/118

      아래로 내려보시면 Q code 둘째 셋째 자리... 라는 제목의 표가
      지금 3번 수정하였음에도 불구하고 초기에는 괜찮다가 시간이 지나니 표가 바깥으로 이탈하는 현상이 벌어지고 있습니다.

      문제는 바로 아래의 표는 또 정상적으로 표시가 되고 있어요.
      이 현상이 티스토리 자체 문제인지 스킨의 문제인지 확실하게 알기가 어렵습니다. F12 눌러서 개발자 모드를 켜도 차이점이 없는데 어떤 것이 문제일까요?
      답글

      • 안녕하세요. 스킨 문제 맞는거 같습니다 ㅠ

        제가 글에 표를 잘 사용하지 않아서 테스트가 부족했는데 보완하면 말씀드릴게요~

        감사합니다!

      • LunaCell 2021.03.28 19:54 신고

        감사합니다!

      • 다른 스킨에서도 동일한 현상이 일어나서 확인해보니 텍스트가 한 줄이 너무 길게 들어가서 그렇네요.
        그래도 정상적으로 보이게 하는 방법이 없진 않을거 같은데 일단 텍스트를 수정하시는 편이 더 나아 보입니다.

        Transmissometer (specify runway and, where applicable, designator(s) of transimissometer(s))

        이 부분이 문제인데   특수문자 제거를 위해 메모장에 붙여 넣었다가 다시 복사 붙여넣기 해 보세요.

        +추가
        아래 문서 살펴보니  는 강제로 줄바꿈 하지 않는 문자네요. 다른 방법은 없을 것 같습니다 ㅎㅎ
        https://namu.wiki/w/NBSP

      • LunaCell 2021.03.28 20:13 신고

        감사합니다. 한번 수정해보겠습니다.

      • LunaCell 2021.03.28 20:14 신고

        수정 완료 감사합니다!!! 문제 해결됐습니다.

      • 네네 다행입니다!

    💲 추천 글