미넴 스킨 제작 프로젝트

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

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

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

 

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

 

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

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

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

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

 

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

 

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

 

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

 

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

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

sangminem.tistory.com

 

 

목차

     

    업데이트 히스토리

    (2021.10.11) 티스토리 미넴 스킨 2.5.9 업데이트 - 본문 하단 광고 및 로딩 화면 추가

    (2021.09.28) 티스토리 미넴 스킨 2.5.8 업데이트 - 구글 광고 게재 속도 개선

    (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.9 업데이트 - 본문 하단 광고 및 로딩 화면 추가

     

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

     

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

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

     

    미넴 스킨 등록

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

     

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

     

    추가 버튼을 클릭 합니다.

     

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

     

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

     

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

     

    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

     

    마무리

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

     

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

    감사합니다!

    BIG

    댓글248

    • 이전 댓글 더보기
    • 2021.09.22 23:04

      비밀댓글입니다
      답글

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

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

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

    • 이근뎅 2021.09.26 18:37 신고

      스킨 잘 쓰고 있습니다 감사합니다 ~
      답글

    • ㅇㅇ 2021.09.26 23:56

      미넴님 그 스킨 상단 광고가 정상적으로 표시되지 않는 문제가 자주 나타나던데 이 부분도 혹시 검토 가능하실까요? 미넴님 블로그에서도 상단 광고가 저에게는 송출이 안되고 있더라구요. 어디가 문제인지 잘 모르겠네요ㅡ
      답글

      • 일단 저는 문제없이 보이고 있는데 모든 페이지에서 그런 현상이라면 여러가지를 따져봐야 원인을 알 수 있을 것 같은데 브라우저 문제일 수도 있고 그 외 여러 환경적인 문제일 수도 있는데 제한된 정보로는 알기가 어렵네요. 크롬 브라우저 이용하신다면 시크릿 창으로도 접속해서 테스트 부탁드릴게요.

        만약 일부 페이지에서만 그런 현상이 나타난다면 페이지 뷰 수 부족으로 인한 정상적인 현상입니다.

      • ㅇㅇ 2021.09.27 01:20

        삼성 인터넷 브라우저로 접속하는데 상단 광고가 모두 보여지질 않아서요. 저뿐만 아니라 미넴님도 안보여서 한번 테스트 해보셔야 될 것 같아요.

      • 아네 또 삼성 브라우저군요;
        삼성은 원래 문제가 많은데 내키진 않지만 아무래도 쓰는 사람이 많을테니 신경 좀 써야겠네요.

      • 갤럭시폰 삼성 브라우저로 테스트 결과 상단 광고 게재에 전혀 문제가 없습니다.
        갤럭시가 아닌 안드로이드 폰에 삼성 브라우저를 깔고 테스트를 해 봤지만 역시 문제없었습니다.
        개인적인 문제 같은데 브라우저 업데이트를 한 번 해보시거나 인터넷 사용기록이나 쿠키 같은걸 전부 삭제하신 뒤에 다시 테스트 해보시기 바랄게요!

        인터넷이 느린 경우 늦게 광고가 게재되어 문제가 있는 것처럼 보일 가능성도 있습니다.

    • 밝은 워터수 2021.09.27 16:39 신고

      스킨 무료 설치하여 작성하여 잘테스트 하고 있어요 ~~
      언제나 노력은 언젠가 보답이 있으리라고 봅니다
      지금처럼 좀 더 업하여 사업하는 많은 도움이 되리라고 봄니다
      수고하셨어요 ~~ 감사합니다
      답글

    • 2021.09.28 12:52

      비밀댓글입니다
      답글

      • 안녕하세요.
        관련 글은 관리자 페이지에서 플러그인에서 카테고리 글 더보기 기능만 꺼주시면 바로 해제 가능하구요.
        복사버튼은 현재 따로 빼는 기능이 없는데 기능 켜고 끌 수 있도록 조만간 업데이트 해서 올려드릴게요!
        감사합니다.

      • 2021.09.28 13:23

        비밀댓글입니다

      • 말씀하신 기능 추가해서 올려 놓았으니 다음 게시물 확인 부탁드릴게요!
        https://sangminem.tistory.com/594

    • . 2021.09.28 13:33

      크롬 데스크탑, 모바일에서 상단 광고가 나타나다 나타나지 않다 뒤죽박죽인 상황이 있네요. 다른 사람도 관련해서제기 하였던데확인 가능하실가요?
      답글

      • . 2021.09.28 13:38

        이게 그거네요 Inprivate 모드로 들어가지마시고 일반 브라우저로 접속했다가 나중에 다시 블로그 접속하면 광고가 표시되지 않는 문제가 있어요. 아마 쿠키쪽 문제 같은데 한번 재현해보셔야될겁니다.

      • 인프라이빗 모드 얘기하시는거보니 엣지에서 그런 문제가 발생하는거 같네요.
        크롬에서 정상이라 미처 확인하지 못했을 수 있는데 확인해 보겠습니다 제보 감사드려요!

      • 원인은 찾았고 조만간 업데이트 버전 게시하겠습니다. 크롬이랑 엣지랑 다르게 동작하는 부분이 있네요.
        문제점 찾아 주셔서 다시 한 번 감사드립니다.

      • . 2021.09.28 16:12

        아 감사합니다. 근데 엣지랑 크롬이랑 둘 다 크로미움이라 상관 없을겁니다. 제가 테스트한 환경 중에 크롬에서도 상단 광고가 나타나지 않았습니다.

        그리고 추가적으로 광고가 로딩되는 속도에 비해 느리다는 문제도 약간 있습니다.

        장문의 글 기준으로 쳤을 때 상단 광고 2개가 뜨는 시간은 약 3.75 ~ 4초 정도로 계산되어집니다.
        일반 사용자들이 페이지가 나타나자마자 바로 스크롤 내리는 빨리빨리 한국인에게는 다소 손해가 있지 않을까 싶습니다.

        나중에 날 한번 빡세게 잡아서 새 기능보다 버그 수정과 개선에 중점적으로 작업하시는 것도 나쁘지 않을 것 같아요.

      • 저도 같은 크로미움이라 당연히 동일할거라 생각했는데 다르네요.
        말씀하신대로 그 외에도 여러 테스트를 진행중입니다. 어느 정도 개선되면 다음 버전 올리도록 할게요!

      • . 2021.09.28 19:26

        광고 위치도 개선해야겠네요.. 너무 뒤죽박죽이고 하나는 심각한 버그도 있습니다. 결정적으로 글을 읽는 사람의 입장을 생각해봤을 때, 광고가 글을 망치는 요소가 많다는 점입니다.

        1. 모바일 전면 광고를 On 했을 때, 글을 누르고 들어가기 전, 전체화면으로 큰 광고가 나타나는 경우가 있는데 이때 닫기 버튼이 없습니다..
        강제 전체 광고를 봐야하는데 뒤로가기 눌러고 안 없어지고 사람들이 매우 싫어할 것 같습니다. 이건 버그 같아요.

        2. 모바일에서 블로그 이름 위에 광고 표시는 없애야겠습니다. 이미 본문 상단광고가 있는데 이건 왜 들어있는지 솔직히 모르겠네요.

        너무 눈에 복잡하고 로딩 시간을 잡아 먹는 요소가 되는 듯 보였습니다. 무엇보다 저사양 스마트폰 사용자에게 렉 유발합니다. F12 개발자 모드 켜서 모바일 환경을 "보급형 휴대전화"로 맞추시면 페이지 전체 로딩하는데 무려 14.5초가 걸린다는 결과가 나왔습니다..

        3. 앵커광고는 아래로 내립시다. 앵커광고 바로 아래 글 제목이 생성되던데 시작부터 화면 부위 25%를 잡아먹고 시작하면 사람들이 글을 잘 못 볼 것 같아요. 아이폰 유저가 싫어할 듯 싶습니다.

        4. 모바일 환경 본문 상단 광고 아래 작은 좌우 스크롤 없애야겠습니다. 스크롤리 인식되어서 작은 화면의 사용자들은 상단 광고 영역에 터치를 하고 글을 내려야 하는데 광고 좌우가 움직이면서 스크롤이 안내려갑니다.

        5. 목차를 열고 글을 누르면 자동으로 내려가는데 내려가는 모션이 부자연스럽게 끊기며 프레임이 내려가고 성능 하락한다는 사실이 있습니다. 목차를 눌렀을 시, 내려가는 모션이 자연스럽고 부드럽게 내려갔을면 좋겠습니다. 이건 최적화 문제 같아요.

        기능 개선과 추가는 정말 감사드립니다. 그런데 업데이트 주기를 보시면 빠르면 하루 늦어도 사흘마다 업데이트를 내놓아주셔서 버그 잡기에 시간이 충분치 못하다고 생각됩니다.

        친효님 스킨처럼 베타와 정식 둘을 같이 나누어서 운용하는 것도 나쁘지 않다고 보여요.

      • 아 여러 가지를 수정하다보니 또 버그가 생겼네요 ㅠ 좀 더 테스트 해볼게요.
        예전에 피드백 버전을 운용하긴 했는데 둘다 신경 쓰기가 쉽지 않아서 다시 하나로 합쳤거든요. 이건 좀 더 생각해 보도록 하겠습니다.
        상세한 말씀 감사합니다!

      • . 2021.09.30 15:09

        삼성 브라우저, 구글 크롬 기준 블로그 메인 화면에서 인피드 광고와 메인 하단 및 본문 하단 광고가 표시되지 않는 문제가 발생하고 있네요. 근데 이건 친효스킨도 마찬가지라 티스토리의 송출 로직을 변경된건진 모르겠습니다.

        확인이 필요할 것 같으며 작동 방식은 한번은 접속하시고 닫은 뒤, 재접속햐보시길 바랍니다.

      • 아네 이건 저도 확인한 문제인데 티스토리 문제인지 애드센스 자체 문제인지 모르겠습니다. 로직 자체에는 문제가 없어보여요. 쿠키 삭제하면 제대로 되는걸로 봐서 쿠키 문제 같기도 한데 이쪽으로는 지식이 많지 않아서 추측만 하고 있어요.

    • 제이온 (J.ON) 2021.10.06 19:33 신고

      스킨 오늘 처음 적용해봤는데 속도도 빠르고 참 이쁜 것 같습니다!! 질문 드리고 싶은 점이 스킨 바꾼지 얼마 안돼서 그런지 스킨 편집란에서 애드센스 코드를 입력해도 광고 반영이 안되는데 조금 기다려야하나요? 본문 상단 2개 광고는 Google AdSense 마크만 있고 추천글 쪽은 빈 여백으로 되어 있습니다 ㅠㅠ
      답글

      • 미넴 스킨 이용해 주셔서 감사합니다.
        일단 광고가 안 뜨는 건 Ad client is missing from the slot. 이런 에러가 뜨고 있는데 광고 코드가 잘못됐을 가능성이 있어 보입니다.
        추천글은 저는 잘 보이는데 브라우저 자체 쿠키 문제일 수도 있습니다. 시크릿 모드로 확인해 보세요.

      • 제이온 (J.ON) 2021.10.06 20:01 신고

        쿠키날리니까 잘되는군요..감사합니다ㅎㅎ

      • 제이온 (J.ON) 2021.10.07 08:52 신고

        아미넴님 안녕하세요.
        게시글을 불러올 때, 애드센스 먼저 로딩이 끝나고 불러오고 싶어서 아래 다른 분의 포스팅을 참고했었는데요~
        https://type.tistory.com/25
        첫 번째 방식은 작동이 안되고, 두 번째와 세 번째 방식은 블로그 최상단에만 로딩바가 빙글빙글 무한으로 도는 것을 확인했습니다. 미넴 스킨에서 로딩을 적용하는 방법이 있을까요?

      • 나와있는 대로 테스트를 좀 해보니까 작성자 본인 스킨에만 해당하거나 소스 자체가 좀 불완전한거 같네요.
        나중에 미넴 스킨에 적용할 수 있도록 포스팅 한 번 하도록 할게요~

      • 제이온 (J.ON) 2021.10.07 21:05 신고

        감사합니다ㅎㅎ

      • 로딩 화면 적용 방법 포스팅 했으니 참고 바랄게요 ㅎ

        https://sangminem.tistory.com/624

    • 티스토리 재시작한지 한달 14일만에 애드센스 통과했습니다.
      앞으로 좋은 기능 많이 활용해볼께요. ^0^
      답글

    • 본문 상하단이랑 사이드바에 광고를 넣어놨더니 광고가 먹통일때가 더 많은데 아직 포스팅이 많지 않아서일까요.....
      아니면 구글 문제일까요....
      답글

    • 2021.10.15 13:06

      비밀댓글입니다
      답글

      • 안녕하세요~ 모바일에서도 적용하려면 관리자 페이지에서 꾸미기 > 모바일 > 티스토리 모바일 웹 자동 연결을 사용하지 않습니다 로 설정하시면 됩니다 ㅎ

    • PC에서는 다 정상인데 모바일로 접속을 하면 사이드바의 애드센스 광고가 왼쪽으로 밀리고 우측이 3분의 2쯤 잘려나오는데 이건 무슨 문제일까요...
      답글

    • center 는 배너가 좌측으로 치우쳐서 넣은 건데 방금 다시 지우고 사이드바 광고를 새로 만들어서 적용시켰는데도 이번엔
      핸드폰에서 배너 우측이 잘리네요..;;;;
      광고 배너가 사각, 수직, 수평, 이렇게 3가지로 설정이 선택사항이 됐던데 3가지를 모두 시험해보고 보고드릴께요...;;

      3가지 모두 좌측이 약간 잘리네요...
      핸드폰에서처럼 PC 브라우저를 좁혀도 배너가 정상적으로 나오는데 유독 핸드폰에서 사이드바를 열어보면 배너가 한쪽이 잘려나와요....;;
      답글

      • 아네 잘 모르겠네요. 제가 적용한 코드 보내드릴테니 참고해 보세요~

        <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
        <ins class="adsbygoogle" style="display: block; height: 600px; width: 300px;" data-ad-client="ca-pub-000000000000000" data-ad-format="auto"></ins>
        <script>
        (adsbygoogle = window.adsbygoogle || []).push({});
        </script>

    • 혹시 배너 설정을 반응형이 아니라 고정형으로 하신 건가요? ㅇ.ㅇ?

      새로 만든 배너를 고정형으로 설정하니까 정상으로 나오는데 그럼 본문 상단이나 하단 배너도 고정으로 해야 되나요??
      답글

      • 저는 그냥 제가 코드 만들어 쓴건데 생각해보니 잘 안 되시면 관리자 페이지에서 수익 > 애드센스 관리로 들어가서 광고 설정 사이드바 사용함으로 해서 사이드바에 배치하시면 됩니다.

    • 가르쳐주신 코드도 삽입해보고 애드센스 관리 페이지에서도 설정해봤는데 애드센스 관리 페이지에서 설정하면 PC에서는 사이드바 광고가 나오는데 모바일에서는 사이드바 광고가 아예 안나오고 위에 써주신 코드도 응용해봤지만 마찬가지로 배너 좌측이 3분의 1 정도 잘려나가네용...
      일치하는 광고 게재가 가능해지기 전까지 사이드바쪽은 아무래도 고정형으로 사용해야겠어요.
      늦은 밤 답변 감사합니다.
      답글

    • 2021.10.19 21:12

      비밀댓글입니다
      답글

    • 선생님 정말 잘보고있습니다. 다름이 아니라 이렇게 스킨 버전 업데이트 나올때마다 스킨변경을 해야하는건가요?
      그렇다면 스킨 변경시 재설정해야하는것들을 하나하나 다 해줘야하는거죠?

      스킨 변경하고싶은데 손 쉽게 스킨 변경후 설정하는 방법이 있을까요?

      변경하고싶은데 사실 엄두가 안납니다 ㅠㅠ
      답글

      • 안녕하세요! 기존 셋팅 값을 별도로 잘 정리해 두는 것 외에는 별 다른 방법이 없을 듯 싶습니다~
        스킨 업데이트가 자주 되더라도 현재 별 문제 없이 사용하고 있다면 꼭 필요한 기능이 있을 때만 업데이트 해 주시면 될 것 같습니다 ㅎ

    • 사랑 2021.10.28 12:55

      미넴님! 예전에 목차만드는 글들을 보고 저도 적용해보고싶어서 이것저것 문의드렸었는데 매번 친절히 답주셔서 감사했습니다. 오늘 날잡고 기본스킨에서 미넴스킨으로 이사해보려구요. 좋은 글들 매번 잘 보고있습니다♡
      답글

    • 스킨 최종버전 변함없이 잘 사용하고 있는데요.
      혹시 애드센스 자동 설정 사용하시나요?? ^^??
      답글

    • 플래몽드 2021.11.17 18:37 신고

      아미넴님 안녕하세요!
      지난 댓글에서 친절히 알려주셔서 디스플레이 광고 설정하고 스킨편집에서 광고코드를 총 4개(상단2개/하단2개) 넣었는데요..
      일주일이 넘도록 지났는데도 빈화면으로 보이네요 ㅠ
      혹시 스킨편집에서 넣어도 html/css 설정을 따로 해야하는건가요~?
      아니면 페이지뷰수가 낮아서 비어보이는건지 잘 모르겠어서 다시한번 여쭤봅니다...
      답글

      • 안녕하세요~ 뷰수가 충분히 확보된 옛날 글들에서도 안 보인다면 잘못 적용한 부분이 있을 거라 판단되는데 직접 봐야 좀 더 정확히 알 수 있을 것 같습니다

      • 플래몽드 2021.11.18 14:50 신고

        친절한 답글 정말 감사합니다!
        뷰수가 충분히(나름..) 확보된 옛글에서도 여전히 비어보이는데 티스토리앱으로는 구글광고가 뜨는것은 확인했습니다.
        Pc/일반모바일웹으로 보았을때는 상/하단광고 및 중간광고 모두 비어보이거나 안뜨는 상황인데…
        뭔가 코드를 잘못넣은게 있어서그럴까요?ㅠㅠ

      • 아 이걸 이제 봤네요~ 앱에서는 아마 자동광고라서 문제 없었을 수도 있는데 웹에서는 스킨 적용 시 뭔가 에러가 있거나 광고 코드를 잘못 넣었을 가능성도 있어 보입니다.

      • 플래몽드 2021.11.22 13:00 신고

        아 그럼 스킨을 아예 다시 처음부터 적용해보는 방법(?) 으로 해결해보겠습니다 ㅎㅎ 감사해요!!

    • 질문 하나 남기고 자러 갑니다.
      블로그 카테고리 옆이랑 상단 메뉴 텍스트 옆에 윈도우+콜론을 사용해서 얼굴 이모티콘을 넣어줘서 여지껏 쓰고 있었는데요.
      며칠 전부터인가 그 이모니콘들이 칼라 이모티콘이 아니라 그냥 단순한 원칼라 이모티콘으로 표시가 되고 있는데 지금 보니까
      이 사이트도 그러네요.
      혹시 이것도 티스토리 로직의 변화 때문에 그런 건가요??
      답글

      • 저도 바뀐걸 확인했는데 이모지는 운영체제나 웹 브라우저(브라우저 엔진)의 영향을 받는 것 같습니다. 다른 브라우저로 확인하시면 또 다르게 보이실 거예요~ 이건 어찌할 수 없는 부분입니다. 혹시 이런 현상이 거슬리시면 이모지 사용을 안 하셔야 할 듯 싶습니다.

    💲 추천 글