사용설명서

몇몇 분들은 스킨이 제공하지 않는 기능을 추가하거나 기본 틀에 벗어나 스킨의 모양새를 개조하고 싶어 스킨의 코드를 편집하려고 할 것입니다. 그러나 그런 분들은 이 스킨을 편집하기에 약간의 고통이 따를 수 있습니다. 티스토리 스킨, 프라치노 공책은 로드 속도 향상을 위해 압축되고 최적화된 별도의 자바스크립트와 스타일 시트 파일이 사용됩니다. 덕분에 프라치노 공책을 적용한 블로그들은 페이지 로드 속도가 빠른 편에 속하다는 장점이 있죠. 하지만 최적화된 코드는 사람이 보기에 어려울 수 있습니다. 그리고 전문 지식이 부족한 상태에서 코드를 편집하면 페이지에 문제가 발생할 수 있으며 이는 접근성과 속도 저하로 이어질 수 있습니다. 소스 파일 편집은 되도록 하지 말 것 되도록이면 스킨이 제공하는 자바스크립트와 스타..

티스토리 스킨, 프라치노 공책은 Google AdSense(구글 애드센스)와 Kakao AdFit(카카오 애드핏)이 지원되는 티스토리의 ‘수익’ 기능을 설정할 수 있습니다. 더 나아가 스킨은 ‘수익’으로 목록의 상단, 하단에 광고가 표시되도록 설정했을 때 정확히 어디에 표시를 할 것인지 세부 설정을 할 수 있습니다. 여기서는 이미 ‘수익’에서 목록에 광고가 상단, 하단에 표시되도록 설정했을 때를 가정하여 설명합니다. 광고가 표시되는 곳은 첫 페이지를 포함한 글 목록 페이지와 홈 커버 페이지의 상단, 하단입니다. 블로그 관리 페이지에서 ‘꾸미기’ 항목의 ‘스킨 편집’으로 이동한 후, ‘수익 기능에 의한 목록에 광고 표시’ 항목을 보면 정확히 어떤 페이지의 목록에 광고를 표시할 것인지 세부적으로 설정할 수 ..

네이버 블로그는 티스토리의 ‘구독’과 비슷한 ‘네이버 이웃’ 기능을 제공합니다. ‘네이버 이웃’은 네이버 자사의 블로그뿐만 아니라 티스토리 등의 타사 블로그도 될 수 있으며, 이는 네이버 블로그 사용자도 티스토리 블로그의 최신 글을 확인할 수 있다는 것을 의미합니다. 티스토리 스킨, 프라치노 공책은 ‘네이버 열린이웃’을 지원합니다. 이 기능을 사용하면 사이드바의 ‘블로그 구독하기’ 모듈에 ‘네이버 열린이웃 추가’ 버튼이 표시됩니다. 1. 사전 작업하기 이 옵션을 설정하기 전에 네이버 이웃커넥트 설정 페이지에서 몇 가지를 준비해야 합니다. 네이버에 로그인하고, 아래의 URL에서 username을 옵션에 입력할 네이버 ID로 대치한 후 대치한 URL로 접속해 주세요. 네이버 계정이 없다면 먼저 계정을 생성하..

티스토리 스킨, 프라치노 공책은 브라우저 윈도우에 항상 고정되어 표시되는 빠른 메뉴와 빠른 링크를 지원합니다. 빠른 메뉴는 왼쪽 위 내비게이션 버튼 아래에 표시되며, 빠른 링크는 오른쪽 아래 구독 버튼 아래에 표시됩니다. 이것은 블로그 관리 페이지에서 ‘꾸미기’ 항목의 ‘스킨 편집’으로 이동한 후, ‘왼쪽 내비게이션의 빠른 메뉴’와 ‘오른쪽 내비게이션의 빠른 링크’ 항목에서 찾아볼 수 있습니다. 1. 왼쪽 내비게이션의 빠른 메뉴 터치 인터페이스가 아닌 데스크탑 모드일 때 왼쪽 위 내비게이션 버튼 아래에 표시되는 빠른 메뉴들을 설정합니다. 메뉴는 3개까지 설정할 수 있으며, 윈도우의 높이가 낮을 때에는 메뉴들이 숨겨집니다. 1-1. 메뉴의 이름 메뉴의 이름을 설정합니다. 이름이 너무 길면 생략될 수 있습니..

