티스토리 ] 북클럽 스킨 글 제목에 배경사진 없애기

 

 

티스토리 - 스킨 편집 - HTML

 

 

 

배경사진 없애기

 

 

아래 글 검색

<div class="post-cover"<s_article_rep_thumbnail> style="background-image:url(https://blog.kakaocdn.net/dn/eyIfcR/btszSJIVIPk/Kz8qHIiL8oGO0cD8EK7Uv0/img.png)"</s_article_rep_thumbnail>>

 

 

 

background-image를 none으로 바꿔준다.

<div class="post-cover"<s_article_rep_thumbnail> style="background-image:none"</s_article_rep_thumbnail>>

 

 

 

 

이렇게 하면 배경이 회색으로 바뀐다.

 

 

 

 

 

 

 

제목 영역 높이 줄이기

 

 

스킨 편집 - CCS에 들어가 아래 코드를 찾는다.

.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에서 줄여준다.

 

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

 

 

그럼 그 아래공간이 너무 비어보인다는 문제가 있다.

 

 

 

CCS에서 아래 코드를 찾는다.

 

#tt-body-page #container {
	padding-top: 339px;
}

 

 

339px에서 200px로 수정해준다.

#tt-body-page #container {
	padding-top: 200px;
}

 

 

그럼 아래 공간이 줄어든다.

 

 

 

 

 

 

 

 

제목 영역 배경색 수정하기

 

 

CCS에서 아래 코드를 찾는다.

 

background-color를 둘 다 주석처리 해주면 흰색배경으로 바뀐다. 혹은 다른 배경색으로 설정하면 된다.

 

.post-cover {
	position: relative;
	z-index: 20;
	display: table;
	width: 100%;
	height: 240px;
	background-color: #cbcbcb;
	background-position: 50% 50%;
	background-size: cover;
	box-sizing: border-box;
}
.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);
}

 

 

 

 

 

 

 

제목 글씨 색상 변경

 

 

 

만약 배경을 흰색으로 바꿨다면 제목 색상도 어두운색으로 바꿔줘야 한다.

 

CCS에서 아래 코드를 찾아 color를 다른 색상으로 변경하면 된다.

 

제목영역에서

.category는 제목 바로 위 카테고리 표시

h1이 제목

.meta 가 글쓴이와 날짜표기이다.

 

.post-cover .category {
	display: block;
	max-width: 1080px;
	margin: 0 auto 13px;
	font-size: 0.875em;
	color: #fff;
}
.post-cover h1 {
	max-width: 1080px;
	margin: 0 auto;
	font-weight: 300;
	font-size: 2.125em;
	line-height: 1.2352;
	color: #fff;
}

 

.post-cover .meta {
	display: block;
	max-width: 1080px;
	margin: 34px auto 0;
	font-size: 0.875em;
	color: rgba(255,255,255,0.6);
}