티스토리 블로그 만들기 회원가입 스킨설정

지금은 N잡시대, 직장러에서 아장아장 티스토리 블로그 첫 발을 내딛은 블로거되다. 

 

 

직장러 티스토리 블로그 하기

1. 티스토리 접속 후 회원가입하기

 

2. 티스토리 블로그 스킨 설정하기

처음 시작하는 블로거로써 블로그 설정하는 데 있어서 여러 사람들의 조언을 참고하였다. 첫 홈은 '매거진' 스킨이 적용되어 있다. 초보 블로거들이 사용하기 좋은 스킨으로 '북클럽'스킨을 추천받았다.

 

<< 북클럽 스킨 추천 이유 >>

• 안정적이고 빠른 페이지 랜딩 속도
• 깔끔하고 군더더기 없는 디자인
• 측면 광고를 적용할 수 있어서 광고 수익을 극대화할 수 있는 무료스킨
• 반응형, 목록형 광고 지원 스킨.

 

먼저 "북클럽 스킨"을 설정하였다면 세부적인 설정을 해 주어야 한다.

 

 

◎ 기본 홈 화면 글 개수 수정하기

북클럽 스킨의 기본 홈 화면에 나타나는 목록 개수는 4개다.  한 줄에 3개씩 나타나므로 두 줄이 목록으로 다 차지 않는 개수가 되겠다. 빈 공간에 엉성함이 채워진다. 먼저 보기 싫은 이 부분을 수정한다. 

 

티스토리 블로그 관리 홈> 꾸미기 > 스킨 편집 클릭> 홈 설정 > "홈 화면 글수" = 6이나 12 등 3의 배수로 변경

티스토리 블로그 관리 홈> 꾸미기 > 스킨 편집 클릭> 기본 설정 > "글 목록 글수" =9 등 3의 배수로 변경

 

 

◎ 리스트 설정하기

리스트 타입

리스트 타입은 글의 목록이 표현되는 방식을 선택하는 메뉴이다. '북리뷰, 베스트셀러, 뉴북, 뉴스레터'의 4가지 형태 중 하나로 선택한다.  각각 적용해 보고 적합한 방식을 적용하면 된다.

 

 

더 보기 방식

더 보기 방식은 글의 개수가 늘어나면 한 페이지에 다 표시되지 않기 때문에 페이지 넘버링을 하는 방식인 '페이징'과 다음 페이지 목록 리스트를 보여주는 '더 보기'방식이 있다. 원하는 페이지를 바로 갈 수 있는 '페이징'으로 선택했다. 

 

 

 

◎ 사이드바 설정하기

사이드바 위치는 우측으로 선택했다.

 

 

◎ 모바일 꾸미기

티스토리 블로그 관리 홈> 꾸미기 > 모바일> 

 

티스토리 모바일웹 자동연결을 "사용하지 않습니다"로 설정한다.

 

 

 

◎ 글 제목의 배경 이미지 제거하기

페이지 로딩 속도에 영향을 미치기 때문에 이미지를 제거하여 속도 저하를 예방 한다.

 

티스토리 블로그 관리 홈> 꾸미기 > 스킨 편집 클릭> html 편집 > 

 

① html 소스 안에서 s_notice_rep 찾는다.

해당 검색어 아래에서 <div class="inner">를 찾아서 <div class="post-cover">로 변경한다. 1번

 

② s_permalink_article_rep을 찾는다.

해당 검색어 아래에서 마찬가지로 <div class="inner">를 <div class="post-cover">로 변경한다. 1번

 

--> 이미지를 넣지 않으면 변경하지 않아도 될 것 같다.

 

 

◎ 글 제목 상자 높이 조절하기

티스토리 블로그 관리 홈> 꾸미기 > 스킨 편집 클릭> html편집> css 편집 > 

 

소스 안에서  "post-cover"를 검색한다. 소스 1,000번 라인 이후에 위치한다.

해당 검색어 아래에"height:340px"를 찾아 340px을 200px 정도로 수정한다. 기본 340px에서 200px까지 수정 가능하다. 

수정 후 새로고침을 눌러 화면을 확인한 후 마음에 드는 높이로 조정한다. 

 

 

 

◎ 글 제목 글자 높이 조절하기

티스토리 블로그 관리 홈> 꾸미기 > 스킨 편집 클릭> html편집> css 편집 > 

 

소스 안에서  "post-cover. inner"를 검색한다. 소스 1,000번 라인 이후에 위치한다.

해당 검색어 아래에 "padding-bottom: 78px"를" 찾아 78px을 40-45px 정도로 수정한다.  

수정 후 새로고침을 눌러 화면을 확인한 후 마음에 드는 위치로 조정한다. 

 

 

 

◎ 글 제목 글씨 진하게

티스토리 블로그 관리 홈> 꾸미기 > 스킨 편집 클릭> html편집> css 편집 > 

 

소스 안에서  ". post-cover h1"을 검색한다. 소스 1,000번 라인 이후에 위치한다.

해당 검색어 아래에 "font-weight:300""font-weight:300"을 찾아 300을 450 정도로 수정한다. 수정 후 새로고침을 눌러 변경된 내용을 확인한 후 마음에 드는 두께로 조정한다. 

 

 

 

◎ 제목상자와 본문 글  간격 조절하기

티스토리 블로그 관리 홈> 꾸미기 > 스킨 편집 클릭> html편집> css 편집 > 

 

소스 안에서  "tt-body-page #container"을 검색한다.

해당 검색어 아래에 "padding-top:339px;" 부분을 200정도로 수정한다. 간격이 너무 없어도 답답하게 느껴진다. 적당한 수치로 수정 후 새로고침을 눌러 변경된 내용을 확인한 후 마음에 드는 간격으로 조정한다. 

 

 

 

이 외에도 제목바, 카테고리 설정하는 부분이 있으나, 한번에 설정하기가 버겁다. 차근차근 블로그를 채워가면서 운영하면서 변경해도 될 것 같다. 

 

 

수정 전

북클럽스킨 초기설정화면

 

수정 후 

 

북클럽스킨 설정 변경화면