티스토리 스킨, 프라치노 공책은 사이드바를 항상 왼쪽으로 고정하거나, 일부 모듈의 옵션을 설정할 수 있습니다. 이것은 블로그 관리 페이지에서 ‘꾸미기’ 항목의 ‘스킨 편집’으로 이동한 후, ‘사이드바’ 항목에서 찾아볼 수 있습니다. 사이드바 모듈을 설정하는 방법을 찾는다면 ‘사이드바 모듈 설정하기’ 설명서를 참조하세요. 1. 사이드바 고정 이 옵션을 켜면 브라우저 윈도우의 너비가 1,440픽셀 이상일 때 사이드바는 항상 왼쪽에 고정됩니다. 2. 하위 카테고리 접기 ‘카테고리’ 모듈의 하위 카테고리를 보이지 않게 접을 수 있습니다. 3. 카테고리 모두 보기 버튼 ‘카테고리’ 모듈에 ‘모든 글 모아보기’ 버튼을 표시합니다. 4. 최신 글 모두 보기 버튼 ‘최신 글’ 모듈에 ‘모든 글 모아보기’ 버튼을 표시합..

티스토리 스킨, 프라치노 공책은 highlight.js 플러그인 기반의 개발 언어 하이라이트를 지원합니다. 이것은 글 안에 있는 코드 블록을 읽기 쉽게 표시해 줍니다. 개발 언어 하이라이트는 블로그 관리 페이지에서 ‘꾸미기’ 항목의 ‘스킨 편집’으로 이동한 후, ‘개발 언어 하이라이트 (hightlight.js)’ 항목에서 찾아볼 수 있습니다. 1. 사용 개발 언어 하이라이트를 켭니다. 다른 플러그인을 사용한다면 이 속성을 끄세요. 2. 코드 자동 감지 글을 쓸 때 코드 블록의 언어를 설정한 것과 상관없이 작성된 코드의 언어를 자동으로 감지합니다. 이 옵션은 글 에디터의 코드 블록에서 지원되지 않는 언어를 사용할 때 유용합니다. 3. 번호 사용 코드 블록 내 작성된 내용에 줄 번호를 표시합니다. 4. 번..

티스토리 스킨, 프라치노 공책은 자동 목차 생성(Table of Contents) 기능이 제공됩니다. 해당 기능을 켜면 작성된 글에 포함된 머리말 레벨 태그, h1부터 h6까지를 찾아 단계를 분석하고, 글의 오른쪽 위나 사이드바에 글의 목차를 표시합니다. 목차의 항목을 누르면 해당 항목이 있는 지점으로 빠르게 스크롤됩니다. 자동 목차 생성 기능을 사용하려면 블로그 관리 페이지에서 ‘꾸미기’ 항목의 ‘스킨 편집’으로 이동하세요. 그리고 ‘글 페이지’ 항목에서 ‘자동 목차 생성’ 옵션을 켜면 됩니다. 1. 하위 항목 구분하기 이 기능을 켜면, 프라치노 공책은 글의 머리말 레벨 태그를 자동으로 분석합니다. 첫 번째 머리말 레벨을 기준으로 다음 머리말 레벨이 첫 번째보다 높으면 하위 항목으로, 같거나 낮으면 같..

티스토리 스킨, 프라치노 공책은 자동 목차 생성, 댓글의 순서 등 글 페이지에 관한 전반적인 설정을 할 수 있습니다. 글 페이지에 관한 옵션은 블로그 관리 페이지에서 ‘꾸미기’ 항목의 ‘스킨 편집’으로 이동한 후, ‘글 페이지’ 항목에서 찾아볼 수 있습니다. 1. 자동 목차 생성 이 옵션을 켜면 글에 포함된 h1 태그부터 h6 태그의 텍스트를 찾아 자동으로 목차를 생성합니다. 이 기능은 TOC(Table of Contents)라고도 불리며, 이것에 관하여 톺아보려면 여기를 누르세요. 2. 자동 목차 생성 단계 ‘자동 목차 생성’ 옵션이 켜져 있을 때 목차의 하위 단계를 지정할 수 있습니다. 최대 3단계까지 가능합니다. 3, 4. 밑줄과 취소선 스타일 HTML에서 밑줄을 담당하는 u 태그와 code 태그,..

