티스토리 북클럽 스킨 설정 가이드: 쉽고 간편하게 따라하기

안녕하세요, 블로거 여러분! 오늘은 많은 분들이 사용하고 있는 티스토리 북클럽 스킨의 제목 이미지 삭제 및 크기 조정 방법을 소개해 드리려고 합니다. 저도 처음에는 제목 부분의 큰 이미지 때문에 고민이 많았는데, 여러 번의 시도 끝에 만족스러운 결과를 얻었습니다. 이 글을 통해 여러분도 쉽게 따라하실 수 있을 거예요.

티스토리 북클럽 스킨 설정 가이드: 쉽고 간편하게 따라하기

 

 

 

티스토리 북클럽 스킨 설정 가이드: 쉽고 간편하게 따라하기 목차

 

1. 상단의 그림 삭제하기: 더 깔끔한 블로그 만들기

2. 제목 바 색깔 변경하기: 개성 있는 블로그 만들기

3. 카테고리 위치 조정하기: 더 깔끔한 레이아웃 만들기

4. 제목 글자 크기 및 제목 바 높이 조정하기: 더 명확한 블로그 만들기

5. 제목과 본문 사이 빈 공간 없애기: 깔끔한 레이아웃 만들기

추천글

위의 목차를 클릭하면 해당 글로 자동 이동 합니다.

 

 

1. 상단의 그림 삭제하기: 더 깔끔한 블로그 만들기

티스토리 북클럽 스킨을 사용하다 보면 상단의 큰 이미지가 블로그의 첫인상을 결정짓는 요소라는 걸 알게 됩니다. 하지만 때때로 이 이미지는 너무 커서 가독성을 떨어뜨리고, 광고를 추가할 때 더욱 정신없어 보이게 만듭니다. 이럴 때는 과감하게 이미지를 삭제하고 사이즈를 줄이는 것이 좋습니다.

이미지 삭제하기

먼저 HTML에서 s_permalink_article_rep를 검색하세요. 그러면 아래와 같은 코드가 보일 것입니다.

style="background-image:url(https://blog.kakaocdn.net/dn/beGiyC/btrToa9zaac/zi0QLs6xFju461xZy8XKyk/img.jpg)"

이 부분을 아래와 같이 변경해줍니다.

style="background-image:none"

이렇게 하면 상단의 배경 이미지가 사라지게 됩니다. 특정 이미지를 사용하고 싶다면, URL 부분에 원하는 이미지 경로를 입력하면 됩니다.

2. 제목 바 색깔 변경하기: 개성 있는 블로그 만들기

제목 바의 색깔을 변경하면 블로그의 분위기를 완전히 바꿀 수 있습니다. 북클럽 스킨의 기본 색깔은 회색이지만, 여러분의 블로그에 어울리는 색상으로 변경해 보세요.

색깔 변경 방법

CSS 파일에서 .post-cover를 검색한 후, 아래 코드를 찾습니다.

background-color: #cbcbcb;

이 부분의 #cbcbcb를 원하는 색상 코드로 변경하면 됩니다. 색상 코드를 잘 모르겠다면, CSS 편집기에서 색상표를 활용해 보세요. 마우스를 색상표 위에 올리면 다양한 색상을 쉽게 선택할 수 있습니다.

 

 

3. 카테고리 위치 조정하기: 더 깔끔한 레이아웃 만들기

상단에 위치한 카테고리를 제목 아래로 이동시키면 레이아웃이 더 깔끔해집니다. 특히 제목 부분을 작게 하고 싶은 분들에게 유용한 방법입니다.

위치 변경 방법

HTML에서 <span class="category">IT 인터넷/애드센스 티스토리</span> 부분을 찾아 s_permalink_article_rep의 inner-meta 아래로 이동시킵니다. 이렇게 하면 제목 상단에 있던 카테고리가 글쓴이 정보 앞으로 이동하게 됩니다.

4. 제목 글자 크기 및 제목 바 높이 조정하기: 더 명확한 블로그 만들기

제목 글자의 크기와 제목 바의 높이를 조정하면 블로그의 전체적인 느낌이 달라집니다. 웹과 모바일 버전 각각에 맞춰 조정해야 합니다.

웹, 태블릿용 글자 크기 조정

CSS에서 .post-cover h1 부분의 font-size를 조정합니다. 저는 아래와 같이 변경했습니다.

font-size: 2.125em -> font-size: 1.845em
font-weight: 300 -> font-weight: 400

모바일용 글자 크기 조정

모바일용 글자 크기는 @media screen and (max-width:767px) 이후의 .post-cover h1에서 조정합니다. 저는 다음과 같이 변경했습니다.

font-size: 1.625em 추가
font-weight: 300 -> font-weight: 400

5. 제목과 본문 사이 빈 공간 없애기: 깔끔한 레이아웃 만들기

제목과 본문 사이의 빈 공간은 블로그를 어수선하게 만듭니다. 이 공간을 줄이기 위해서는 CSS에서 tt-body-page #container의 padding-top 부분을 조정하면 됩니다.

빈 공간 줄이기

저는 아래와 같이 조정했습니다.

padding-top: 339px; -> padding-top: 140px;

이렇게 하면 제목과 본문 사이의 빈 공간이 크게 줄어들어 블로그가 더 깔끔해집니다.

 

마무리하며: 블로그를 내 스타일로 꾸미기

 

이렇게 티스토리 북클럽 스킨의 제목 이미지 삭제 및 크기 조정 방법을 소개해 드렸습니다. 개인적인 설정 방법이므로 모두에게 맞지는 않을 수 있지만, 여러분의 블로그를 더 깔끔하고 보기 좋게 만드는 데 도움이 되길 바랍니다. 블로그 꾸미기는 작은 변화만으로도 큰 차이를 만들 수 있습니다. 여러분의 블로그를 멋지게 꾸며 보세요!

 

추천글

2024.05.21 - [넓고 얕은 생각/소소한 부업] - 오늘부터 구글 SEO에 맞춘 글 형식을 지키지 않고 테스트하겠다!

오늘부터 구글 SEO에 맞춘 글 형식을 지키지 않고 테스트하겠다!