티스토리 북클럽 포스팅 상단 이미지 없애는 법

티스토리 포스팅 상단 이미지 없애는 법

블로그를 하다보면 블로그 자체가 무거워 지고 반응속도에 신경쓰게 된다. 포스팅의 이미지를 없애는 법에 대해서 알아보자.

 

애드센스 광고를 달기 위해 검토요청에 매번 탈락하다가 내 블로그의 품질에 대해서 고민하기 시작한다. 검색하여 내 블로그 포스팅에 접속시 서버에서 포스팅의 텍스트와 이미지를 불러와야 하는데 이미지의 개수가 많아지면 많아질수록 홈페이지의 반응속도가 느려지면서 광고반응시간도 영향을 받는 듯 하다.

포스팅 상단 이미지는 보통 포스팅상 대표이미지가 자동설정되어 크기를 무시하고 확대되어 노출된다. 이미지에 텍스트가 함께 있는 경우라면 포스팅제목과 겹쳐서 식별조차 불가하다. 

---

포스팅 커버 이미지를 없애는 방법을 알아보자

---

1.먼저 티스토리상 스킨편집에 들어가서 html 편집에 들어간다.

 

2. 대략 400번대 줄에 가면 하단과 같은 란을 검색으로 찾는다.

 

3. html 화면을 클릭하고 컨트롤 + f 를 클릭하면 검색할 수 있다. 

 

4. '/s_index_article_rep' 을 검색해서 하단의 칸을 찾는다.

</s_index_article_rep>

	<s_permalink_article_rep>
	<div class="post-cover"<s_article_rep_thumbnail> style="background-image:url(url(https://blog.kakaocdn.net/dn/p6fvi/btrKloWDzV4/r7HAhPvtIVk0d3qJQ142wK/img.webp))"</s_article_rep_thumbnail>>
	<div class="inner">
	<span class="category">SYSTEM/블로그&에드센스</span>
	<h1>티스토리 북클럽 포스팅 상단 이미지 없애는 법</h1>
	<span class="meta">
	<span class="author">by 플두시</span>
	<span class="date">2022. 8. 23.</span>
	<s_ad_div>
		<a href="">수정</a>
		<a href="#" onclick="">삭제</a>
		</s_ad_div>
		</span>
		</div>
		</div>

 

5. 3번째 줄의  url(https://blog.kakaocdn.net/dn/p6fvi/btrKloWDzV4/r7HAhPvtIVk0d3qJQ142wK/img.webp  이 부분을 none 으로 고친다.

 

</s_index_article_rep>

	<s_permalink_article_rep>
	<div class="post-cover"<s_article_rep_thumbnail> style="background-image:url(none)"</s_article_rep_thumbnail>>
	<div class="inner">
	<span class="category">SYSTEM/블로그&에드센스</span>
	<h1>티스토리 북클럽 포스팅 상단 이미지 없애는 법</h1>
	<span class="meta">
	<span class="author">by 플두시</span>
	<span class="date">2022. 8. 23.</span>
	<s_ad_div>
		<a href="">수정</a>
		<a href="#" onclick="">삭제</a>
		</s_ad_div>
		</span>
		</div>
		</div>

 

6. none 으로 고친 후 적용을 누른다음 확인하면 상단 이미지가 회색 바탕으로 나오는것을 확인 할 수 있다.

 

 

포스팅 커버가 대표이미지가 아닌 회색바탕으로 변경

---

포스팅 커버 변경하는법

---

ㄱ. 커버 폭 변경 css 1040행

 

스킨편집의 css로 들어가서 1040번대줄을 살펴보면 하단과 같은 코드를 찾을 수 있다. (역시 컨트롤 + f 로 찾아라)

 

.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 값을 변경하면 폭을 수정할 수 있다. 200px 밑으로는 변경이 어렵다. 

 

 

ㄴ. 제목 두께 조절 css 1076행

제목의 폰트 두께와 색상을 조절할 수 있다. 두께는 font-weight를 500정도로 조절해 보자.

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

 

ㄷ. 배경 이미지 명도 조정 css 1052행

대표이미지를 없애 회색인 상태를 명도조정을 통해 이미지를 어둡게 하면 제목을 더 눈에 띄게 설정 할 수 있다.

하단의 background-color 에서 rgba 의 25 값을 높여라. 대략 75정도로 수정하면 검은 배경에 흰색 제목으로 더 쉽게 눈에 띄게 만들 수 있다. 

.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);

 

커버이미지 변경을 통해 포스팅을 조금더 가볍게 하고 제목을 눈에띄게 만드는 방법에 대해 알아보았다. 조금씩 수정해서 블로그를 좀더 최적화 하기를 바란다. 광고 달기에 문제가 생기거나 조금더 블로그를 개선시키는 방법은 전체점검하는 글을 참고하기 바란다.

 

에드센스 승인 방법 공유 티스토리 광고 애드고시 나만의 노하우