미넴 스킨 제작 프로젝트/업데이트

티스토리 미넴 스킨 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 버전 다운로드

    파일 제거 됨

    반응형

    댓글25

    💲 추천 글