티스토리

심플한 티스토리 스킨 배포: Mocha (수익형 블로그용)

현재 배포용 티스토리 스킨을 제작 중인데, 그에 앞서 제가 사용하던 스킨 중 하나를 배포합니다. 개인적으로 사용하려고 만든 수익형 스킨인만큼 메인 화면 구성이라던지 댓글, 방명록 등의 기능이 없이 딱 글과 카테고리 페이지만 있습니다.

빠른 속도와 검색엔진 최적화(SEO)만을 염두에 두고 만들었기 때문에 댓글, 방명록, 미디어, 위젯, 커버, 태그 등 대부분의 기능을 지원하지 않습니다. 심플하고 빠른 스킨을 찾는 분에게 적합할 듯 합니다.


스킨 다운로드 & 데모 페이지

파일 다운로드: mochaskin.zip
데모 확인하기: mochaskin.tistory.com

[07/28] 대표 이미지 설정 안했을 때 제목 안 뜨는 현상, 다른 게시물 플러그인 레이아웃 수정
[08/06] 공유 기능 수정

스킨을 변경하기 전에 (중요!)

새로운 스킨을 적용하기 전에 꼭 확인하셔야 할 사항이 몇 가지 있습니다.

  • 기존에 사용하던 스킨 백업 및 저장하기
  • 네이버 웹마스터 도구 메타 태그 & 구글 콘솔 메타 태그 저장하기
  • 구글 애널리틱스 코드 저장하기

혹시 모를 돌발 상황을 대비해 위의 사항들을 꼭 지켜주세요. 이를 지키지 않아 생기는 문제는 모두 해당 블로그 운영자 책임이며, 스킨 제작자에게는 책임이 없습니다.

기존에 사용하던 스킨 백업하기

  • 티스토리 관리자 화면 > 꾸미기 > 스킨 변경을 누릅니다.
  • 사용중인 스킨 > 보관을 누릅니다. ‘보관’ 버튼은 한 번이라도 스킨을 수정한 적이 있는 경우에만 뜹니다.

기존에 사용하던 스킨 복원하기

기존에 사용하던 스킨으로 복구하는 방법은 두 가지가 있습니다.

  • ‘스킨 보관함’을 통해 복구하기
  • 컴퓨터에 다운받아 둔 스킨 다시 업로드하기

스킨 적용하기

스킨 적용 방법은 다른 커스텀 스킨 적용 방법과 동일합니다. 스킨을 내려 받으신 뒤, 폴더 안의 모든 파일을 업로드 해주세요. 폴더 루트에 있는 모든 파일을 업로드 하고 images 폴더 안에 있는 파일도 모두 업로드 해주세요.

스킨 적용하기

‘저장’ 버튼을 누르시면 스킨 저장 팝업이 뜨는데 적당한 이름을 입력한 뒤 ‘확인’ 버튼을 누릅니다. 그리고 우측의 ‘스킨 보관함’에서 방금 저장 스킨에 마우스를 올리시면 ‘적용’ 버튼이 뜹니다. 이 버튼을 누르시면 블로그에 스킨이 적용됩니다.

스킨 보관함

스킨 기본 설정

스킨을 적용한 후 가장 먼저 해야할 것은 리스트 스타일, 메뉴 변경, 그리고 헤더 기본 이미지 변경입니다. 아래 내용을 참고하세요!

메인 페이지 레이아웃 변경하기

‘블로그 관리 > 꾸미기 > 스킨 변경’에서 ‘편집’ 버튼을 누릅니다. 그러면 아래와 같이 스킨 편집 페이지가 뜨는데요. 여기서 ‘홈 화면 글 수’와 ‘글 목록 글 수’를 적당한 숫자로 조정합니다. ‘홈 화면 글 수’는 말 그대로 메인 페이지에 뜨는 게시물 수, 그리고 ‘글 목록 글 수’는 카테고리 페이지(각 메뉴)에 뜨는 게시물 입니다.

편집 화면

적당한 갯수를 선택하셨다면, 이제 ‘홈 설정’과 ‘기본 설정’의 ‘목록 구성 요소’를 ‘목록만’으로 변경합니다. 그리고 상단의 ‘적용’을 누르시면, 이제 글 리스트 페이지에 글 전문이 뜨는 것이 아니라 제목과 요약만 뜨게 됩니다.

메뉴 변경

현재 상단에 뜨는 메뉴는 제가 임시로 넣어둔 카테고리라 열리지 않습니다. 따라서, 이 메뉴 섹션을 변경해야 합니다.

스킨 편집에서 이번에는 ‘html 편집’으로 들어갑니다. 그리고 중간의 ‘블로그 전체 메뉴’ 섹션을 찾아 카테고리 주소와 앵커 텍스트(티스토리, 애드센스, 어필리에이트 부분)를 수정해 주세요. 메뉴가 더 필요하시다면 li부터 li까지를 한 줄씩 더 추가하시면 되지만, 3~5개가 가장 적당합니다.

