북클럽스킨 편집 간단 정리 뉴북 세팅 CSS HTML

안녕하세요. 티스토리 블로그를 시작하면서 스킨에 대해 고민을 하게 됩니다. 어떤 스킨을 쓸지 또 스킨을 골랐다면 어떻게 수정을 해서 이쁘게 사용할지 생각하게 됩니다. 가장 많이 사용하는 것으로 알려진 북클럽 스킨 뉴북 세팅에 대해 정리해보겠습니다. 내용을 참고하여 본인의 스타일대로 변경하시면 됩니다.

 

 

 

목차

 

 

---

 

북클럽스킨 편집 간단 정리 뉴북 세팅 CSS HTML

 

 

 

---

 

 

북클럽스킨 기본 세팅

 

 

● 스킨변경

[ 내계정 ] → [ 설정 ] → [ 스킨변경 ] → [ 꾸미기의 스킨변경 ] → [ 북클럽 스킨 ] → [ 적용 ]

 

1. 티스토리 우측 상단에 내계정을 클릭합니다.

2. 운영 중인 블로그에서 설정(톱니바퀴)을 클릭합니다.

3. 설정 목록 중간 정도에 위치한 꾸미기의 스킨변경을 클릭합니다.

4. 화면 상단에 현재 내가 사용 중인 스킨이 나올 것입니다. 아래 스킨 목록을 보면 북클럽 스킨이 있습니다.

5. 북클럽 스킨에 마우스를 가져다 놓으면 미리 볼 수 있는 미리 보기 버튼과  바로 적용할 수 있는 적용 버튼이 나옵니다.

6 적용 버튼을 눌러줍니다. 

 

 

● 콘텐츠 설정

[ 공개 ] → [ 사용하지 않습니다. ] → [ 표시합니다. ] → [ 비허용 ] → [ 비허용 ]

 

1. 글쓰기 시 기본으로 저장할 글 상태는 공개로 설정합니다.

2. 단락 앞뒤에 공백을 사용하지 않습니다.

3. 저작물 사용 허가(CCL)를 표시합니다. 

4. 상업적 이용을 비허용 합니다. 콘텐츠 변경을 비허용 합니다.

 

 

● 댓글, 방명록 설정

[ 로그인 한 사용자만 ] → [ 승인 후 ] → [ 비허용 ] 

 

1. 댓글 작성은 로그인 한 사용자만 가능합니다.

2. 댓글은 승인 후 표시합니다. 방명록 작성을 [비허용 ] 합니다.

3. 방명록은 한 화면 10개 표시합니다. 

 

 

● 스킨 편집 

[ 8개 ] → [ 목록+내용 ] → [ 5개 ] → [ 뉴북 ] → [ 페이징 ] → [ 좌측 및 우측 ] → [ 푸터문구 삭제 ]

 

1. 홈 설정에서 홈 화면 글수는 8개로 설정합니다.

2. 목록 구성요소는 목록+내용으로 합니다.

3. 기본 설정에서 글 목록 글 수는 5개로 합니다.

4. 리스트에서 리스트 타입은 뉴북으로 하고 더보기 방식은 페이징으로 합니다. 페이징은 방문자수 상승을 위해 선택하시는 방법입니다.

5. 사이드바 위치는 취향에 따라 좌측과 우측 중에 선택하시면 됩니다.

6. 아래로 내리면 푸터문구가 있는데 푸터문구는 블로그 홈 하단에 나오는 블로그 정보입니다. 삭제하시면 됩니다.

 

 

● 사이드바

[ 카테고리 ] → [ 사이드바2 삭제 ] → [ 사이드바3 삭제 ]

 

1. 사이드바1의 목록 중 카테고리 외에 전부 삭제해 줍니다.

2. 사이드바2와 사이드바3의 목록도 전부 삭제해줍니다.

 

 

● 모바일웹 설정

[ 사용하지 않습니다. ] 

 

1. 티스토리 모바일웹 자동연결을 사용하지 않습니다를 선택합니다.

2. 사용 시 모바일에서 접속 시 자동으로 모바일 웹으로 전환됩니다.

3. 사용하지 않아도 직접 모바일 주소로 접속할 경우 모바일 웹으로 접속됩니다.

 

 

● 메뉴바 설정

[ 표시합니다. ] → [ 오른쪽 상단 ] → [ 표시하지 않겠습니다. ]

 

1. 블로그 메뉴바를 표시합니다.

