미넴 스킨 제작 프로젝트

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

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

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

 

스킨별로 장단점은 존재하겠지만 미넴 스킨만의 차별점은 분명히 있습니다. 사용자 분들의 피드백을 통해 지속적으로 발전해 나갈 것 임을 약속 드립니다. 서로 윈윈 전략이라고 생각해 주셨으면 좋겠습니다.

 

주의) 참고한 스킨이 있긴 하지만 완전 새로 만든 것이어서 미처 확인하지 못한 부분이 있을 수 있습니다. 만에 하나 이상이 있을 경우 복원을 위해 기존 스킨은 백업하시고 이용 부탁드립니다. 그리고 기존 블로그에 적용하였던 중요한 소스 코드나 데이터가 있으면 필히 따로 저장해 두세요.

본 스킨을 이용하면서 발생하는 불이익에 대해서는 제작자가 책임지지 않음을 밝힙니다. 제 블로그에 적용되어 있으니 충분히 검토해 보시고 사용 바랍니다.

최신 브라우저를 기준으로 테스트를 했기 때문에 오래된 기기에서는 제대로 동작하지 않을 수 있습니다. 크롬, 엣지 등 크로미움 기반 브라우저에서 최적화 되었습니다.

기존 버전 사용하다가 최신 버전으로 업데이트를 하시는 분들은 커스터마이징 한 부분이나 설정 값들을 필히 백업하시고 적용해 주세요.

 

당부의 말씀) 추가 수정은 자유이지만 최소한 하단 푸터의 스킨 정보(Mynem Skin x.x.x)는 그대로 유지해 주시길 부탁드립니다. 무분별하게 이용하는 사람이 많이 보일 경우 앞으로는 그냥 수정해서 혼자만 사용하겠습니다.

 

제가 즐겨 쓰던 스킨은 북클럽 스킨이었습니다. 따라서 그 영향을 많이 받았습니다. 관심 있으신 분은 다음 글도 읽어 보세요.

 

고래스킨, 친효스킨 둘러 보고 다시 북 클럽 스킨으로 돌아온 이유

 

고래스킨, 친효스킨 둘러 보고 다시 북 클럽 스킨으로 돌아온 이유

티스토리를 시작한 이후 초반에 기본 제공 스킨을 이것 저것 사용해 보면서 정착한 스킨이 바로 북 클럽 스킨이었습니다. 그런데 너무 오래 사용했나 봅니다. 갑자기 밀려오는 식상함 때문에 신

sangminem.tistory.com

 

 

