미넴 스킨 제작 프로젝트

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

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

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

 

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

 

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

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

최신 브라우저를 기준으로 테스트를 했기 때문에 오래된 기기에서는 제대로 동작하지 않을 수 있습니다.

 

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

 

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

 

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

 

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

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

sangminem.tistory.com

 

목차

     

    업데이트 히스토리

    (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.0 다운로드 바로가기

     

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

     

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

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

     

    히스토리 관리를 위해 1.0 버전 다운로드 링크는 유지를 하겠습니다. 위의 최신 버전 이용 바랍니다.

    Mynem Skin V1.0.zip
    2.71MB

     

    미넴 스킨 등록

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

     

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

     

    추가 버튼을 클릭 합니다.

     

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

     

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

     

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

     

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

     

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

     

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

     

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

     

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

     

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

     

    미넴 스킨 적용

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

     

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

     

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

     

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

     

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

     

     

     

    피드백 버전 기능 소개

    아직 정식 버전에는 적용되지 않은 피드백 버전의 유용한 기능을 먼저 소개해 드립니다.

     

    본문 적용 글꼴 무시 옵션

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

     

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

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

     

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

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

     

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

     

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

     

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

     

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

     

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

     

    커버 스타일 변경

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

     

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

     

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

     

    강조 커버 추가

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

     

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

     

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

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

     

    사이드바 숨기기 옵션

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

     

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

     

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

     

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

     

    사이드바 크기 고정

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

     

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

     

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

     

    기본 다크 모드 추가

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

     

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

     

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

     

    미넴 스킨 기능 소개 및 설명

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

     

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

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

     

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

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

     

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

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

     

    다크 모드 추가

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

     

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

     

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

     

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

     

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

     

     

    사이드바 위치 조정 옵션

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

     

    사이드바 왼쪽으로 이동 옵션을 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

     

    사이드바 기능 소개

    먼저 사이드바에 추가할 수 있는 기능을 소개합니다.

     

     

    다국어 번역 지원

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

     

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

     

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

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

     

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

     

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

     

    티스토리 블로그(홈페이지) 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 으로 변경하고 광고 코드 값을 넣기만 하면 바로 적용이 됩니다. 구글 애드센드 적용에 대한 기본적인 이해가 있으신 분들만 사용할 것이라 예상되므로 광고 코드에 대한 설명은 따로 하지 않겠습니다.

     

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

     

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

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

     

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

     

    본문 구글 일치하는 광고

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

     

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

     

    본문 상단 구글 광고 2개

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

     

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

     

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

     

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

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

    sangminem.tistory.com

     

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

     

    좁은 화면 광고 게재 방법

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

     

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

     

    푸터 설정

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

     

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

     

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

     

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

     

     

     

     

    기타 유용한 기능

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

     

    본문 프로그레스바

    본문 글의 위치를 파악할 수 있는 프로그레스바 기능을 제공합니다. 스킨 편집 화면에서 켜고 끌 수 있습니다. 상하좌우 다 있는데 상단과 좌측은 본문의 위치를 알 수 있는 프로그레스바이고 하단과 우측은 본문 외의 길이를 알 수 있는 프로그레스바입니다. 취향에 따라 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으로 변경해 보겠습니다.

     

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

     

    권장 사용 플러그인

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

     

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

     

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

     

    적용 후 블로그 속도 측정

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

     

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

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

     

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

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

     

    마무리

    진심으로 많은 분들에게 도움이 되었으면 좋겠다는 마음으로 만들어 보았습니다. 급하게 작성해서 빠진 부분이 있는 지 모르겠지만 추후 지속적으로 보완하기로 하고 1차 마무리를 하겠습니다.

     

    무료 스킨인 만큼 무리한 신규 기능 요청은 받지 않겠지만 다양한 의견을 주시는 것은 좋을 것 같습니다.

    유용하게 사용하시기 바랄게요.

    감사합니다 :)

    728x90