메뉴 코드

헤더 기본 이미지

마지막으로 헤더 기본 이미지를 변경하는 방법입니다. 원하는 이미지의 가로폭을 680px로 조정하신 후, 아래 링크를 통해 이미지를 압축해주세요 (빠른 이미지 로딩을 위해).

tinypng.com

이미지를 압축 & 다운로드 받으셨다면, 이번에는 티스토리 스킨 편집에서 ‘파일업로드’ 탭을 누릅니다. 그리고 아래의 ‘추가’ 버튼을 눌러 해당 이미지를 업로드 해주세요.

이미지 링크 복사하기

업로드 된 이미지 마우스 우클릭 후, 링크 주소를 복사합니다. 헤더 섹션의 이미지 경로를 이 새 이미지 경로로 교체하는 작업입니다. HTML 탭으로 돌아가서 중간 쯤에 있는 섹션을 찾으시고, url() 안에 있는 파일 주소를 지워주세요. 그리고 여기에 복사해뒀던 주소를 붙여 넣어줍니다. 그리고 상단의 ‘적용’을 누르시면 헤더 이미가 변경됩니다.

애드센스 코드 삽입하기

애드센스 코드를 삽입하는 가장 좋은 방법은 숏코드(Shortcode)를 사용하는 것입니다. 글에 코드를 직접 삽입하는 경우, 나중에 어떠한 문제가 생기거나 코드를 일괄 변경해야 할 때 모든 글을 일일이 수정해야 해서 번거롭거든요.

애드센스 숏코드 설정하기

adsensemaster.herokuapp.com

위의 애드센스 헬퍼를 사용해서 코드를 생성 & 스킨 HTML에 삽입하시면 됩니다.

애드센스 코드를 1번, 2번, 3번에 붙여 넣고 상하좌우에 충분 여백을 줍니다 (무효 클릭 방지를 위한 것입니다). 그리고 빨간색 체크마크를 눌러주세요. 그러면 페이지의 아래 쪽에 애드센스 코드가 생성되는데요.

‘스크립트’ 코드를 복사해서 스킨 HTML의 /body 바로 윗줄에 삽입합니다.

글에 코드 삽입하기

HTML 파일에 스크립트 코드를 넣으셨다면 이제 애드센스 코드를 글에 직접 삽입할 수 있습니다.
애드센스 코드 삽입 예시

컨텐츠 스타일

깔끔한 포스트 레이아웃을 위해 스킨에 몇 가지 요소를 추가해뒀으니 참고하세요!

소제목 앞에 숫자 넣기

소제목 숫자 넣기

이미지 여러 개 삽입하기

이미지 삽입 예시

이미지 삽입 코드

플러그인

플러그인은 다 뺐지만, ‘카테고리 글 더 보기’는 많은 분이 사용하시는 듯 해서 레이아웃을 약간 수정했습니다.

카테고리 글 더 보기

플러그인 메뉴에서 카테고리 글 더 보기만 활성화 해주시면 됩니다.
플러그인 설정


궁금하신 점이 있다면 아래 댓글에 남겨주세요!