목차

     

    업데이트 히스토리

    (2021.09.23) 티스토리 미넴 스킨 2.5.7 업데이트 - 구글 광고 게재, 배경음악 기능 개선

    (2021.09.19) 티스토리 미넴 스킨 2.5.6 업데이트 - 다크 모드 색상 별도 설정

    (2021.09.17) 티스토리 미넴 스킨 2.5.5 업데이트 - 애드센스 광고 자동 새로고침 기능 추가

    (2021.09.16) 티스토리 미넴 스킨 2.5.4 업데이트 - 앵커 광고가 플로팅 버튼 가리는 현상 개선

    (2021.09.15) 티스토리 미넴 스킨 2.5.3 업데이트 - 모바일 폰트 크기 수정

    (2021.09.14) 티스토리 미넴 스킨 2.5.2 업데이트 - 인피드 광고 설정 옵션 추가

    (2021.09.12) 티스토리 미넴 스킨 2.5.1 업데이트 - 링크 URL category 부분 제거

    (2021.09.09) 티스토리 미넴 스킨 2.5.0 업데이트 - 카테고리 접기 기능 추가

    (2021.09.07) 티스토리 미넴 스킨 2.4.2 업데이트 - 플로팅 목차 사용 여부 설정

    (2021.08.28) 티스토리 미넴 스킨 2.4.1 업데이트 - 이미지 타이틀 이슈 조치

    (2021.06.15) 티스토리 미넴 스킨 2.4 업데이트 - 프로필, 공유 기능 추가

    (2021.05.31) 티스토리 미넴 스킨 2.32 업데이트 - 공감 버튼 메시지 이슈 해결

    (2021.05.16) 티스토리 미넴 스킨 2.31 업데이트 - 제목 서식 긴급 수정

    (2021.05.13) 티스토리 미넴 스킨 2.3 업데이트 - 다크모드, 사이드바 개선

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

    (2021.04.03) 티스토리 미넴 스킨 2.1 업데이트 - 다크 모드 추가

    (2021.03.27) 티스토리 미넴 스킨 피드백 버전 - 상시 업데이트

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

    (2021.03.22) 티스토리 미넴 스킨 1.6 업데이트 - 화면 너비 슬정

    (2021.03.20) 티스토리 미넴 스킨 1.5 업데이트 - 배경음악 설정

    (2021.03.18) 티스토리 미넴 스킨 1.4 업데이트 - 스크롤 최상단 이동

    (2021.03.17) 티스토리 미넴 스킨 1.3 업데이트 - 썸네일 로고 설정

    (2021.03.16) 티스토리 미넴 스킨 1.2 업데이트 - 자동 목차

    (2021.03.15) 티스토리 미넴 스킨 1.1 업데이트 - 공감 버튼 꾸미기

     

    간단한 프리뷰

    먼저 스킨을 적용한 데모 블로그 입니다. 현재는 제 블로그에도 적용이 되어 있지만 고정적인 데모 사이트도 필요할 것 같아서 준비했습니다.

     

    미넴 스킨 적용 데모 블로그

     

    미리 해봤다면 좋았을 텐데

     

    armynem.tistory.com

     

    적용한 후 홈 화면 전체 글 모습입니다. PC와 모바일의 레이아웃 변화를 최소화 하기에 좋은 배치 같아서 채택하였습니다.

     

    메인 일치하는 광고입니다. 현재는 옵션으로 켜고 끌 수 있게 해 놓았습니다.

     

    글 본문 입니다. 군더더기 없이 표현하려고 나름 신경 써 보았습니다. 옵션을 통해 글 상단에 광고 2개를 쉽게 위치시킬 수 있도록 만들어 놓았습니다.

     

    댓글창도 나름 깔끔하게 바꿔 보았습니다.

     

    모바일에서는 다음과 같이 심플하게 표현이 됩니다. 우측 상단에 메뉴 버튼은 고정적으로 따라다닙니다.

     

    모바일은 화면이 작으므로 좌측에 있던 사이드바는 다음과 같이 슬라이드 메뉴로 바뀌어 보였다 숨겼다 할 수 있도록 변경하였습니다.

     

     

     

     

    미넴 스킨 설치 방법

    일단 어떻게 설치하는 지 알려 드리고 하나 하나 더 살펴 보겠습니다.

     

    미넴 스킨 다운로드

    다음 링크로 이동하여 스킨 파일을 다운로드 받습니다.

    >> 티스토리 미넴 스킨 2.5.7 업데이트 - 구글 광고 게재, 배경음악 기능 개선

     

    그리고 적당한 위치에 압축을 풀어 줍니다.

     

    피드백 버전을 받고 싶으신 분은 다음 링크로 이동 바랍니다.

    >> 미넴 스킨 피드백 버전 다운로드 바로가기

     

    미넴 스킨 등록

    관리자 페이지 > 꾸미기 > 스킨 변경 으로 이동 합니다.

     

    스킨 등록 + 버튼을 클릭 합니다.

     

    추가 버튼을 클릭 합니다.

     

    다운 받은 스킨을 압축을 풀어 둔 경로로 이동한 다음 모든 파일을 선택하고 열기를 클릭 합니다.

     

    파일목록에 다음과 같이 추가 되었으면 정상 입니다.

     

    한 번 더 추가 버튼을 클릭 합니다.

     

    images 경로로 이동을 합니다. 경로 안의 파일은 따로 다시 등록을 해주어야 합니다.

     

    아까와 마찬가지로 경로 안의 모든 파일을 선택 하고 열기를 해 줍니다.

     

    이미지 및 폰트 파일 등이 정상적으로 등록 되었는 지 확인하고 저장 버튼을 클릭 합니다.

     

    다른 스킨과 중복되지 않게 적당히 스킨명을 입력해 주시면 됩니다.

     

    스킨 보관함 으로 이동 합니다.

     

    다음과 같이 보이면 정상적으로 등록이 된 것입니다.

     

    미넴 스킨 적용

    다음으로 등록한 스킨을 적용해 보겠습니다.

     

    마우스 커서를 가져다 대면 보이는 적용 버튼을 클릭 합니다.

     

    주의 메시지와 함께 확인 알림창이 하나 뜨는데 확인을 클릭해 줍니다.

     

    잠깐 동안 적용 중이라는 메시지가 뜨는데 기다리면 완료가 됩니다.

     

    자신의 블로그 홈을 방문해 보면 잘 적용된 것을 확인할 수 있습니다.

     

     

     

     

    미넴 스킨 기능 소개 및 설명

    이어서 스킨에 내장된 기능에 대해 간단한 소개와 필요한 설명을 하겠습니다.

     

    관리자 페이지 > 꾸미기 > 스킨 변경 으로 이동 합니다.

    그럼 스킨 편집 창이 하나 뜨고 여기서 설정을 할 수 있는데 하나씩 살펴 보겠습니다.

     

    사이드바 고정

    본문의 내용을 스크롤하여도 사이드바는 그 위치를 그대로 유지합니다.

     

    맨 아래까지 이동했을 때 스크롤도 보조를 맞추어 하단까지 스크롤 됩니다. 물론 사이드바만 스크롤도 가능합니다.

     

    목차 접기 기능 추가

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

     

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

     

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

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

     

    플로팅 목차 신 버전 추가

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

     

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

     

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

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

     

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

     

    상단 헤더 고정 기능

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

     

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

     

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

     

    컨텐츠 위치 조정 기능

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

     

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

     

    본문 적용 글꼴 무시 옵션

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

     

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

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

     

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

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

     

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

     

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

     

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

     

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

     

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

     

    사이드바 숨기기 옵션

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

     

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

     

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

     

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

     

    사이드바 크기 고정

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

     

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

     

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

     

    나눔바른펜 폰트 추가

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

     

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

     

    다크 모드 추가

    요새 다크 모드는 일반적인 추세가 되었습니다. 당연히 미넴 스킨에도 이 기능이 빠지면 안 될 것 같아서 만들었습니다.

     

    사이드바에 보면 다음과 같이 다크 모드 메뉴가 추가 되었습니다.

     

    달 모양을 클릭해 보면 다음과 같이 다크 모드로 변경되는 것을 알 수 있습니다.

    다크모드에서도 잘 보일 수 있도록 색상 조합을 적절하게 설정해 주세요.

     

    해 모양을 클릭해 보면 원래대로 돌아 옵니다.

     

    스킨 편집에서 다크 모드 기능을 숨길 수 있습니다.

    꾸미기 > 사이드바에서 설정할 수 있도록 개선하였습니다.

     

    기본 다크 모드 추가

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

     

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

     

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

     

    다크모드 개선

    jQuery에 의존한 다크모드라서 불완전한 동작을 하였는데 구조를 바꾸어 CSS에서 대부분의 작업을 처리하도록 개선하였습니다. 그리고 그림자 효과를 다크모드에 맞게 변경하였습니다.

    스킨편집에서 기본 다크모드 설정 시 브라우저 설정에 맞게 다크모드를 보여주며 OFF 시에는 라이트 모드로 보입니다. 또한 사이드바에서 원하는 모드로 변경하면 그 설정을 계속 유지하게 됩니다. 사이드바 다크모드 사용을 OFF 하면 라이트 모드로 동작합니다.

    다만 글 작성 시에 따로 글 색상을 적용하셨다면 검은색 글씨가 그대로 나타날 수 있다는 점을 유의해주셔야 합니다. 강제로 밝은 색상 글씨를 적용할 수도 있지만 그럴 경우 다른 글자색까지 영향을 받으므로 잘 생각하신 후 적용 바랍니다.

    (내용 추가)

    다크모드 적용 시 글자 색 강제 변환 기능을 추가하였습니다.

     

    사이드바 위치 조정 옵션

    사이드바를 오른쪽에 두고 싶어 하는 분이 계셔서 옵션을 추가하였습니다.

     

    사이드바 왼쪽으로 이동 옵션을 OFF 하시면 다음과 같이 오른쪽으로 이동하게 됩니다. 기본 값은 왼쪽 입니다.

     

    이롭게바탕체 글꼴 적용 옵션

    글꼴 변경 옵션을 요청하신 분이 있어서 적용하였습니다.

     

    이롭게바탕체를 사용하면 기존대로 보이구요. 기능을 OFF 하면 다음과 같이 시스템 기본 글꼴로 보이게 됩니다. 취향에 맞게 사용하시면 될 것 같습니다.

     

    종이질감 사용 옵션

    혹시 종이 질감을 사용하고 싶지 않으신 분이 계실까 해서 추가하였습니다.

     

     

    기본은 사용으로 되어 있구요. OFF로 바꾸면 다음과 같이 종이 질감이 사라지게 됩니다.

     

    플로팅 목차 기본 위치 설정

    플로팅 목차를 왼쪽에서 나타나게 하고 싶으신 분이 계셔서 옵션을 만들었습니다.

     

    기본은 오른쪽에서 등장하며 기능을 OFF 하시면 다음과 같이 왼쪽에서 등장하게 됩니다.

     

    광고 고정 기능 옵션

    구글 핵심 웹 지표(CLS)에서 좋은 점수를 받으려면 광고 영역의 크기를 지정하는 것이 좋습니다.

     

    만약에 광고 크기에 맞지 않는 스타일로 크기고정 영역을 사용하시면  다음과 같이 광고에 스크롤이 생기게 됩니다.

     

    광고영역 크기고정 옵션을 끄게 되면 레이아웃이 좀 흔들리기는 하지만 다음과 같이 광고가 잘 보이게 됩니다.

     

    이 기능을 이용하고 싶으신 분들은 스킨 편집 html 편집기의 HTML 탭에서 다음 부분을 수정하시면 됩니다.

     

    커버 아이템 설정

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

     

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

     

    그리드 형태 커버

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

     

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

     

    리스트 형태 커버

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

     

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

     

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

     

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

     

    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

     

    강조 커버 추가

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

     

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

     

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

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

     

    커버 스타일 변경

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

     

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

     

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

     

    커버 그리드 스타일 높이 고정 옵션

    그리드 크기를 고정하고 싶은 분이 계실 것 같아서 옵션을 추가했습니다.

     

    옵션을 ON 하면 다음과 같이 제목, 내용의 길이에 상관없이 그리드 크기가 동일하게 고정됩니다.

    그리드 크기 고정 옵션 적용 전(좌) 후(우)

     

    다국어 번역 지원

    말 그대로 블로그 번역 기능을 제공합니다. 설정 화면에서 다국어 번역 기능을 켜고 끌 수 있습니다.

     

    좌측 사이드바에 있는 영국 국기 모양 버튼을 한 번 클릭해 보겠습니다.

     

    다음과 같이 내 블로그 전체가 영어로 번역이 잘 되는 것을 볼 수 있습니다.

    일본어로도 번역이 잘 되네요.

     

    언어별로 켜고 끌 수 있는 기능을 추가했습니다.

     

    다른 스킨을 사용하는 분들도 다음 포스팅을 참고하여 개별적으로 적용하실 수도 있습니다.

     

    티스토리 블로그(홈페이지) GTranslate 구글 번역 위젯 적용

     

    티스토리 블로그(홈페이지) GTranslate 구글 번역 위젯 적용

    Select Language Afrikaans Albanian Arabic Armenian Azerbaijani Basque Belarusian Bulgarian Catalan Chinese (Simplified) Chinese (Traditional) Croatian Czech Danish Dutch English Estonian Filipino Fi..

    sangminem.tistory.com

     

    글자 크기 조절 지원

    글자 크기를 원하는대로 조절할 수 있는 기능입니다.

     

    확대, 축소, 기본 버튼 3가지가 있습니다. 확대, 축소 버튼으로 글자 크기를 조절할 수 있습니다. 마지막 화살표를 누르면 기본 크기로 돌아옵니다.

     

    글자를 확대해 보았더니 다음과 같이 본문 글자가 부담스럽게 커졌습니다. 멀리 떨어져 있는 사람이나 시력이 좋지 않은 분들에게 글을 보여줄 때 유용하게 사용할 수 있을 것 같습니다.

     

    개별적으로 적용하고 싶은 분들은 다음 포스팅을 참고 하세요.

     

    티스토리 블로그 폰트 크기 변경 버튼 만들기

     

    티스토리 블로그 폰트 크기 변경 버튼 만들기

    폰트가 너무 작거나 커서 블로그 컨텐츠 보기가 불편할 경우가 있을 거 같아서 추가한 기능입니다. 관리 페이지 > 꾸미기 > 스킨 편집 으로 이동합니다. html 편집을 클릭 합니다. 그럼 다음과 같

    sangminem.tistory.com

     

    배경음악 설정 기능

    블로그에 배경음악을 넣고 싶은 분이 계실 것 같아서 만들어 보았습니다.

     

    사용 여부를 ON 하시면 배경음악 컨트롤러가 사이드바에 보여집니다. 꾸미기 > 사이드바에서 사용 설정하면 컨트롤러가 사이드바에 보여집니다. 또한 자동재생 여부를 ON 하시면 음악이 자동 재생되게 됩니다. 자동재생을 하더라도 최초 접속 시에만 자동재생을 하고 사용자가 일시정지 버튼을 눌렀을 경우에는 일시정지 상태가 계속 유지됩니다. 다만 브라우저에 따라 최초 사용자의 인터렉션(터치 또는 클릭)이 발생해야 플레이 되도록 정책을 가져가는 경우가 있습니다. 또한 사파리 등 일부 브라우저에서 페이지 이동 시 재생이 중단되는 현상이 있습니다. 브라우저 자체 정책이므로 해결이 어려운 점 참고 바랍니다. 페이지 프레임 자체를 나누어 재생이 끊기지 않도록 하는 방법도 있는데 추후에 시간되면 개선해 보도록 하겠습니다.

     

    사이드바에 보여지는 배경음악 재생 컨트롤러 입니다.

     

    음악을 등록하는 방법은 간단하지만 약간의 제약이 있습니다.

     

    일단 비공개 글을 하나 작성하고 다음과 같이 파일을 등록한 후 '링크 주소 복사'를 통해 URL 주소를 얻으실 수 있습니다.

     

    제약1. 대부분의 브라우저에서 CORS 정책에 따라 외부링크 사용 불가합니다. 블로그에 올린 파일만 가능합니다.

    제약2. 블로그 글에 파일 첨부로 올린 파일 링크는 사용가능이 하지만 스킨 편집 입력 칸에 100자가 넘어가면 URL 링크가 짤립니다. 파일명을 최대한 짧게하여 올리시는 것을 추천드립니다. 저같은 경우는 bgm1.mp3, bgm2.mp3 와 같은 형태로 올렸습니다. 그리고 https: 부분을 제외하고 //blog.kakaocdn.net/... 부터 입력하였더니 간당간당하게 적용 가능하였습니다. 굳이 100자가 넘는 URL을 사용하고 싶으신 분은 common.js 파일을 열어 코드에 음원 정보를 직접 넣으셔도 되고 약간의 꼼수를 이용할 수도 있습니다.

     

    스킨 편집 페이지에서 F12를 눌러 개발자 모드로 진입합니다. 그리고 좌측 상단에 있는 아이콘을 활성화 시킵니다.

     

    URL 입력창에 커서를 가져다 대고 클릭합니다.

     

    그럼 Elements 탭에서 해당 부분의 maxlength가 100이라고 되어있는 것을 볼 수 있는데 이 부분을 더블 클릭하여 100보다 큰수로 변경해 줍니다. 넉넉하게 1000 이상으로 해주시면 될 것 같습니다.

    다시 시도해 보면 100자보다 긴 URL도 입력이 가능한 것을 확인할 수 있습니다.

     

    주의) 음원 저작권 침해가 우려되시는 분은 사용하지 마시거나 무료 음원만 사용 부탁드립니다.

     

    따로 적용하고 싶으신 분들은 아래 게시물 참고 바랍니다.

     

    티스토리 블로그 배경음악 직접 넣기 (초급 버전)

     

    티스토리 블로그 배경음악 직접 넣기 (초급 버전)

    안녕하세요. 블로그를 하다 보니 은근 배경음악 욕심이 생겨서 한 번 넣어 보았습니다. 목차 음악 파일 등록 먼저 비공개 게시물을 하나 만듭니다. 그리고 위에 보이는 파일 메뉴를 통해 배경음

    sangminem.tistory.com

     

    티스토리 블로그 배경음악 직접 넣기 (고급 버전)

     

    티스토리 블로그 배경음악 직접 넣기 (고급 버전)

    잠깐! 이 포스팅은 HTML, CSS, JavaScript 기초가 있으신 분들 대상으로 작성되었습니다. #배경음악넣기_초급버전 sangminem.tistory.com/84 티스토리(TISTORY) 블로그 배경음악(BGM) 직접 넣기 (초급 버전) 안녕..

    sangminem.tistory.com

     

    목차 설정 기능

    목차 생성 기능을 기본으로 넣었습니다. 제목 태그를 사용하면 자동으로 목차로 인식하여 글 맨 상단에 생성해 줍니다.  

    자동으로 목차가 생성되는 걸 원치 않으시는 분들을 위해 OFF 기능을 제공합니다.

     

    글 중간에 목차를 넣고 싶으신 분은 다음 태그를 서식으로 저장한 다음 불러와 사용하시기 바랍니다.

    <div class="book-toc">
      <p>목차</p>
      <ul id="toc"></ul>
    </div>

     

    목차가 적용된 모습입니다.

     

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

     

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

     

    따로 적용하고 싶으신 분들은 다음 포스팅을 참고 하세요.

     

    티스토리 글에 자동으로 목차 넣기

     

    티스토리 글에 자동으로 목차 넣기

    목차를 넣고 싶긴한데 글 쓸 때마다 매번 수작업으로 만든다면 상당히 번거롭겠죠. 그래서 jQuery 플러그인 Table of Contents(TOC)를 이용하여 자동으로 넣는 방법을 소개합니다. 저는 제목1, 제목2로

    sangminem.tistory.com

     

    제목 우측에 링크 복사 버튼도 있는데 해당 글의 해당 제목 위치까지 바로 이동하기 위한 기능입니다.

     

    티스토리 목차 링크 클립보드 복사하기

     

    티스토리 목차 링크 클립보드 복사하기

    목차를 클릭하면 해당위치로 바로 가는 기능까지는 지원이 되어 문제가 없는데, 문득 목차 링크를 클릭 한번으로 복사 가능하면 좋을 것 같다는 생각이 들어서 개발하게 되었습니다. 목차 작업

    sangminem.tistory.com

     

    목차가 화면 위로 벗어나게 되면 오른쪽 사이드에 여유 공간이 있을 경우 다음과 같이 플로팅 목차를 제공합니다. 글이 길다면 좀 더 편하게 인덱싱 할 수 있습니다. 플로팅 목차는 접거나 이동도 가능합니다. 화면에 충분한 공간이 없다면 기본적으로 접힌 상태로 나타나게 되고 필요에 따라 펴고 접을 수 있습니다. 목차를 이동하려면 상단 부분을 드래그 하시면 됩니다.

     

    플로팅 목차도 따로 적용하실 수 있습니다.

     

    티스토리 떠 다니는 플로팅 목차 만드는 방법 (초급 버전)

     

    티스토리 떠 다니는 플로팅 목차 만드는 방법 (초급 버전)

    목차를 확인하려면 다시 위로 올라가야 하는 불편함을 해소하고자 만들어 보았습니다. 생각보다 깔끔하게 잘 만들어진 것 같아서 공유합니다. 주의) 고급 버전을 먼저 반영하고 초급 버전을 나

    sangminem.tistory.com

     

    티스토리 떠 다니는 플로팅 목차 만드는 방법 (고급 버전)

     

    티스토리 떠 다니는 플로팅 목차 만드는 방법 (고급 버전)

    초급 버전에서 좀 더 기능을 강화한 버전을 만들어 보았습니다. 어느 정도 코딩이 가능한 분이어야 수월하게 따라하실 수 있을 겁니다. 이 부분이 어렵게 느껴지시는 분은 다음 초급 버전을 참

    sangminem.tistory.com

     

    카테고리 접기 기능

    관리자 페이지에서 아래와 같이 스킨 편집에 옵션으로 설정할 수가 있습니다. 먼저 카테고리 접힌 상태로 유지를 ON으로 전환합니다.

     

    그 다음 접을 상위 카테고리를 지정합니다. 빈 값으로 두면 모든 카테고리가 접힙니다. 카테고리는 쉼표로 구분을 합니다.

     

    다음과 같이 보이면 정상입니다.

     

    1,2를 입력 후 저장하고 결과를 보겠습니다.

     

    다음과 같이 첫번째, 두번째 카테고리 모두 잘 접힌 것을 확인할 수 있습니다.

     

    마우스를 가져다 댔을 때 펼쳐지는 시간을 설정합니다. ms 단위입니다. 기본 값은 600(0.6초)입니다.

     

    필요에 따라 접힌 상태의 카테고리 글머리도 바꿀 수 있습니다.

     

    프로필 기능

    여러 사람들의 요청으로 간단히 프로필을 설정할 수 있는 기능을 추가하였습니다. 스킨 편집 > 사이드바 > 프로필 사용, 프로필 이미지, 프로필 자기소개, 프로필 상세 등의 설정을 통해 간단하게 본인만의 프로필을 꾸미실 수 있습니다.

    (2021.09.17) 현재 프로필 사용 설정 및 위치 변경은 꾸미기 > 사이드바에서 하실 수 있도록 개선되었습니다.

     

    다음과 같이 잘 표시되는 것을 확인할 수 있습니다.

     

    푸터 설정

    푸터 문구는 크게 설명 드릴 것이 없습니다.

     

    다음 설정 란에 원하는 문구를 넣으시면 됩니다.

     

    거듭 당부드리지만 우측 하단의 스킨 정보는 임의로 제거하지 마시길 바랍니다.

     

    첨언) 몇몇 분이 잘못 이해하신 것 같아서 다시 말씀드립니다. 푸터 문구1, 푸터 문구2 둘 다 원하시는 문구로 바꾸셔도 상관없구요. 우측 하단에 있는 Mynem Skin x.x 만 남겨 달라는 의미였습니다 :)

     

    구글 광고 설정 기능

    구글 광고를 좀 더 편하게 적용하도록 만들어 보았습니다. 스킨 편집 화면에서 광고를 켜고 끌 수 있게 하였고 광고 코드도 쉽게 적용할 수 있도록 기능을 제공합니다.

     

    메인 구글 일치하는 광고

    먼저 홈 화면에 일치하는 광고 적용하는 방법입니다. 다음과 같이 사용 여부를 ON 으로 변경하고 광고 코드 값을 넣기만 하면 바로 적용이 됩니다. 구글 애드센드 적용에 대한 기본적인 이해가 있으신 분들만 사용할 것이라 예상되므로 광고 코드에 대한 설명은 따로 하지 않겠습니다.

     

    다음과 같이 추천 글에 일치하는 광고가 보이면 정상적으로 적용된 것입니다.

     

    사이드바 구글 일치하는 광고

    사이드바에도 일치하는 광고가 있으면 유용하므로 쉽게 적용할 수 있는 방법을 제공합니다.

     

    다음과 같이 보이면 잘 적용된 것입니다. 마찬가지로 내 블로그 글이 무작위로 리스팅되므로 추천 글이라는 타이틀을 이용하였습니다.

     

    본문 구글 일치하는 광고

    본문 영역에는 하단 관련 글 대신 일치하는 광고로 대체하였습니다. 일치하는 광고를 사용하지 않는 분들도 '카테고리 글 더보기' 플러그인을 관련 글 대신 사용하시면 됩니다. 물론 둘 다 사용해도 문제는 없습니다.

     

    다음과 같이 글 하단에 추천 글이 보이면 정상적으로 적용이 된 것입니다.

     

    본문 상단 구글 광고 2개

    본문에는 2개의 광고를 넣어야 하므로 data-ad-slot도 2개가 필요합니다. 구글 애드센스 사이트에 방문하여 디스플레이 광고 단위를 2개 생성하여 얻으시면 됩니다.

     

    잘 이해가 되지 않는 분은 다음 글을 참고해 보세요.

     

    티스토리 상단에 애드센스 광고 2개 띄우기

     

    티스토리 상단에 애드센스 광고 2개 띄우기

    글 상단에 광고가 2개 뜨는 블로그가 있는데 어떻게 하는지 궁금하신 분이 있을 것 같아서 포스팅 합니다. 관리 페이지에 수익 메뉴가 생기기 전까지는 플러그인이 제공되어 원하는 대로 태그

    sangminem.tistory.com

     

    다음과 같이 글 상단에 광고 2개가 보이면 적용이 정상적으로 된 것입니다.

     

    인피드 광고 설정 방법

    다음 값들을 채워 넣으면 됩니다. 하나씩 살펴 보겠습니다.

     

    사용 여부를 설정합니다.

     

    인피드 광고의 빈도를 설정합니다. 2를 입력 시 게시물 2개당 광고 1개를 배치 합니다.

     

    애드센스 광고 구조를 이미 안다는 가정 하에 설명하겠습니다.

     

    먼저 큰 화면(PC 용)의 설정 값입니다.

    패딩을 모두 5px로 줍니다.

     

    이미지는 왼쪽 정렬이 기본이고 가로 세로 비율은 1:1 이며 너비는 180px로 설정합니다. 패딩은 오른쪽만 15px를 줍니다.

     

    가려 놓은 3개의 값을 잘 적어 놓습니다.

     

    다음은 작은 화면(모바일용) 설정 값입니다.

    패딩을 전부 3px으로 줍니다.

     

    이미지는 마찬가지로 왼쪽 정렬, 가로 세로 비율 1:1으로 하고 너비는 120px로 입력합니다. 패딩은 오른쪽만 5px를 주겠습니다.

     

    마찬가지로 3가지 가려 놓은 값을 잘 적어 놓습니다.

     

    data-ad-client는 모든 광고의 공통 값입니다. ca-pub-으로 시작하는 값을 넣습니다.

     

    적어 놓은 10자리 숫자 코드를 넣습니다.

     

    마찬가지로 위에서 설정으로부터 얻은 -rm+o-33-8o+rh 와 같은 레이아웃 키 값을 넣습니다.

     

    (내용 추가)

    추가적으로 인피드 광고를 사이드바 최근 글, 인기 글에도 적용하였습니다.

    간단히 설명하면 애드센스 사이트에서 인피드 광고 설정 시 전체 옵션의 패딩 4군데 값을 모두 5px로 주고 이미지에서 왼쪽 정렬, 가로 세로 비율 1:1, 너비 70px, 오른쪽 패딩 값만 10px로 주면 됩니다. 나머지는 디자인은 적당히 설정해 주세요.

     

    큰 화면에서의 광고 배치입니다.

     

    다크 모드에서도 잘 보이네요.

     

    모바일 화면에서도 적절하게 잘 표시되고 있습니다.

     

    따로 적용하고 싶으신 분은 아래 링크 참고 바랍니다.

    애드센스 인피드 광고 티스토리에 적용하기

     

    애드센스 인피드 광고 티스토리에 적용하기

    글 목록에 비슷한 양식으로 광고가 껴 들어가 있는 경우 자주 보셨죠? 제 블로그도 이미 적용을 해 놔서 잘 나오고 있습니다. 블로그 보시는 분들은 불편할 수도 있어서 죄송합니다만, 위와 같이

    sangminem.tistory.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이 동적으로 변하는 것이 웹 지표에 좋지 않은 영향을 주기 때문에 웬만하면 고정 값을 이용하시는 것이 좋습니다.

     

     

    기타 유용한 기능

    이 외에도 다양한 기능들이 있습니다.

     

    본문 프로그레스바

    본문 글의 위치를 파악할 수 있는 프로그레스바 기능을 제공합니다. 스킨 편집 화면에서 켜고 끌 수 있습니다. 상하좌우 다 있는데 상단과 좌측은 본문의 위치를 알 수 있는 프로그레스바이고 하단과 우측은 본문 외의 길이를 알 수 있는 프로그레스바입니다. 취향에 따라 4군데 모두 켤 수도 있고 다 끌 수도 있으니 참고 바랍니다.

     

    상단, 좌측 두군데 켜 놓은 모습입니다.

     

    따로 적용하고 싶으신 분은 다음 글을 참고 하세요.

     

    티스토리 스크롤 시 글 위치 표시 프로그레스바 간단하게 만들기

     

    티스토리 스크롤 시 글 위치 표시 프로그레스바 간단하게 만들기

    지금부터 본문 글을 위 아래로 이동할 때마다 위치를 표시해 주는 프로그레스바를 만들어 보겠습니다. 인디케이터, 진행바 등으로도 불립니다. 취향에 따라 수평(horizontal) 방향, 수직(vertical) 방

    sangminem.tistory.com

     

    공감 버튼 꾸미기

    공감 버튼도 그냥 두기 심심하여 꾸며 보았습니다.

     

    공감 버튼을 좀 더 강조하기 위해 종 모양 아이콘을 공감 버튼 위에 두어 시선을 끌었습니다. 그리고 공감 버튼을 누르면 토스트 팝업이 뜨면서 반응까지 하도록 만들었습니다.

     

    문구 출력을 ON/OFF 하거나 멘트를 변경하고 싶으신 분은 스킨 편집의 공감 버튼 꾸미기 부분을 수정해 주시면 됩니다.

     

    또한 따로 적용하고 싶으신 분들은 다음 포스팅을 참고해 주세요.

     

    티스토리 공감 구독 버튼 꾸미기: 가운데 정렬, 말풍선 강조

     

    티스토리 공감 구독 버튼 꾸미기: 가운데 정렬, 말풍선 강조

    오늘은 공감 버튼과 구독하기 버튼을 강조하기 위해 꾸며보도록 하겠습니다. 북 클럽에서 적용한 내용이므로 다른 스킨에서 적용 시 다른 부분이 있을 수 있으니 안 되시면 댓글 남겨 주세요.

    sangminem.tistory.com

     

    티스토리 공감 클릭 시 고마움 표시하기

     

    티스토리 공감 클릭 시 고마움 표시하기

    공감을 눌러 주신 분들께 감사한 마음을 전달하고자 생각한 방법입니다. 복잡하지 않은 내용이므로 쉽게 따라 하실 수 있습니다. 목차 토스트 기능 만들기 사실 토스트 기능을 좀 더 전파하고

    sangminem.tistory.com

     

    색상 변경 옵션

    초록색은 저만 좋아하는 것이지 모든 분들이 동일하게 쓰고 싶지는 않으실 테니 색상을 변경할 수 있는 여지를 만들어 놓았습니다. 기본 값은 흑백 계열입니다.

     

    이 색상을 다음과 같이 변경해 보겠습니다.

     

    분위기가 확 달라진 것을 알 수 있습니다. 이리저리 바꿔 보면서 본인만의 색상을 찾아 보세요.

     

    이미지 태그 ALT 속성 자동 입력

    이미지 태그마다 alt 속성 값을 입력하는 것이 필요하다는 것은 알지만 지키기는 매우 어렵고 번거롭습니다. 그래서 자동으로 넣어주는 기능을 만들었습니다. 글을 작성하면 제목과 연계되어 다음과 같이 잘 입력 되는 것을 볼 수 있습니다. 개별적으로 입력된 값은 건드리지 않으니 걱정하지 않으셔도 됩니다.

     

    따로 적용하고 싶은 분은 다음 포스팅을 참고 바랍니다.

     

    이미지 태그 alt 속성 글 수정 없이 입력하는 방법 (초급 버전)

     

    이미지 태그 alt 속성 글 수정 없이 입력하는 방법 (초급 버전)

    이미지 태그의 alt 속성 값이 검색 사이트 SEO에 영향을 미친다는 말은 많이 들어 보셨을 겁니다. 하지만 뒤늦게 아셨거나 알고는 있지만 앞으로도 크게 신경쓰고 싶지 않은 분들이 계실텐데 그런

    sangminem.tistory.com

     

    이미지 태그 alt 속성 글 수정 없이 입력하는 방법 (고급 버전)

     

    이미지 태그 alt 속성 글 수정 없이 입력하는 방법 (고급 버전)

    얼마 전에 글의 제목을 이미지 태그의 alt 속성 값으로 활용을 했었는데요. 이번에는 좀 더 디테일하게 설정을 해 보도록 하겠습니다. alt 속성의 중요성 및 기타 내용은 앞서 작성한 포스팅을 참

    sangminem.tistory.com

     

    이미지 지연 로딩 기법 적용

    오프스크린 이미지를 지연 로딩 합니다. 쉽게 말해서 화면상 보이지 않는 이미지를 미리 불러오지 않고 대기하고 있다가 보이는 시점에 불러 옵니다. 이 기법은 페이지의 최초 로딩을 빠르게 해주므로 구글이 측정하는 웹 지표에 중요한 요소 중 하나입니다.

     

    다음과 같이 화면에 이미지가 보이는 시점에 로딩을 완료합니다.

     

    좀 더 자세한 설명을 원하시는 분은 다음 글을 참고 바랍니다.

     

    티스토리 SEO(검색 엔진 최적화)를 위한 블로그 속도 개선 - 이미지 지연 로딩 기능을 추가하였습니다

     

    티스토리 SEO(검색 엔진 최적화)를 위한 블로그 속도 개선

    페이징 로딩속도도 검색 사이트 노출에 영향을 미친다는 사실을 알고 구글에서 제공하는 페이지 속도 측정 사이트에서 측정 결과, 100점 만점에 5점이라는 충격적인 결과를 접하고 페이지 로딩

    sangminem.tistory.com

     

    대댓글 접기 기능

    대댓글이 너무 많고 길면 원 댓글을 찾기 어렵죠. 그래서 원하는 개수만 남기고 모두 접힌 상태로 볼 수 있게 만들었습니다. 기본 설정은 3개의 대댓글만 보이고 나머지는 접혀 있게 됩니다.

     

    대댓글 접히는 기준 개수는 4로 바꿔 보겠습니다.

     

    다음과 같이 4개의 대댓글을 제외한 나머지가 접히게 됩니다.

     

    대댓글 접기 사용을 OFF 하시면 모두 펼쳐진 상태로 보이게 됩니다.

     

    댓글 오토 링크 적용

    티스토리 블로그에서는 기본적으로 댓글 내용에 포함된 URL 주소를 링크로 인식하지 않습니다. 그래서 사용자들의 편의를 위해 직접 기능을 구현하였습니다.

     

    미넴 스킨에서는 다음과 댓글에 포함된 URL의 링크가 자동 생성 됩니다.

     

    빈 썸네일에 기본 로고 표시

    빈 썸네일이 너무 허전해 보여서 기본 로고를 보여주도록 수정해 보았습니다.

    빈 썸네일 로고 적용 전후 비교

     

    다만 본인만의 로고를 보여주고 싶을 것이므로 이미지를 업로드 할 수 있는 기능도 만들어 두었습니다. 스킨 편집에서 기타 설정의 빈 이미지 표시 로고에 원하는 이미지를 업로드하시면 됩니다. 이미지 사이즈는 contain, cover 두 가지가 있는데 contain은 이미지가 잘리지 않는 범위 내에서 최대한 크게 채워주고 cover는 이미지가 잘릴 수는 있지만 빈 공간이 없이 꽉 채워줍니다.

     

    이미지를 하나 올리고 cover와 contain을 선택해 보았더니 다음과 같은 차이를 보였습니다.

    이미지 사이즈 cover(왼쪽)와 contain(오른쪽) 차이

     

    개인적으로 심플하고 투명한 이미지를 추천 드립니다.

     

    홈 그리드 옵션 추가

    이미지, 내용, 날짜 보이기 여부를 설정할 수 있고 제목, 내용의 최대 라인 수도 설정할 수 있게 하였습니다.

     

    내용을 안 보이게 했을 경우 입니다.

     

    이미지를 안 보이게 했을 경우 입니다. 제목 라인 수는 3, 내용 라인 수는 5로 설정하였습니다.

     

    테두리 스타일 적용

    테두리 스타일을 개별적으로 적용할 수 있도록 하였습니다.

     

    사이드바에 적용된 테두리 스타일 입니다.

     

    전체 컨텐츠 박스에 적용된 테두리 스타일 입니다.

     

    제목에 적용된 테두리 스타일 입니다.

     

    링크 미리보기 박스에 적용된 테두리 스타일 입니다.

     

    목차에 적용된 테두리 스타일 입니다.

     

    개별적으로 ON/OFF 할 수 있으니 취향에 맞게 적용하시면 될 것 같습니다.

     

    화면 너비 조절 기능

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

     

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

     

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

     

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

     

    이전 글, 다음 글 추천 기능

    글의 마지막 부분에서 현재 카테고리 기준으로 이전 글, 다음 글 추천하여 보여주는 기능을 개발하였습니다. 옵션으로 켜고 끌 수 있습니다.

     

    애드센스 광고 자동 새로고침 기능

    사이드바에 있는 애드센스 일치하는 광고, 기본 광고를 자동으로 새로고침 하여 좀 더 다양한 광고를 보여줄 수 있습니다. 다음 기능을 켜기만 하면 됩니다.

     

    적용 결과 및 별도 적용 방법은 다음 글을 참고해 보세요.

    애드센스 광고 자동 리프레시(새로고침)를 통해 광고 수익 개선하기

     

    애드센스 광고 자동 리프레시(새로고침)를 통해 광고 수익 개선하기

    광고 수익을 좀 더 개선하기 위해 계속 연구해 보는 중에 생각해 낸 방법입니다. 시간이 어느 정도 흐른 뒤 새로운 광고로 바꿔주면 좀 더 효과를 볼 수 있지 않을까 하는 생각이 출발이었습니다

    sangminem.tistory.com

     

    특정 글 고정 추천 기능

    먼저 관리자 페이지의 사이드바에서 고정 추천 글 기능을 사용으로 설정해 줍니다.

     

    스킨 편집의 다음 부분에서 원하는 게시물을 타이틀과 함께 작성합니다.

     

    다음과 같이 사이드바 상단에 특정 글을 고정적으로 보여줄 수 있습니다.

     

    권장 사용 플러그인

    다음 플러그인은 활성화 하시는 것을 권장드립니다.

     

    제 스킨에는 관련 글을 제거하였으므로 '카테고리 글 더 보기' 플러그인을 꼭 활성화 하시는 것을 추천 드립니다. 그리고 소스 코드를 작성하는 분이라면 '코드 문법 강조' 플러그인은 선택이 아닌 필수라고 볼 수 있습니다. 

     

    스킨 변경 때마다 메타 태그를 삽입하기 귀찮으므로 '메타 태그 등록' 플러그인 사용도 권장드리고 저처럼 이전 글을 많이 삽입하는 분이라면 '이전 발행 글 링크 삽입' 플러그인도 상당히 유용합니다.

     

    적용 후 블로그 속도 측정

    스킨을 만들었으니 블로그 속도 테스트도 한 번 해 보면 좋겠죠?

     

    모바일에서는 사실 생각보다 높게 나오지는 않았네요.

    블로그에 기능을 많이 넣은 탓도 있는 것 같지만 사용 못할 정도의 수준은 아닙니다. 핵심 웹 지표인 CLS 점수가 양호하므로 그대로 사용해도 좋을 것 같습니다.

     

    피씨 속도 점수는 상당히 높습니다.

    물론 광고를 게재하기 전이라서 그렇긴 하지만 상당히 만족할 만한 점수입니다. 역시 CLS 점수도 만족스럽습니다. 이대로 사용해도 괜찮을 것 같습니다.

     

    내용 추가 2021.05.23) 현재는 모든 페이지가 핵심적인 웹 지표 기준을 만족하네요.

     

    구글 서치 콘솔에서 모든 환경이 기준을 통과하고 있습니다.

     

    FAQ

    글의 내용이 너무 길어져서 FAQ는 별도로 뺐습니다. 아래 게시물에서 확인하세요.

    미넴 스킨 자주 묻는 질문(FAQ)

     

    미넴 스킨 자주 묻는 질문(FAQ)

    미넴 스킨 게시물에 대부분 설명이 나와 있지만 내용이 많아서 찾기 어렵거나 빨리 훑어 보고 싶으신 분들을 위해 작성하였습니다. 지속적으로 추가해 나가도록 하겠습니다

    sangminem.tistory.com

     

    마무리

    처음에는 혼자 사용하려고 수정하다가 다른 분들에게도 도움이 되었으면 좋겠다는 마음으로 최대한 사용하기 쉽게 만들어 보았습니다. 무료 스킨인 만큼 무리한 신규 기능 요청은 받지 않겠지만 다양한 의견을 주시는 것은 좋을 것 같습니다. 다만 사용하시면서 거슬리는 문제점이 보이면 즉시 말씀해 주세요. 최대한 신속히 처리해 드리겠습니다.

     

    유용하게 사용하시기 바라구요 ㅎㅎ 가능하면 홍보도 살짝 부탁드릴게요 :)

    감사합니다!

    728x90

    댓글191

    • 이전 댓글 더보기
    • 자월현 2021.09.04 17:17 신고

      안녕하세요!! 좋은 스킨 감사합니다! 티스토리 초보자라서 기본 스킨만 쓰고 커스텀 하는법도 모르고 있었는데 떠돌다가 여기에 정착했네요!
      한가지 제보드리고 싶은거는 아미넴님 이 블로그에 가장 오른쪽 스크롤바?가 연분홍이라 잘 안보입니다..! 글을 잘 읽다가 어디쯤 왔지 확인해보려고 봤는데 스크롤바가 없는줄 알고 살짝 당황했어요 ㅎㅎㅎ 물론 조그매서 안보이는 걸수도 있지만요!!
      아무튼 좋은 스킨 감사드립니다!!!
      답글

      • 안녕하세요 미넴스킨 이용해주셔서 감사합니다 ㅎ
        상단에 본문 위치를 나타내는 프로그레스바 기능이 있어서 스크롤바는 큰 문제가 되지 않는다고 생각했는데 불편하시면 스킨 편집에 색상 변경 옵션이 있는데 눈에 잘 띄는 색으로 변경하셔도 될듯 싶습니다. 웹 언어를 다룰줄 아신다면 스킨 수정을 통해 직접 색이나 크기를 변경하시는 것도 괜찮을 것 같습니다.

        그리고 자월현님 블로그 방문해 보니 모바일에서는 기본 스킨으로 보이는데 관리자 페이지에서 꾸미기 > 모바일 > 티스토리 모바일웹 자동연결을 사용하지 않습니다 로 설정하셔야 모바일 기기에서도 설정하신 스킨으로 보입니다.

    • 뚜뚜월드 2021.09.05 15:43 신고

      mp3 파일 주소가 너무 긴경우는 뒤가 짤리던데...어떻게 해야하나요?

      폴더를 상위로 올리기는 힘든 상황이라 .... 주소인식을 url주소가 길어도 연결할 수 있었으면 좋겠는데요

      방법이 있을까영?


      답글

      • 뚜뚜월드 2021.09.05 15:46 신고

        그리고 mp3도 무한대로~ 추가할 수

        있으면 좋겠어여! ~~ 한번에

        여러 곡을 추가하는 서버mp3 폴더를 읽어오는 방식이나

        그런게 있으면 편할텐데....

      • 긴 파일명 관련 설명은 이 부분 참고해 주시구요
        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

        mp3 무한대 추가는 불가능한건 아니겠지만 별도 서버를 구축해야 하는 수준이므로 스킨 문의의 범위를 벗어납니다 ㅎ

    • 2021.09.07 16:52

      비밀댓글입니다
      답글

      • 안녕하세요. 좋은 말씀 감사합니다 ㅎ

        먼저 목차 태그 사용법은 다음 부분 참고해 보시면 됩니다.
        https://sangminem.tistory.com/506#%EB%AA%A9%EC%B0%A8_%EC%84%A4%EC%A0%95_%EA%B8%B0%EB%8A%A5

        잘 이해가 안 되신다면 이 부분도 한 번 더 참고해 보세요.
        https://sangminem.tistory.com/307#%EB%AA%A9%EC%B0%A8_%EC%84%9C%EC%8B%9D_%EB%93%B1%EB%A1%9D

        그리고 플로팅 목차 사용 여부를 설정할 수 있도록 수정한 버전 올려놓습니다.
        https://sangminem.tistory.com/563

    • 안녕하세요. 버그인지 모르겠는데 한가지 문의하러 왔어요.
      PC에서는 괜찮은데 폰으로 제 블로그에 접속했을 때 로그인을 하려고 사이드바를 나오게 하면 하단에 로그인이랑 관리자 페이지 버튼이 있잖아요?

      그런데 관리자 버튼을 누르면 로그인 페이지가 나오고 관리자 페이지로 갈 수 있는데 로그인 버튼을 누르면 아무 반응이 없어서요.... ^^;;
      그럼 편안한 밤 되세요.
      답글

      • 안녕하세요. 확인해 보니 정말 문제가 있었네요. 제보 감사합니다.

        수정한 버전을 올려놓았으니 괜찮으시면 다시 적용 부탁드릴게요.
        https://sangminem.tistory.com/563

        다시 적용하는 것이 번거로우시면 다운 받아서 common.js 파일만 덮어 씌우셔도 됩니다. 2.4.1 버전부터는 common.min.js로 배포 되오니 이전 버전 사용 시 common.js로 파일명을 바꾸셔서 업로드 하시기 바랄게요.

    • 병무새 2021.09.09 22:18 신고

      궁금한게 있습니다. 사이드바 말고 왼쪽 여백 추천글은 어떻게 하신건가요?? (목차는 오른쪽, 왼쪽은 추천글 따라댕기고)

      왼쪽 추천글에 광고 및 제 글이 나오게 하는방법... 을 알고싶습니다. 지금 왼쪽 여백에 추천글에 아무것도 뜨지 않습니다 ㅠㅠ
      답글

      • 아네~ 구글 일치하는 광고를 설정하시면 됩니다.
        지금 병무새님 블로그를 보면 추천 글이 2개가 있는데 사이드바에서 추가로 설정하신건가요? 그러시다면 그 부분을 제거하고 스킨편집에 있는 옵션으로 설정하시면 정상적으로 보이실 겁니다.

        이 부분 참고해 보세요.
        https://sangminem.tistory.com/506#%EC%82%AC%EC%9D%B4%EB%93%9C%EB%B0%94_%EA%B5%AC%EA%B8%80_%EC%9D%BC%EC%B9%98%ED%95%98%EB%8A%94_%EA%B4%91%EA%B3%A0

    • 병무새 2021.09.09 22:36 신고

      사이드바 부분 제거 했습니다 !
      추천글 뜨는건 구글봇 마음인가요? 매번 빈화면으로 있어서.. ㅠㅠ 딴건 다 따라했습니다 !!
      답글

      • 저도 새로 막 등록한 글에서는 뜨지 않는거보면 구글 광고는 페이지 뷰 수가 일정 수준 이상 올라가야 광고를 내 보내는 것 같아요. 일단 그 상태로 좀 더 지켜보시면 될 것 같습니다 ㅎ

    • 병무새 2021.09.09 22:40 신고

      너무 감사합니다 ㅎ 아미넴님 덕분에 좋은 스킨 사용합니다 ^^ 늘 행복하세요 ㅎㅎ
      답글

    • 병무새 2021.09.09 22:43 신고

      옙 !! 감사합니다 ㅎㅎ
      답글

    • ㅇㅇ 2021.09.12 11:22

      폰트가 바뀌었나요? 글씨들이 뭔가 선명해진 기분이 드네요.
      답글

      • 폰트 변경은 안 했는데 종이질감 배경이미지랑 그림자 효과를 제거했더니 좀 더 밝아보여서 그런게 아닌가 싶어요~
        옵션 값으로 켜고 끌 수 있도록 해놨습니다 ㅎ

      • ㅇㅇ 2021.09.12 11:31

        아아 그렇군요. 그 혹시 2.5.1 버전에서 줄 간격 옵션이 추가되었다고 하시는데 이게 엔터를 누르면 글과 글 사이 간격이 생기잖아요. 그 크기를 조절하는 옵션인건가요?

        기존 미넴님 스킨은 엔터를 누르면 글과 글 사이 간격이 너무 벌여저서 부담스러웠는데... 업데이트 파일을 적용하면 처음부터 다시 설정해야 하니 미리 여쭤보고 적용할려고 해요

      • 네네~ 지금 받아서 적용하시면 본문 글자 간격을 조절하실 수 있습니다.
        2.5.1 버전에서 모바일 뷰의 본문 글자 크기를 80%로 축소한 변경사항도 있으니 참고 바랄게요!
        제 블로그에 반영된 사항 참고해 보시고 그것도 모자르다 싶으시면 테스트 블로그 하나 만드셔서 먼저 적용해 보고 실제 블로그에 적용해 보시는걸 추천드립니다

      • LunaCell 2021.09.12 12:04 신고

        음.. 근데 지금 해보니깐 본문 글자는 변함이 없고 블로그 메뉴들만 간격이 바뀌는데 기분 탓이겠죠? 테스트 블로그 적용해보니 본문글은 작동 안되고 블로그 메뉴들만 길어지고 작아지고 그러네요.

      • 아 죄송해요 ㅠ 착오가 있어서 재업로드 했는데 다시 받아서 해보시면 잘 될거예요!

      • LunaCell 2021.09.12 12:31 신고

        잘 되네요 감사합니다!

    • 허수아비 2021.09.13 12:39

      오랜만에 들어와보네요. 그보다 미넴님 현재 글 크기와 간격이 딱 적당한데 설정 값 공유해주실 수 있나요?
      답글

    • 롤롤롤롤롤 2021.09.18 07:14 신고

      아미넴님 안녕하세요^^ 드디어 고래스킨에서 미넴스킨으로 이사했습니다!.! 근데.. 프로필때문ㅇㅔ 카테고리가 처음에 안보여서..
      프로필을 없애고 싶은데 스킨편집에 들어가도 프로필 안보이기?? 이렇게 없어서요ㅜ.ㅜ
      아 그리고 맨 아래 문구 나를 이롭게 ~ 디자인 바이 아미넴 이거중에 디자인 바이 아미넴만 남겨두어도 괜찮을까요??
      답글

      • 사이드바 요소들은 관리자 페이지 > 꾸미기 > 사이드바 가서 조절하실 수 있게 개선했어요!
        푸터는 다 바꾸셔도 괜찮구요 우측 하단에 있는 Mynem Skin x.x.x만 유지해주시면 됩니다 ㅎㅎ
        이용해 주셔서 감사합니다!

    • 추석 연휴 잘 보내고 계신가요.
      다른 게 아니고 궁금한 점 2가지가 있어서 들렀습니다.

      오늘 2.5.6버전을 덮어씌웠는데요.
      스킨 편집에서 프로필 자기 소개 부분에 글을 쓰니까 글씨 크기가 너무 커지네요.
      그래서 편집 설정 부분에서 기준 폰트를 18에서 14로 줄여줬더니 예전 크기가 됐는데 대신에 사이드바 하단의
      최근글이나 인기글들 크기까지 더 작아지네요. ^^;;;;

      그리고 두번째는 사이드바에서 최근글이나 인기글 썸네일 크기가 전에는 정사각형이었는데 지금은
      가로가 약간 미세하게 긴 사이즈로 바뀐 건가요?
      글을 올리면 대표 썸네일 하단이 전부 조금씩 잘려나가 보이네요. ^^;;;

      이상 2.5.6버전 체험기였습니다. 그럼 즐거운 추석 되세요.

      답글

      • 기준 폰트는 18에 맞춰 대부분 디자인 되었기 때문에 크게 벗어나면 안 됩니다. +-1 정도만 추천드리구요. 본문 내용 글자 크기 조절은 본문 폰트 크기 비율 옵션을 이용해 주세요.
        프로필 소개 부분 글자 크기가 커지는건 이해가 정확히 안 되는데.. 혹시 제 블로그나 프리뷰 블로그에서도 크게 보이시나요?

        최근 글, 인기 글 썸네일은 현재도 정사각형이 맞습니다.

        방금 2.5.6 다운 받아서 다시 적용시킨 프리뷰 블로그입니다.
        https://armynem.tistory.com/
        전부 기본 값이구요. 위의 블로그처럼 안 보이면 잘못 적용하셨을 가능성이 있는데 다시 적용해 보시기 바랄게요!

        즐거운 명절 되세요 ㅎ

        p.s 제대로 동작하지 않는 느낌이 든다면 기존 파일들이 캐시에 남아 있어서 그럴 수도 있습니다. 윈도우 크롬 기준 Ctrl+F5로 강제 새로고침 후 다시 해보세요~

    • 방금 다시 덮어씌우고 설정해보니 정상적으로 되네요;;; 뭐가 문제였는지 모르지만 미넴님 말씀대로 티스토리 서버가 피곤해서
      적용 오류가 많은가 봐요;;;
      오늘 반나절동안 이 설정이 꼬여서 버전마다 다 덮어씌우기를 해봤는데 이거 블로그 시작도 하기 전에 저품질로 이어지지 않을지
      걱정이 태산이예요... ㅠㅠ

      질문 하나 더 드릴께요..
      사이드바 설정으로 들어가니까 사이드바1, 사이드바2가 있는데 사이드바 2에 아무것도 안넣고 설정 저장을 누르면
      유효한 뭐가 없다고 하면서 저장이 안되길래 다른 모듈 하나 넣고 누르니까 저장이 되는데 이게 맞는 건가요?
      처음엔 카테고리랑 프로필을 사이드바 2에 넣었더니 블로그에 표시가 안돼서 모두 사이드바 1에 넣었더니 나오더라고요.

      그리고 사이드바2에는 뭐 하나 들어가야 하나보다 싶어서 방문자 그래프를 똑같이 넣어놨구요...
      그럼 편안한 밤 되세요...
      답글

      • 네 다행이네요 ㅎㅎ
        전체를 사이드바 메뉴에서 설정 가능한 요소로 바꾸면서 사이드바를 1, 2로 나눌 이유가 없어져서 최신 버전에서는 사이드바1로 통일하였습니다.
        사이드바2가 아직 남아있다면 뭔가 또 꼬인듯 싶은데 정상적이라면 사이드바1만 보여야 맞거든요. 이건 어떻게 하신건지 몰라 정확히 도움을 못드리겠지만 테스트 블로그 하나 만들어서 적용해 보시는걸 추천드릴게요!

        미넴 스킨으로만 여러번 교체하신거라면 html 구조가 거의 같기 때문에 저품질 걱정은 크게 안하셔도 될 것 같습니다.

    • 답변 감사드리고 모두 해결됐습니다.
      가만 생각해보니 제가 파일을 새로 덮어씌운 다음 덮어씌우기 전에 열어두었던 관리자 페이지 상태에서 설정을 건드린 게 원인인 것 같아요.
      이래서 머리가 나쁘면 평생 고생인가봐요.
      저품질 걱정 안해도 된다는 답변에 용기 백배 얻어갑니다. ㅎ
      답글

    • 시간이 지나니 아까 말씀드린 현상으로 다시 돌아갔네요.
      프로필 설명글이랑 글보관함 목록 글씨만 유독 크게 나오고 최근글, 인기글 썸네일 하단 잘림...;;;;
      무슨 이유에서인지도 모르겠고 전 그냥 2.4.2 버전으로 돌아가야겠어요.. 에구... ㅠㅠ
      답글

    • 지금 심호흡하고 다시 덮어씌우고 해보려고요.
      이후에 캐시도 지워보고 안되면 안되는대로 2.5.6 그냥 쓸래요.
      여러모로 살펴보니 최신버전이라 가장 성능도 좋아서 포기 못하겠어요. ㅋ
      답글

    • 특징을 하나 찾아냈어요.
      설정을 하나하나 바꿔봐도 다 괜찮았는데 HTML 수정페이지에 애드센스 코드를 집어넣고 저장하고 나면 위에 말씀드린
      증상들이 다시 나타나요...
      문제는 그 다음엔 애드센스 코드를 지워도 다시 돌아오지는 않네요.
      이제 캐시 삭제하고 나서 다시 보고드릴께요....;;;
      답글

    • 아벤타 2021.09.20 14:09 신고

      티스토리 블로그 처음 시작하는데, 좋은 스킨 공유 감사합니다.
      친절하게 작성된 가이드 따라서 설치했고, 실제로 적용해보니 깔끔해서 좋네요!
      스킨 개발하기에 많은 시간을 들인 것 같은데 얼마나 걸리셨나요?
      HTML 소스를 보니 정말 많은 노력이 들어간 것 같아서요 ㅎㅎ
      감사합니다!
      답글

      • 좋게 봐주셔서 감사합니다 ㅎㅎ
        그냥 정해놓고 한건 아니고 시간날때 틈틈이 한거라 정확히는 모르겠구요
        올해 2~3월달에 처음 시작해서 지금까지 미흡한 부분 보완중입니다
        저도 처음 만들어 본거라 구조적으로 완전하지 못한 부분이 좀 있는데 다음 스킨은 좀 더 깔끔하고 심플하게 만들어 보려고 합니다 :)

    • 어제 다른 스킨을 적용시켜 확인해보니까 티스토리 서버가 좀 불안정했었던 거 같아요.
      다른 스킨 파일을 등록하려고 스킨 변경 페이지로 들어가면 파일을 업로드 하는 두 탭 안쪽이 모두 비어있어야 하는데
      좌측 탭에 계속 현재 파일목록이 그대로 나오더라고요....
      그걸 수동으로 지우고 나서 다른 스킨을 적용해서 하루 사용했었는데 아무래도 서버가 오류였나 싶어 오늘 2.5.6버전을 다시 업로드하고 적용시켰더니 제대로 적용됐어요.
      너무 신경써주셔서 감사합니다. 앞으로 계속 잘 사용할께요.

      아, 그런데 다른 질문 하나 드릴께요.
      가만 살펴보니 제 블로그가 이제 21일째라서 다음에서 최적화도 안되어있고 제 글이 아직 검색은 안되더라고요.. ㅎ
      미넴님 스킨만 교대로 교체한건 제가 생각해도 코딩이 별차이 없으니 괜찮을 거 같은데 어제 다른 스킨으로 교체했다가
      오늘 미넴님 스킨으로 다시 교체하느라고 html이 몇 번 뒤집힌 게 마음에 좀 걸리네요...;;;
      아직 다음 최적화 전이니 별이상 없다고 생각하고 그냥 계속 블로그 포스팅만 해도 괜찮을까용... ㅡ.ㅡ;;;
      그럼 행복한 추석 되세요...
      저는 동생이랑 곰탕 한사발로 근사하게(??) 추석 보냈습니다....
      답글

      • ㅎㅎ 미넴스킨에 관심가져 주셔서 감사합니다~
        제 생각에는 토리님은 블로그를 보니 아직 초반이신 것 같은데 너무 신경 안 쓰셔도 될 듯 싶습니다. 차분히 양질의 글을 작성하시고 지금부터 꾸준히 관리하시면 차츰 나아질거예요.
        연휴 마무리 잘 하세요 ㅎ

    • 2021.09.22 23:04

      비밀댓글입니다
      답글

      • 네 안녕하세요. 관리자 페이지 > 꾸미기 > 사이드바에서 사이드바에 있는 모든 요소들을 빼거나 넣을 수 있습니다.

        아레 FAQ 게시물 참고해 보세요!
        https://sangminem.tistory.com/579

        미넴스킨 이용해 주셔서 감사합니다.

    💲 추천 글