티스토리 북클럽(Book Club) 스킨 편집 - 본문 제목크기 및 배경

현재 티스토리 북클럽 스킨을 사용하고 있는데요, 티스토리에서 기본제공하는 여러 스킨들 중 개인적인 취향으로 가장 깔끔하다고 생각되어 사용하고 있습니다. 티스토리 스킨을 판매하는 사이트도 여러군데 있었지만 아직까지 비용을 들여가면서 써야할 이유를 찾지 못해서 더 나은 스킨을 찾기 전까지는 북클럽(Book Club) 스킨을 계속 사용할 것 같아요. 

그렇지만 북클럽 스킨에도 개인적으로 손보고 싶었던 부분이 있었는데 하나씩 포스팅으로 남겨보고자 합니다. 

우선 이번에 살펴볼 내용은, 글을 작성 후 확인되는 '본문 제목영역' 입니다. 상하 두께가 너무 두껍고 배경이 들어간다는 점이 조금 거슬렸는데요, 아래 이미지에서 보이는 것과 같이 본문 내 삽입한 이미지 중에서 [대표]로 지정한 이미지가 배경으로 들어가게 됩니다. 톤 다운 시켰다곤 해도 이미지에 글자가 많이 들어가게되면 제목이 거의 안보이더군요. 그리고 제목 영역이 너무 상하로 두껍습니다. 이 부분을 수정하고 방법을 남겨보고자 합니다.

티스토리 북클럽 스킨 기본 본문 제목 영역 - 너무 두껍고 제목이 잘 보이지 않아요

이 포스팅에서 다룰 것

• 포스팅 제목영역 : 상하 두께 수정
• 포스팅 제목영역 : 배경 수정

이걸 이제 해결해 보겠습니다.

 

본문 제목영역 CSS 선택자

우리는 디자인을 수정할 것이기 때문에 [관리자 → 스킨편집 → HTML편집 → CSS탭]으로 들어가줍니다. CSS 선택자Selector를 찾아야 하는데요, 아래와 같습니다.

• .post-cover = 제목영역 전체 틀 (두께 변경)
• .post-cover:before = 제목영역 배경 (배경 속성 변경)
• .post-cover .inner = 제목영역 내부 글자 (글자 위치 변경)

CSS탭에서 찾기 [CTRL+F]를 통해 위 선택자Selector 이름을 복사해서 붙여넣기하고 찾아줍니다. 아래와 같이 북클럽BookClub 스킨의 기본값을 확인가능 합니다.

 

제목영역 두께변경

.post-cover {
	position: relative;
	z-index: 20;
	display: table;
	width: 100%;
	height: 340px;
	background-color: #cbcbcb;
	background-position: 50% 50%;
	background-size: cover;
	box-sizing: border-box;
}

위 코드블럭에서 height: 340px; 부분이 제목영역 상하두께 입니다. 저는 이 부분을 300px 로 변경해주었습니다.

제목영역 배경 투명도변경

.post-cover:before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	z-index: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0,0,0,0.25);
}

위 코드블럭에서 background-color: 부분이 배경컬러 및 음영을 설정하는 부분인데요, 대표이미지를 배경으로 사용하는 것은 그대로 두고 투명도만 더 어둡게 설정해주었습니다. 저는 background-color: #000000d6; 이렇게 설정했습니다만, 투명도 값을 조정해주시고 싶으시다면, 맨 마지막의 25를 70정도로 변경 후 적용해보세요. 숫자가 높을수록 불투명해집니다.

 

제목영역 내부 글자 위치변경

.post-cover .inner {
	display: table-cell;
	position: relative;
	z-index: 10;
	vertical-align: bottom;
	padding-bottom: 78px;
}

위 코드블럭에서 padding-bottom: 78px; 부분이 제목 글자 영역 상하위치 조정하는 부분입니다. 첫 번째 상하두께 조정시 글자 위치가 원하는대로 되지 않을 수 있는데요, 그 이유는 vertical-align: bottom; 이 부분 때문으로 보입니다. 제목 글자들을 아래기준 정렬하는 것 때문인데, 78px 부분에서 숫자를 작게 바꾸시면 하단에 더 글자가 붙게됩니다. 상하두께와 이 글자위치를 적절히 조정해주세요. 저는 70px 정도로 조정했습니다.

 

변경결과

저는 위와같이 변경되었습니다. 두께가 340 → 300으로 크게 변하지 않았기 때문에 전후비교시 크게 바뀐게 없어보일수도 있습니다. 배경 투명도를 더 어둡게 만들어서 제목 글자가 더 잘 보이게 만들었습니다. 수정하는 위치나 방법만 알아두면 블로그 운영하면서 조금씩 변경해보면 될 것 같습니다.

다른 스킨에도 선택자Selector를 동일하게 사용하는지는 확인해보지 않아서 아직 잘 모르겠습니다. 다음번에는 선택자Selector 찾는방법을 포스팅 해볼까 싶네요.