“심플한 티스토리 스킨 배포: Mocha (수익형 블로그용)”에 대한 18개의 댓글

  1. https://0n203.tistory.com/
    해나님께 우선 감사의 인사드립니다.
    부업일기에서 일반게시판에 스킨을 올려주어 이렇게 사용하게 되었습니다. 감사합니다.
    낮에 회사에서 다운받아서 집에서 어찌어찌 서투르게 적용시켰습니다.
    아직은 초라하고 빈약한 블로그입니다.
    이제 1일1포를 해야겠죠 ㅎㅎ

    해나님 덕분에 워드프레스도 알게 되었습니다.
    책도 구매해서 보고있고, 유튜브에서 여러 동영상도 자주 들여다 보고 있습니다.
    티스토리에서 수익형블로그를 손에 익히고 워드프레스로 넘어갈까 생각중이에요.
    그러면서 해나님의 강좌도 듣게되겠죠 ㅎㅎ
    근데 유튜브에 해나님이 검색되지 않더라구요.

    이 스킨에서 요청드리고 싶은 것은
    – 글 목록에서 제목줄만이 링크되었는데 이미지나 글 내용에도 링크가 걸려서 본 내용으로 넘어갔으면 좋겠습니다
    – 본 내용으로 넘어가 아래쪽에 공유하기에 카카오톡,카카오스토리도 되었으면 좋겠습니다.
    (티스토리 플러그인으로 있지만 그래도 공유하기에 같이 만들어지면 보기에 더 좋을것입니다)

    코로나19에 조심하시고 건강하시기를 ….

    1. 해나 내용:

      안녕하세요. 닉네임이 낯이 익네요 ㅎㅎ
      남겨주신 내용은 시간 날 때 검토해보도록 하겠습니다.
      인천입니다님도 항상 건강 유의하시고 티스토리로 세우신 목표 꼭 달성하시길 바랍니다.

  2. 해나님.. 우연한 기회에 알게 되었습니다.
    티스토리 운영 중인데 애드센스 코드 입력에 관해서는 어떻게 해야하는지 궁금해서 글 남깁니다.
    시간되신다면 방법 좀 알려주십시오.

    1. 해나 내용:

      안녕하세요 디지털농부님,

      티스토리에 애드센스 코드를 넣으실 때는 애드센스 헬퍼를 사용해서 숏코드로 삽입하실 것을 권합니다. 숏코드로 삽입하시면 나중에 어떠한 문제가 생겨서 애드센스 코드를 수정해야 할 경우, 블로그 내의 모든 코드를 일괄 수정할 수 있어서 편리합니다. 설명은 위의 사이트에 있으니 참고하시고 혹시 다른 질문 있으시면 다시 남겨주세요!

      1. 포스팅 본문 수정하는 기능은 없는건가요?

        1. 해나 내용:

          페이지 내의 불필요한 링크를 최소화 하기 위해 모두 제거했습니다. 글 수정은 관리자 페이지를 통해 하시면 됩니다.

          1. 해나님.. 친절한 설명 정말 감사합니다. 제 티스토리에 해나님 스킨 적용해서 잘 사용하게 되었습니다. 다시한번 감사하단 말씀 드립니다.

            1. 해나 내용:

              도움 되셨다니 기쁩니다 🙂
              스킨 세팅 가이드를 좀 더 자세하게 업데이트하게 되면 따로 메일 드릴게요. 행복한 날들 되세요!

  3. 양키센스 내용:

    이 스킨을 적용하고 집안의 모든 쓸데없는 물건들을 내다 버리고 싶어졌습니다.

    어쩌면 이렇게 미니멀하고 깔끔한지, 감탄했습니다.

    군더더기없는 원목탁자에 맥북한대만 딱 올라가있는느낌👍👍👍

    1. 해나 내용:

      감사합니다😁 덕분에 스킨 오류 몇 가지 수정하고 가이드도 만들었어요.
      혹시 예전 버전 쓰고 계신다면 다시 받아주세요.
      즐거운 주말 보내세요! (빡포전쟁도 화이팅!👍)

  4. 김민태 내용:

    스킨제공에 너무 감사합니다.!!
    너무 깔끔하고 좋습니다.~!!
    질문이 하나 있어서 글을 적게 되었는데요
    모카스킨 적용후 애드핏 송출이 안되는거 같은데..
    혹시 애드핏을 다시 송출하려면 어느 부분을 건드려 주어야 할까요?

    1. 해나 내용:

      안녕하세요.
      애드핏은 제가 사용해보지 않아서 잘 모르겠는데, 플러그인 사용하시면 본문에 자동으로 삽입 되지 않나요?

  5. 해나님 안녕하세요. 다시 인사드립니다.
    공유하기에 페이스북,트위터,네이버,밴드 링크에서 페이스북 오류가 생기며 연결이 안됩니다. 처음 사용때부터 그랬습니다.
    그리고 댓글을 사용할수없을까요? 방문자들이 댓글을 남기고 싶다고 하는데..

    1. 해나 내용:

      안녕하세요.
      공유 기능 수정되었으니 다시 다운 받아주세요. html 파일 중간에 있는 주소 부분을 운영하고 계신 주소로 전부 변경해 주시면 됩니다. 퍼포먼스와 SEO를 위해 대부분의 기능을 빼고 만들었기 때문에, 댓글 역시 지원하지 않습니다.

  6. 에드센스코드 내용:

    안녕하세요. 좋은 스킨 공유 감사합니다.
    이쪽분야는 초보라서 질문하나만 남깁니다.

    에드센스가 아직 승인 받지 못해서 승인 코드를 붙여야 하는데
    승인 코드는 어디에다가 삽입하면 되는 것인가요? ㅠㅠ

    1. 해나 내용:

      /head 바로 윗 줄에 넣으시면 됩니다.

  7. 리벤 내용:

    궁금한 점이 있습니다.

    애드센스 숏코드 외에 자동광고기능도 가능한가요?

    1. 해나 내용:

      자동 광고는 애드센스 승인 신청할 때 헤드 섹션에 넣으신 코드 한 줄만 있으면 설정 가능합니다. 헤드 섹션에 코드 추가하시고 애드센스 사이트에서 자동 광고 기능만 켜주시면 됩니다.

댓글 남기기

이메일은 공개되지 않습니다. 필수 입력창은 * 로 표시되어 있습니다