티스토리 제목 상단 사이즈 줄이는 방법

안녕하세요. 일상에서 얻는 정보를 모두 기억할 수 없기 때문에 일상에서 일어나는 에피소드들의 정보들을 기록하여 기억하고자 하는 시점에 기록된 정보를 활용할 수 있도록 글을 쓰고자 하는 이작가입니다.

저 역시 지나간 모든 과거의 경험들을 전부 기억할 수 없기 때문에 경험을 통해 얻은 지식과 정보를 기록함으로써 필요한 시점에 과거의 경험의 정보를 활용해 보기 위해 이 글을 작성합니다.

기록된 정보들이 많은 분들에게 도움이 될 수 있도록 전달될 수 있길 바라겠습니다.

 

목차

 

 

티스토리 블로그의 북클럽 스킨을 사용한다면 티스토리 블로그의 제목 사이즈를 줄임으로써 본문 내용과의 공백을 줄임으로서 가독성을 높일 수 있다고 생각합니다.

 

따라서 애드센스 광고의 적절한 배치를 설정하는데 기여를 할 수 있을것으로 생각되나 수익형 블로그 티스토리를 운영하는데 있어서 필수적 셋팅은 아니고, 북클럽 스킨을 사용하는 사용자의 취향에 따라 변경하는것이 좋겠습니다.

---

1. 티스토리 제목 상단 서식 편집.

티스토리 제목 상단의 서식을 편집함으로 가독성을 높이게 된다면 방문자의 이탈률을 줄이는데 도움이 될 수 있고, 장기적으로 애드센스 수익 상승에 기여할 수 있을것이라 예상됩니다.

티스토리 북클럽 스킨의 제목 부분의 박스가 상당히 크고, 기본적으로 회색톤 박스에 흰색 텍스트로 제목이 표기 되는데 티스토리 메뉴 - 스킨편집 - HTML수정 - CSS에서 해당 부분을 수정해 줌으로써 가독성을 높일 수 있습니다.

 

수정방법으로 티스토리 블로그 로그인 - 좌측 메뉴중 "스킨편집" - HTML편집 - CSS로 이동한 후에 편집할 수 있습니다.

 

① 상단 제목의 타이틀 부분 사이즈 줄이기.

CSS편집창에서 "CTRL+F"를 눌러서 "post-cover"를 찾으면 CSS 1041줄에서 시작되는 코드중 1046번째줄 height 부분이 기본적으로 340px 사이즈로 적용된것을 최소 200px까지 사용자의 취향에 맞게 변경해 주시면 되는데, 200px이하로 줄인다고 하더라도 적용되는 최소 사이즈는 200px까지인점을 참고해 주시면 되겠습니다.

 

② 상단 제목 박스 배경색 변경.

상단 제목 박스는 기본적으로 회색 배경 박스안에 흰색 텍스트로 제목이 표기 되는데 제목박스의 배경색을 변경함으로써 제목 텍스트를 시각적으로 눈에 더 짤띄게 변경 할 수 있습니다.

CSS편집창에서 post-cover:before (CSS코드 시작 1052번째줄)에 해당하는 코드중 1060번째줄에 해당하는 background-color부분을 변경해 주면 되는데, 기본적으로는 (0,0,0,0.25)로 적용되어 있는 부분중 25의 숫자를 낮출수록 블랙톤으로 더 진하게 변경 할 수 있습니다.

 

③ 상단 제목 박스 중앙 정렬.

위 ①번과 ②번을 수정했다면 제목 박스가 기본적으로 박스안에 상단부분에 붙어 있기 때문에 시각적으로 보기 좋지 않기 때문에 중앙에 위치시키기 위한 CSS코드 변경으로 CSS편집창의 post-cover .inner (CSS코드 시작 1062번째줄)의 padding-bottom (CSS코드 1067번째줄)의 기본 설정 78px를 40px 정도로 수정하게 되면 중앙에 위치할 수 있습니다. 해당 수치는 수치를 높게 설정할수록 상단에 제목이 위치하게 되고, 수치를 낮게 설정할수록 하단쪽으로 제목이 위치할 수 있게 수정 할 수 있습니다.

 

④ 제목 두께와 크기 변경.

CSS편집창 post-cover h1 (CSS코드 시작 1076번째줄)의 코드중에서 1079번째줄에 위치한 "font-weight"의 기본 설정 300의 수치를 높게 설정할수록 폰트는 두꺼워지고, 낮게 설정할수록 폰트 두께가 얇아지게 변경할 수 있습니다.

 

1080번째줄에 위치한 "font-size"의 기본 설정 2.125em의 수치를 높게 설정할수록 제목 텍스트의 크기를 키울수 있고, 낮게 설정할수록 제목 텍스트의 크기를 작게 설정할 수 있습니다.

 

1081번째줄에 위치한 "line-height"의 기본 설정 1.2352의 수치를 낮게 설정할수록 제목 아래쪽 공백을 줄여줄 수 있고, 수치를 높일수록 제목 아래쪽에 위치한 공백을 키울수 있습니다.

 

⑤ 제목 길이가 글 목록에서 짤리는 부분 해결.

CSS편집창 "post-item .title" (CSS코드 시작 1164번째줄)의 코드중 1171번째줄에 위치한 "whith-space"의 기본 설정 "nowrap"를 "normal"로 수정하게 되면 제목이 짤리는 현상을 수정할 수 있습니다.

 

⑤ 제목 박스와 본문 간격 줄이기.

CSS편집창 "#tt-body-page #container" (CSS코드 439번째줄) 바로 아래 위치한 440번째줄의 "padding-top" 기본설정 339px를 최대 180px까지 줄임으로써 상단의 제목박스와 본문 간격을 줄일 수 있습니다.

---

스킨 편집은 아무것도 수정되지 않은 상태에서의 코드 위치로 기록했기 때문에 사용자가 수정한 사항이 있다면 코드 위치가 다를 수 있기 때문에 참고하셔서 북클럽 스킨을 사용자 환경에 맞게 수정하여 사용하시면 되겠습니다.