나는 티스토리를 처음 시작할 때부터 '북클럽 뉴북' 스킨을 선택했고, 내 기준에 깔끔해 보이는 '스킨 세팅'을 해왔다.
본 글은 내 티스토리 블로그의 '북클럽 뉴북' 스킨을 어떻게 세팅했는지에 대한 내용이니, 특별하진 않지만 봐줄 만하다고 생각하면 순서대로 하나하나 적용해 보기 바란다.
당연히 꼭 그대로 따라 하지 않아도 되고, 무엇을 어디서 어떻게 수정해야 하는지 참고만 하면 되겠다.
1] '북클럽 뉴북' 스킨 변경
아래 이미지는 '스킨 변경'을 클릭하면 나오는 페이지로, 블로그를 개설하면 기본으로 'Poster' 스킨이 적용되어 있다.
스크롤을 내리면 두 번째 줄 우측에 'Book Club' 스킨이 있다.
'Book Club'에 마우스 커서를 올리면 '미리 보기'와 '적용'이 나오는데, '적용'을 누른다.
'적용'을 누르면 중앙 상단에 창이 하나 뜨는데, '확인'을 누른다.
아래 이미지는 그렇게 적용한 'Book Club' 스킨의 최초 모습이다. 상단에 '블로그 이름', 좌측에 '콘텐츠 리스트', 우측에 '사이드바'로 구성된다.
2] '북클럽 뉴북' 스킨 편집
'Book Club' 스킨이 적용되었으니 이제 '스킨 편집'을 한다. 우측 상단에 '관리'를 누른다.
아래 이미지는 좌측에 '스킨 편집'을 누르면 나오는 페이지로, 우측에 나오는 '홈 설정'의 '홈 화면 글 수'와 '기본 설정'의 '글 목록 글 수'를 설정한다.
스크롤을 아래로 내리고, '리스트'에서 '리스트 타입'은 '뉴북'으로, '더보기 방식'은 '페이징'으로 설정한다.
'더보기 방식'은 '더보기'와 '페이징' 중에서 선택하는 것인데, 저는 방문수 상승(수익 상승)을 위해 '페이징'으로 설정했다.
그리고 '사이드바'의 위치는 '우측'과 '좌측' 중 '좌측'으로 설정했다.
스크롤을 더 아래로 내리면, '푸터문구'를 설정할 수 있다.
'푸터문구'는 '블로그 Home'의 하단에 나오는 '블로그 정보'인데, 나는 불필요하다고 생각해서 모두 삭제했다. 우측 상단에 '적용'을 눌러서 편집을 완료한다.
아래 이미지는 편집 완료된 '블로그 Home' 페이지로, 앞서 수정한 것처럼 '사이드바'는 좌측에 위치되었다.
3] '사이드바' 설정
나는 '사이드바'에 있는 내용들이 불필요하다고 생각해서 '카테고리'를 제외하고 모두 삭제했다.
아래 이미지는 '관리'에 들어가서 좌측에 '사이드바'를 누르면 나오는 모습으로, 우측에 '사이드바 1~3'이 현재 내 블로그에 적용된 '모듈'들이다.
나는 '공지사항', '최근 댓글', 'Facebook/Twitter'를 운영하지 않기 때문에 '마이너스(-)'를 눌러 삭제했고, '최근 글/인기글'은 적용하면 좋을 것 같긴 한데, 어차피 PC보다는 Mobile로 방문하는 사람이 많기 때문에 미련 없이 삭제했다. (Mobile에서는 '사이드바'가 노출되지 않는다.)
그렇게 완료된 '사이드바' 모습이다. '카테고리'만 남아 있고 추후 '카테고리' 아래에 광고를 노출시켰다.
4] 'gnb' 메뉴 설정
아래 이미지의 빨간색 박스 부분이 'gnb'에 해당하는 부분이다. 나는 이 부분이 불필요하고 크기가 큰 것 같아서 크기를 줄였다.
'스킨 편집'의 'Html 편집'으로 들어간다.
'CSS'에 들어가서 #gnb를 찾으면 'height'가 '66px;'로 되어 있다.
'height'를 '3px;'로 수정했다.
아래 이미지처럼 'gnb' 부분의 크기가 축소됐고, 상단의 '블로그 이름' 부분이 깔끔해지고 안정감 있어진 것 같다.
5] '썸네일' 정사각형 설정
이제 많이 신경 쓰였을 '썸네일' 부분이다.
5-1] 콘텐츠 썸네일
'북클럽 뉴북' 스킨은 콘텐츠의 '썸네일'이 이렇게 세로형으로 되어 있다.
먼저 'CSS'에 들어가서 .list-type-thumbnail .post-item .thum img를 찾으면, 'width'가 '126px;', 'margin-left'가 '57px;'로 되어 있다.
.list-type-thumbnail .post-item .thum img
'width'는 '200px;'로 'margin-left'는 '30px;'로 수정했다.
그리고 'Html'로 들어가서 <s_article_rep_thumbnail>을 찾으면 'C230X300'으로 되어 있다.
<s_article_rep_thumbnail>
'C230X300'을 'C200X200'으로 수정했다.
이제 아래 이미지처럼 콘텐츠의 '썸네일'이 정사각형으로 수정되었다.
5-2] 관련 글 썸네일
'콘텐츠 페이지'에서 스크롤을 제일 아래로 내리면 '관련 글'이 나오는데, '관련 글'의 '썸네일'도 정사각형으로 수정했다.
'Html'로 들어가서 <s_article_related_rep_thumbnail>을 찾으면 'C176X120'으로 되어 있다.
<s_article_related_rep_thumbnail>
'C176X120'을 'C176X176'으로 수정하면 '썸네일'이 정사각형으로 수정된다.
그리고 'CSS'로 들어가서 .related-articles ul li figure를 찾으면 'padding-bottom'이 '68.181818~%;'로 되어 있다.
.related-articles ul li figure
'padding-bottom'을 '100%;'로 수정하면 '제목 텍스트'가 '썸네일'과 겹치지 않고 '썸네일' 아래로 내려간다.
이제 아래 이미지처럼 '관련 글'의 '썸네일'이 정사각형이 되었다.
6] '콘텐츠 리스트'에서 '제목 부분' 수정
지금부터는 '콘텐츠 리스트'의 '제목 부분'에 대한 수정이다.
6-1] '제목 노출' 수정
아래 이미지처럼 '블로그 Home'에서 '콘텐츠 리스트'를 보면 '콘텐츠 제목'이 잘려 있다. '콘텐츠 제목'이 전체 노출될 수 있도록 수정했다.
'CSS'로 들어가서 .post-item .title을 찾으면 'white-space'가 'nowrap;'으로 되어 있다.
.post-item .title
'white-space'를 'normal;'로 수정했다.
아래 이미지처럼 '콘텐츠 제목'이 전체 노출되었다.
6-2] '제목 두께' 수정
아래 이미지처럼 '콘텐츠 제목'의 두께가 얇다. 가독성을 위해 '콘텐츠 제목'의 두께를 두껍게 수정했다.
'CSS'로 들어가서 .list-type-thumbnail .post-item .title을 찾으면 '폰트 두께'에 대한 코드가 없다.
.list-type-thumbnail .post-item .title
제일 아래에 'font-weight: 700;'을 추가했다.
font-weight: 700;
아래 이미지처럼 '콘텐츠 제목'의 두께가 두꺼워졌다.
7] '콘텐츠 페이지'에서 '제목 부분' 수정
지금부터는 '콘텐츠 페이지'의 '제목 부분'에 대한 수정이다.
7-1] '제목 위치' 및 '배경 크기' 수정
'제목 부분'을 보면 제목의 상하단 여백이 맞지 않아서 '제목 위치'와 '배경 크기'를 수정했다.
'CSS'로 들어가서 .post-cover .inner를 찾으면 'padding-bottom'이 '78px;'로 되어 있다.
.post-cover .inner
'padding-bottom'을 '30px;'로 수정했다.
수정하니 '제목 위치'가 아래로 내려갔다.
다시 'CSS'로 들어가서 .post-cover를 찾으면 'height'가 '340px;'으로 되어 있다. '배경 크기'에 해당하는 부분이다.
.post-cover
'height'를 '200px;'로 수정했다.
아래 이미지처럼 '제목 위치'와 '배경 크기'가 수정되었다.
7-2] '배경 이미지' 수정
'제목 부분'의 '배경 이미지'는 기본적으로 해당 콘텐츠의 '썸네일' 이미지가 적용된다. 배경에 '썸네일' 이미지가 들어가면 제목의 가독성이 떨어지기 때문에 '배경 이미지'를 삭제했다.
먼저 '제목 부분' 배경에 들어갈 '배경 이미지' 파일을 만들었다. (파일 공유)
'파일 업로드'에 들어가서 하단 '추가'를 눌러서 파일을 업로드한 후, 추가된 파일에 마우스 커서를 올려서 마우스 우측 버튼을 누르고, '링크 주소 복사'를 누른다.
다시 'Html'로 들어가서 "post-cover"<s_article_rep_thumbnail>을 찾으면 'background-image:url()'의 괄호 안이 'https://blog.kakaocdn.net/dn/bd7eV4/btrt6vpJOSF/l4Q6DRIoFebx7PIzLaeVck/img.jpg'으로 되어 있다.
"post-cover"<s_article_rep_thumbnail>
'background-image:url()'의 괄호 안에 앞서 복사한 '링크 주소'를 넣는다.
아래 이미지처럼 '배경 이미지'가 수정되었다.
7-3] '제목 두께' 수정
다음은 제목이 더 잘 보이도록 '제목 두께'를 더 두껍게 수정했다.
'CSS'로 들어가서 .post-cover h1을 찾으면 'font-weight'가 '300;'으로 되어 있다.
post-cover h1
'font-weight'를 '700;'으로 수정했다.
아래 이미지처럼 '제목 두께'가 두꺼워졌다.
7-4] '제목과 본문 간 간격' 수정
마지막으로 '제목과 본문 간 간격'이 불필요하게 넓다. 아래 이미지에는 '본문 상단 광고'가 적용되어 있지 않지만 광고가 적용되면 간격이 더 넓어질 것이기 때문에 간격을 줄이는 게 좋을 것 같았다.
'CSS'로 들어가서 #tt-body-page #container을 찾으면 'padding-top'이 '339px;'로 되어 있다.
#tt-body-page #container
'padding-top'을 '180px;'로 수정했다.
아래 이미지처럼 '제목과 본문 간 간격'이 좁혀졌다.
