스킨 기본 설정

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

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

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

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

메뉴 변경

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

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

1. 기존 코드

<li><a href="https://mochaskin.tistory.com/category/티스토리">티스토리</a></li>
<li><a href="https://mochaskin.tistory.com/category/애드센스">애드센스</a></li>
<li><a href="https://mochaskin.tistory.com/category/어필리에이트">어필리에이트</a></li>

2. 변경 예시

<li><a href="https://블로그주소.tistory.com/category/카테고리명1">카테고리명1</a></li>
<li><a href="https://블로그주소.tistory.com/category/카테고리명2">카테고리명2</a></li>
<li><a href="https://블로그주소.tistory.com/category/카테고리명3">카테고리명3</a></li>
<li><a href="https://블로그주.tistory.com/category/카테고리명4">카테고리명4</a></li>

헤더 기본 이미지

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

https://tinypng.com

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

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