2. 메뉴바는 오른쪽 상단에 위치합니다.

3. 구독 버튼 설정은 표시하지 않겠습니다. 

 

 

● 블로그

[ 블로그 클릭 ] → [ 이름과 닉네임 입력 ] → [ 문자 ] → [ 전체공개 ] → [ 50개 ] → [ Asia/Seoul ]

 

1. 관리에 블로그를 클릭합니다.

2. 블로그 이름과 닉네임, 블로그 설명은 본인의 취향대로 적어주시면 됩니다.

3. 아래 주소 설정에서 포스트 주소를 문자로 설정합니다.

4. 기타설정에서 RSS는 전체공개로 설정합니다.

5. 공개될 RSS를 50개로 갱신합니다. 

6. 표시 시간은 Asia/Seoul(을)를 기준으로 설정합니다.

 

 

---

 

 

북클럽스킨 응용 세팅

 

 

● gnb 설정

[ 스킨편집 ] → [ html 편집 ] → [ ctrl+f ] → [ #gnb ] → [ height : 5px; ]

 

※ 홈 화면의 왼쪽 상단에 내 블로그 이름이 나옵니다. 그 부분의 크기를 줄여주는 설정입니다. 공백이 너무 많아 줄여주면 블로그의 본문이 더 집중되어 보입니다.

 

1. 스킨편집→html 편집을 클릭합니다.

2. html옆에 css로 가서 ctrl+f 를 눌러줍니다. 그러면 찾기가 나오는데 #gnb를 입력합니다.

3. 엔터를 치면 #gnb가 있는 행으로 이동됩니다.

4. #gnb 밑에 height : 66px; 로 되어있습니다. 66px;가 공백의 크기입니다.

5. height : 5px;로 변경합니다.

6. 숫자가 작을수록 공백이 작아지는 것입니다.  블로그 상단 부분의 공백이 축소된 것을 볼 수 있습니다.

 

 

● 블로그 목록 리스트 제목 설정

[ 스킨편집 ] → [ css ] → [ ctrl+f ] → [ .post-item .title ] → [ white-space : normal ]

 

※ 블로그 목록에서 제목 부분이 길면 전체 노출이 되지 않습니다. 제목 부분이 전체 노출이 되도록 수정해보겠습니다.

 

1. css에서 찾기(ctrl+f )를 눌러. post-item. title를 입력합니다.

2. 엔터를 치면 .post-item .title이 있는 행으로 이동됩니다.

3. white-space : nowrap로 되어있습니다. white-space : normal로 수정합니다.

4. 콘텐츠 리스트 제목이 잘리지 않고 전체 노출이 됩니다.

 

 

● 블로그 목록 리스트 제목 두께 수정

[ 스킨편집 ] → [ css ] → [ ctrl+f ] → [ .list-type-thumbnail .post-item .title ] → [ font-weight: 500; ]

 

※ 블로그 목록 리스트의 제목의 두께가 두껍지 않습니다. 가동성을 위해 제목을 두껍게 수정해보겠습니다.

 

1. css에서 찾기(ctrl+f )를 눌러. list-type-thumbnail. post-item. title를 입력합니다.

2. 엔터를 치면 .list-type-thumbnail .post-item .title이 있는 행으로 이동됩니다.

3. font-size: 1.3em; 밑에 font-weight: 500500;으로 추가 입력해주면 제목이 두꺼워집니다.

 

 

● 블로그 제목 배경 크기 수정

[ 스킨편집 ] → [ css ] → [ ctrl+f ] → [ .post-cover ] → [ 200px; ]

 

※ 블로그의  제목을 보면 배경 위에 제목이 쓰여있는 것을 볼 수 있습니다. 그 배경의 크기를 수정해보겠습니다.

 

1. css에서 찾기(ctrl+f )를 눌러. post-cover를 입력합니다.

2. 엔터를 치면 .post-cover가 있는 행으로 이동됩니다.

3. 아래 5번째쯤에  height : 340px;로 되어있습니다. 340px;가 배경의 크기에 해당됩니다.

4. 저는 200px;로 변경했습니다.

 

● 블로그 제목배경 위에 제목위치 변경

[ 스킨편집 ] → [ css ] → [ ctrl+f ] → [ .post-cover .inner ] → [ padding-bottom: 20px; ]

 

※ 블로그의  제목 배경 위에 제목의 위치를 변경해보겠습니다. 제목 배경 부분이 축소가 됐으므로 위치를 수정해주시는 것을 추천합니다.

 

1. css에서 찾기(ctrl+f )를 눌러 .post-cover .inner 를 입력합니다.

2. 아래 padding-bottom: 78px; 의 숫자를 20px;로 수정합니다.

3. 숫자가 작아질수록 제목이 배경의 아래쪽으로 위치하게 됩니다.

 

 

● 블로그 제목두께 수정

[ 스킨편집 ] → [ css ] → [ ctrl+f ] → [ .post-cover .inner h1 ] → [  font-weight: 500; ]

 

※ 블로그의  제목의 두께를 두껍게 수정해보겠습니다.

 

1. css에서 찾기(ctrl+f )를 눌러 .post-cover .inner h1을 입력합니다.

2. 아래  font-weight: 500; 로 수정해 줍니다. 제목의 두께가 두꺼워진 것을 확인할 수 있습니다.

3. 더 두껍게 하고 싶으면 600px;나 700px; 등등 본인의 취향에 따라 바꿔주시면 됩니다. 

 

 

● 제목과 본문의 공백간격 수정

[ 스킨편집 ] → [ css ] → [ ctrl+f ] → [ #tt-body-page #container ] → [ padding-top: 200px; ]

 

※ 블로그의 제목 부분과 본문 사이에 공백 부분이 있습니다. 그 간격이 너무 넓어 보입니다. 그 부분을 수정해보겠습니다.

 

1. css에서 찾기(ctrl+f )를 눌러 #tt-body-page #container 를 입력합니다.

2. 아래 padding-top: 339px; 를 200px; 로 수정합니다.

3. 제목과 본문의 공백이 줄어든 것을 확인하실 수 있습니다.

 

 

● 블로그 썸네일 정사각형 만들기

[ 스킨편집 ] → [ css ] → [ ctrl+f ] → [ .list-type-thumbnail .post-item .thum img ] → [ width: 200px; ] → [ margin-left: 30px; ] → [ html 편집 ] → [ ctrl+f ] → [ <s_article_rep_thumbnail> ] → [ <img src="//i1.daumcdn.net/thumb/C200x200/ ]

 

※ 블로그의 리스트의 썸네일이 세로형으로 되어있는데 정사각형으로 바꿔보겠습니다.

 

1. css에서 찾기(ctrl+f )를 눌러 .list-type-thumbnail .post-item .thum img를 입력합니다.

2. width: 126px; 를 200px;로 수정합니다.

3. margin-left: 57px; 를 30px; 로 수정합니다.

4. 그리고 html로 가서 찾기(ctrl+f )를 눌러 <s_article_rep_thumbnail>을 입력합니다.

5. 아래 <img src="//i1.daumcdn.net/thumb/C230x300/ 부분을 <img src="//i1.daumcdn.net/thumb/R200x200/ 으로 수정합니다.

 

 

● 관련 글 썸네일 정사각형 만들기

[ 스킨편집 ] → [ css ] → [ ctrl+f ] → [ .related-articles ul li figure ] → [ padding-bottom: 100%; ] → [ html 편집 ] → [ ctrl+f ] →[ <s_article_related_rep_thumbnail> ] → [ <img src="//i1.daumcdn.net/thumb/C176x176/ ]

 

※ 블로그의 관련 글 썸네일도 정사각형으로 수정해 보겠습니다.

 

1. css에서 찾기(ctrl+f )를 눌러 .related-articles ul li figure를 입력합니다.

2. 아래 padding-bottom: 68.181818%; 부분을  padding-bottom: 100%; 로 수정합니다.

3. html에서 찾기(ctrl+f )를 눌러 <s_article_related_rep_thumbnail>을 입력합니다.

4. 아래 <img src="//i1.daumcdn.net/thumb/C176x120/부분을 <img src="//i1.daumcdn.net/thumb/C176x176/ 으로 수정합니다.

 

 

---

 

 

마치며....

개인적인 취향에 따라 필요한 것만 적용하시면 되겠습니다. 긴 글 읽어주셔서 감사합니다.

 

 

 

 

 

 

함께 하면 좋은 글

티스토리 블로그를 구글에 등록하는 방법

티스토리 블로그를 구글에 등록하는 방법

애드센스 광고 안나옴 광고송출 오류 티스토리 광고오류

애드센스 광고 안나옴 광고송출 오류 티스토리 광고오류