User Guide
5. 글 별로 다른 모드 설정하기
2019.05.20티스토리 반응형 스킨, 프라치노 공간은 스킨의 전반적인 분위기나 글 목록의 모양새, 대표 커버 이미지 등을 글 별로 다르게 설정할 수 있습니다. 글을 편집할 때 원하는 기능의 코드를 추가하기만 하면 됩니다. 글을 편집할 때 HTML 모드로 전환하고, 글 맨 아래 줄에 아래의 코드를 추가하세요: fraccino-function은 자신이 원하는 기능의 코드로 대치하여 사용합니다. 대치 가능한 코드는 여러가지며, 아래부터는 대치하여 사용 가능한 코드를 설명합니다. 일반 스킨의 전반적인 분위기를 변경할 수 있습니다. fraccino-setas-day는 스킨의 분위기를 낮으로 설정합니다. fraccino-setas-dawn은 스킨의 분위기를 노을로 설정합니다. fraccino-setas-night는 스킨의 분위기..
4. 블로그 첫 페이지에 커버 설정하기
2019.05.12티스토리는 블로그의 첫 페이지를 꾸밀 수 있는 커버 기능을 제공합니다. 티스토리 반응형 스킨, 프라치노 공간은 커버를 완전하게 지원하며 다양한 종류의 커버를 사용하여 첫 페이지를 꾸밀 수 있습니다. 커버는 블로그 관리 페이지에서 ‘스킨 편집’으로 이동하고, ‘홈 설정’ 항목을 ‘최신 글’에서 ‘커버’로 바꾸면 설정됩니다. 원하는 커버 아이템을 추가하거나 삭제하여 첫 페이지를 꾸밀 수 있습니다. 스킨에 지원되는 커버 아이템은 아래와 같습니다: 사용자화한 콘텐츠가 적용된 첫 페이지 슬라이드형 꽉 찬 슬라이드형 3가지 크기의 갤러리형 포스터형 카드형 텍스트형 1. 사용자화한 콘텐츠가 적용된 첫 페이지 이 커버 아이템은 ‘홈 설정’ 항목이 ‘최신 글’로 설정되었을 때 첫 페이지의 느낌에 목록 구성만 달리 설정하..
3-14. 블로그에 사업자 정보 표시하기
2019.05.12티스토리 반응형 스킨, 프라치노 공간은 페이지의 맨 하단에 사업자 정보를 표시할 수 있습니다. 이것은 기업을 위한 블로그를 운영할 때 사용될 수 있습니다. 블로그 관리 페이지에서 ‘스킨 편집’으로 이동하고, ‘사업자 정보’ 항목을 살펴보세요. ‘사업자 정보’ 항목에는 다음과 같은 속성이 있습니다: 상호명 대표자 성명 주소 전화번호 이메일 사업자등록번호 통신판매신고번호 사이버몰 이용약관 URL 사업자 정보 표시하기 사업자 정보를 표시하려면 사업자등록번호가 입력되어 있어야 합니다. 각 속성에 발급된 사업자등록증과 통신판매업신고증의 내용을 입력하세요.
3-13-1. 스킨과 어울리는 애드센스의 스타일
2019.05.12티스토리 반응형 스킨, 프라치노 공간은 낮이나 노을, 밤의 전반적인 컬러를 바꿀 수 있습니다. 컬러를 설정했고 구글 애드센스(Google AdSense)를 사용한다면 스킨과의 조화를 위해 애드센스도 해당 컬러에 맞추어 설정해야 합니다. 각 모양새에 따른 설정값을 알아봅시다. 컬러가 낮일 때 스킨의 컬러를 낮으로 설정했다면 애드센스의 스타일은 아래와 같이 설정합니다. 테두리: #f4f4f4 텍스트: #222222 제목 / 링크: #349aff URL: #666666 배경: #f4f4f4 글꼴: 최적화 컬러가 노을일 때 스킨의 컬러를 노을로 설정했다면 애드센스의 스타일은 아래와 같이 설정합니다. 테두리: #e3d9cc 텍스트: #22201e 제목 / 링크: #2284d9 URL: #5b5752 배경: #e3..
3-13. 구글 애드센스 광고 설정하기
2019.05.12티스토리 반응형 스킨, 프라치노 공간은 구글 애드센스(Google AdSense) 광고를 간편하게 설정할 수 있는 방법을 제공합니다. 여기서는 프라치노 공간을 사용할 때 구글 에드센스 설정 방법 두 가지를 알아봅니다. 티스토리 내에서 사용할 수 있는 애드센스 광고는 ‘자동 광고’와 ‘텍스트 및 디스플레이 광고’, ‘일치하는 콘텐츠’입니다. ‘자동 광고’는 스킨 내에서 설정 가능하며, ‘텍스트 및 디스플레이 광고’와 ‘일치하는 콘텐츠’는 티스토리 플러그인을 통하여 설정 가능합니다. 1. 자동 광고 설정하기 구글 애드센스 페이지에서 ‘광고 - 자동 광고’로 이동하여 자동 광고를 설정합니다. 되도록이면 URL 그룹을 생성하여 사이트별로 광고를 설정할 것을 권장합니다. 참고로 ‘자동 광고 설정’ 링크를 클릭하면..
3-12. 네이버 이웃 버튼 설정하기
2019.05.11네이버 블로그는 티스토리의 ‘구독’과 비슷한 ‘네이버 이웃’ 기능을 제공합니다. ‘네이버 이웃’은 네이버 자사의 블로그뿐만 아니라 티스토리 등의 타사 블로그도 될 수 있으며, 이는 네이버 블로그 사용자도 티스토리 블로그의 최신 글을 확인할 수 있다는 것을 의미합니다. 티스토리 반응형 스킨, 프라치노 공간은 네이버 이웃 기능을 사용할 수 있습니다. 이 기능을 사용하면 여러분의 블로그에 네이버 이웃 맺기 버튼이 표시됩니다. 사전 작업하기 이제 여러분의 블로그에 네이버 이웃 맺기 버튼을 만들어 봅시다. 참, 시작하기 전에 준비해야 할 것이 있습니다. 네이버 블로그 설정 페이지로 이동해야 합니다. URL은 아래와 같으며 username은 여러분의 네이버 ID로 대치합니다. 네이버 계정이 없다면 먼저 계정을 생성..
3-11. SEO의 기본, 메타 태그 설정하기
2019.05.11HTML의 요소 중 하나인 메타(meta) 태그는 사이트의 정보가 포함되어 있는 태그로, 네이버(Naver), 구글(Google), 빙(Bing) 등의 검색 엔진은 메타 태그를 통하여 사이트의 정보를 알아냅니다. 검색 엔진은 고유의 검색 로봇이 있는데 사이트 검색을 돕기 위해 네이버 웹마스터 도구(Naver Webmaster Tools), 구글 서치 콘솔(Google Search Console) 등 엔진별로 도구가 제공되고 있습니다. 이때에도 사이트를 식별하기 위해 메타 태그가 사용됩니다. 네이버 블로그 등의 국내 블로그 서비스와는 달리 티스토리는 스킨의 HTML을 편집할 수 있고 메타 태그를 입력할 수 있습니다. 그렇기 때문에 티스토리 블로그는 다양한 검색 엔진 도구 등록, 다시 말해 사이트를 검색 엔..
3-10. 블로그 정보의 배경 설정하기
2019.05.11블로그 정보의 배경은 오른쪽 사이드바(사이드바 2: 블로그 정보 메뉴)에 고정된 맨 첫 번째에 보이는 블로그 정보 영역의 배경을 의미합니다. 블로그 정보 영역은 오른쪽 사이드바에 항상 표시됩니다. 티스토리 반응형 스킨, 프라치노 공간은 이 영역의 배경을 손쉽게 설정할 수 있습니다. 블로그 관리 페이지에서 ‘스킨 편집’으로 이동하고, ‘블로그 정보의 배경 (Jacket)’ 항목을 살펴보세요. ‘블로그 정보의 배경 (Jacket)’ 항목에는 다음과 같은 속성이 있습니다: 배경 컬러 배경 이미지 1·2. 배경 컬러 & 이미지 블로그 정보의 배경 컬러와 이미지를 설정할 수 있습니다. 컬러값을 지정하면 검은색의 배경이 입력된 컬러로 변경됩니다. 이미지를 업로드하여 배경을 설정할 수도 있습니다. 이때 업로드할 이미..
3-9. 사이드바의 일부 기능 설정하기
2019.05.07티스토리 반응형 스킨, 프라치노 공간은 사이드바의 기능을 켜거나 일부 모듈의 기능을 변경할 수 있습니다. 블로그 관리 페이지에서 ‘스킨 편집’으로 이동하고, ‘사이드바’ 항목을 살펴보세요. 사이드바 모듈을 설정하는 방법을 찾는다면 ‘사이드바 모듈 설정하기’ 가이드를 참조하세요. ‘사이드바’ 항목에는 다음과 같은 속성이 있습니다: 최근/인기 글 모듈 모드 첫 페이지로 이동 버튼 하위 카테고리 접기 공지 전체 보기 버튼 태그 전체 보기 버튼 1. 최근/인기 글 모듈 모드 ‘최근 글’과 ‘인기 글’ 모듈의 항목에 미리보기 이미지를 보이게 할 수 있습니다. 2. 첫 페이지로 이동 버튼 왼쪽 사이드바(사이드바 1: 일반 메뉴)의 맨 위에 집 모양의 아이콘으로 된 ’첫 페이지로 이동’ 버튼을 표시합니다. 3. 하위..
3-8. 카테고리별로 다른 모드 설정하기
2019.05.07티스토리 반응형 스킨, 프라치노 공간은 스킨의 전반적인 분위기나 글 목록의 모양새, 대표 커버 이미지 등을 카테고리별로 다르게 설정할 수 있습니다. 블로그 관리 페이지에서 ‘스킨 편집’으로 이동하고, ‘카테고리별 모드’ 항목을 살펴보세요. ‘카테고리별 모드’ 항목에는 프라치노 공간이 지원하는 모드에 관한 속성이 있습니다. 원하는 속성에 지정하고자 하는 카테고리 이름을 입력하면 됩니다. 이때 카테고리는 ,로 구분합니다. 하위 카테고리 선택하기 /, *, **를 사용하여 원하는 하위 카테고리를 선택할 수 있으며, 다음과 같이 조합할 수 있습니다: 상위 카테고리 이름/하위 카테고리 이름은 특정 상위 카테고리에 있는 특정 하위 카테고리를 선택합니다. 상위 카테고리 이름/*는 특정 상위 카테고리에 있는 하위 카테..
3-7. 댓글, 공유 등의 활동 영역 설정하기
2019.05.06활동 영역은 ‘댓글’, ‘공유하기’, ‘다른 글’ 영역을 총칭합니다. 스킨은 글 페이지가 로드되었을 때 활동 영역에 우선으로 표시할 항목과 댓글 관련 설정을 할 수 있습니다. 블로그 관리 페이지에서 ‘스킨 편집’으로 이동하고, ‘활동 영역’ 항목을 살펴보세요. ‘활동 영역’ 항목에는 다음과 같은 속성이 있습니다: 기본 모드 댓글 개수 표시 댓글 순서 반전 1. 기본 모드 글 페이지가 로드되었을 때 활동 영역에 우선으로 표시할 항목을 설정할 수 있습니다. ‘댓글’, ‘공유하기’, ‘다른 글’ 영역 중 하나를 우선으로 표시할 수 있습니다. 2. 댓글 개수 표시 활동 영역 맨 위에 있는 ‘댓글’ 버튼의 텍스트 옆에 댓글 개수를 표시합니다. 3. 댓글 순서 반전 말 그대로 댓글의 순서를 반전시킵니다. 이 속성을..
3-6. 개발 언어 하이라이트 설정하기
2019.05.06티스토리 반응형 스킨, 프라치노 공간은 highlight.js 플러그인 기반의 개발 언어 하이라이트를 지원합니다. 이것을 사용하면 글 내에 있는 코드 블록의 모양새를 이해하기 쉽게 바꾸어 줍니다. 블로그 관리 페이지에서 ‘스킨 편집’으로 이동하고, ‘개발 언어 하이라이트 (highlight.js)’ 항목을 살펴보세요. ‘개발 언어 하이라이트 (highlight.js)’ 항목에는 다음과 같은 속성이 있습니다: 사용 코드 자동 감지 번호 사용 번호 사용 시 줄무늬 일부 번호에 줄 바꿈 너비 확장 탭 폭 1. 사용 highlight.js 플러그인 기반의 개발 언어 하이라이트를 사용할 것인지 설정합니다. 만약 별도의 플러그인을 사용한다면 이 속성을 끄세요. 2. 코드 자동 감지 글을 쓸 때 코드 블록의 언어를 ..