티스토리 스킨, 프라치노 공책은 블로그의 사이트 헤더에 카테고리 또는 글의 대표 사진을 사이트 헤더의 배경으로 표시할 수 있습니다. 여기서는 이 기능에 관하여 자세히 알아봅니다. 사이트 헤더의 대표 사진은 블로그 관리 페이지에서 ‘꾸미기’ 항목의 ‘스킨 편집’으로 이동한 후, ‘블로그 헤더의 대표 사진’ 항목에서 이를 설정하면 됩니다. 1. 글 목록에 사용 특정 카테고리의 글 목록 페이지일 때 카테고리의 대표 사진을 사이트 헤더에 표시합니다. 카테고리의 대표 사진은 블로그 관리 페이지에서 ‘콘텐츠’ 항목의 ‘카테고리 관리’로 이동한 후, 설정을 원하는 카테고리에 ‘관리’ 버튼을 눌러 ‘대표 이미지’를 설정하면 됩니다. 1-1. 글 목록에 흐림 효과 카테고리의 대표 사진이 사이트 헤더의 배경으로 표시될 때..

티스토리 스킨, 프라치노 공책은 사이트 헤더의 제목과 설명 텍스트가 표시되는 부분을 로고 사진으로 대체할 수 있습니다. 이것을 설정하려면 블로그 관리 페이지에서 ‘꾸미기’ 항목의 ‘스킨 편집’으로 이동하세요. 그리고 ‘사진 헤더 로고’와 ‘다크 모드일 때 사진 헤더 로고’ 항목을 둘러보세요. 1. 사용 사이트 헤더에 로고 사진를 표시하려면 이 옵션을 켭니다. 2. 데스크탑용 로고 브라우저 윈도우의 너비가 760픽셀 이상일 경우 표시될 로고 사진을 업로드합니다. 3. 모바일용 로고 브라우저 윈도우의 너비가 760픽셀 미만일 경우 표시될 로고 사진을 업로드합니다. 로고 사진 설정에 도움이 될만한 팁 로고 사진은 초고화질의 투명도를 지원하는 PNG 또는 WebP 파일을 권장하며, 사이트 헤더와 로고 사진이 서..

모든 웹 페이지에서 가장 먼저 보이는 것은 사이트 헤더입니다. 사이트 헤더를 꾸미는 것만으로도 블로그의 개성을 멋지게 드러낼 수 있습니다. 티스토리 스킨, 프라치노 공책은 블로거만의 개성을 확실히 표현할 수 있게 도와줍니다. 여기에서는 티스토리 스킨, 프라치노 공책의 사이트 헤더를 설정하는 방법에 관하여 알아봅니다. 사이트 헤더는 컬러가 있는 페이지의 상단 영역을 의미합니다. 이것을 설정하려면 블로그 관리 페이지에서 ‘꾸미기’ 항목의 ‘스킨 편집’으로 이동하세요. 그리고 ‘블로그 헤더’와 ‘다크 모드일 때 블로그 헤더’ 항목을 둘러보세요. 1. 헤더 제목 사이트 헤더에 표시되는 제목을 입력합니다. 값이 입력되지 않으면 블로그의 제목이 표시됩니다. 2. 헤더 설명 사이트 헤더에 표시되는 설명을 입력합니다...

티스토리 스킨, 프라치노 공책은 스킨의 전반적인 컬러를 손쉽게 사용자화할 수 있습니다. 블로그 관리 페이지에서 ‘꾸미기’ 항목의 ‘스킨 편집’으로 이동한 후, ‘컬러 시스템’과 ‘다크 모드일 때 컬러 시스템’ 항목에서 이를 설정하면 됩니다. 그리고 프라치노 공책은 다크 모드를 지원합니다. 만약 다크 모드를 사용한다면 기본 모드와 함께 다크 모드에 따른 컬러 시스템을 고려하는 것이 좋습니다. 1. 링크 HTML에서 링크를 담당하는 a 태그의 텍스트 컬러를 지정합니다. 2. 커서 아래 링크 HTML에서 링크를 담당하는 a 태그의 텍스트에 마우스 커서를 올리거나 탭 하고 있을 때의 컬러를 지정합니다. 3. 헤드라인 HTML에서 머리말 레벨을 담당하는 h1 태그부터 h6 태그까지의 텍스트 컬러를 지정합니다. 4..