티스토리 블로그 상단 이미지 없애는 방법(북클럽)
티스토리 블로그를 운영하면서 가장 많이 사용하는 스킨이 북클럽 스킨이여서 스킨적용을 했더니 다행이 많은 곳에서 블로그 꾸미기 팁을 배울수 있어서 좋았습니다. 일단 티스토리 블로그를 운영하면서 상단에 뜨는 이미지가 내가 원한 이미지보다는 대표이미지가 뜨기 때문에 제목과 합쳐져서 무겁고 지저분해 보인다는것을 매번 느껴 없애는 방법이 없을까 고민하다 드디어 해결책을 알게되어 기록삼아 포스팅을 해둡니다.
티스토리고수님들은 블로그 꾸미는일에 시간을 낭비하지 말고 질좋은 정보성 글을 쓰는데 더 집중하라고 하지만 일단 집을 지었으면 예쁘게 꾸미고 싶은 것이 인간의 마음이 아닐까 싶은데요. 안정된 글쓰기를 하려면 마음에 쏙드는 집꾸미기 부터 시작하는것이 맞다고 봅니다.
티스토리 꾸미기 할때 상단이미지는 보통 포스트의 대표이미지가 자동으로 설정되어 노출되는데 이것부터 해결해 보고 싶었어요.그럼 시작해 볼까요?
티스토리 블로그 상단 포스팅 커버 이미지 없애는 방법
1.티스토리 관리 > 스킨편집 > html
2,html 화면 아무곳에나 커서를 두고 ctrl 누르고 F 키 를 누르면 검색창이 뜹니다.
3.검색창에 <s-permalink_article-rep> 검색
4.하단 대략 400번대 줄에 나오지만 개인마다 조금씩 차이가 납니다.
5.s-permalink_article-rep 검색후 두개가 나오는데 아래에서 image:url 있는 항목에서 변경해 줄거에요.
image:none 바꿔주고 뒤의 " 도 꼭 넣어주세요.
<s-permalink_article-rep>
<div class="post-cover"<s-article-rep_thumbnail>style='background-image:url (none)"
image:url 대신에 image:none 로 넣어주면 됩니다.
none 으로 바꿔준후 적용을 누르면 상단 이미지가 회색바탕으로 나오는것을 확인할수 있어요. 회색으로 그냥 두어도 되고 흰색이나 다른색으로도 변경하실수 있습니다.
티스토리 상단 회색 배경 명도 조정하는 방법
대표이미지를 없애 회색이된 상태에서 명도조정을 통해 이미지를 어둡게 하면 제목이 눈에 더 띄게 설정할수 있는데요.회색이미지가 아닌 배경이 깔끔한 흰색이거나 다른 이미지로 변경하실수도 있습니다.
가장 쉬운 방법 정리
티스토리 관리 >꾸미기> 스킨편집 >html >css 클릭
이제부터는 html 소스가 아닌 css 항목으로 들어가야 합니다.검색에서 Post-cover 항목 검색을 검색하면 여러 항목이 나오는데 해당 항목을 찾아주세요.
background-color 대략 1052행 정도이 있습니다.
1.회색의 명도를 높일때는 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);
여기서 25 숫자를 75로 높여주면 커버 이미지가 가볍고 눈에도 쏙 들어옵니다. 숫자는 추천인데 제가 해보니까 깔끔하더라구요. 커버이미지의 명도 조절하는것은 어렵지 않치만 배경을 흰색으로 바꾸는것은 처음 CSS 를 다뤄본다면 어려운느낌이 들수도 있어요. 그래도 한번 해보시겠다면 도전해 봐도 좋습니다.
티스토리 상단 회색이미지 흰색으로 바꾸는 방법
스킨편집>html편집>css 항목
1.CSS 에서 past-cover 검색
2.past-cover를 검색하면 두개의 항목이 나오는데 background-color 해당항목을 찾아 /**/ 태그로 감싸주기를 해줍니다.
.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;
}
.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);*/
파란색 태그 앞뒤로 /* */ 빨간색 태그를 앞뒤로 감싸주면 끝입니다.
조금 어려운듯 보이죠. 이렇게 하면 일단 배경 화면이 모두 하얀색으로 변하는데 문제는 기본 글씨체 또한 하얀색이여서 아무것도 안보여요.이제 아래 세군데를 부분 수정하면 흰색 바탕에 검정끌씨로 상단 배경이미지가 깔끔하게 변경됩니다.
Post-cover 검색
1.Post-cover category,
2.Post-cover h1
3.Post-cover meta
이렇게 3곳을 원하는 색으로 바꿔주세요.기본이 흰색으로 지정되어 있기 때문에 어두운 색으로 바꾸는게 좋은데 제가 직접 해보니 검정글씨가 가장 선명하고 깔끔해서 좋습니다.
.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 a {
text-decoration: none;
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);
중간에 마우스를 클릭하면 색상표가 뜨는데 마우스를 검정색에 두고 색지정을 하면 글씨가 검정색으로 바뀝니다. 이때 다른색으로 지정하셔도 좋아요. 취향데로 하는거니까요.
예시그림
추천하는 색은 검정이예요. 일단 적용해 보시고 색이 마음에 안들면 다시 바꾸셔도 됩니다.
3.적용하고 새로고침 하면 완료됩니다.
댓글