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

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

    파일 제거 됨

    반응형

    댓글

    💲 추천 글