티스토리 스킨 제목 뒤로 대표 이미지 편집하는 방법

티스토리 오디세이나 북클럽 스킨 쓸 때 포스트를 작성하면 제목 뒤로 대표 이미지가 크게 확대되어 보이잖아요? 이 부분만 없앨 수 있는 방법이 있나요? 아니면 그냥 사진 아무것도 첨부 안 했을 때처럼 회색으로만 보이게요. 크기 작은 사진을 대표 사진으로 첨부하면 확대돼서 보기가 흉해집니다.

티스토리 스킨 제목 뒤로 대표 이미지 편집

포스트 상단 자리를 차지하는 대표 이미지 부분을 편집하여 제목도 더 잘 보이고 깔끔하게 수정할 수 있습니다. 이는 스킨 편집에서 html 편집으로 가능합니다.

1. 흐리게 모자이크하기

1. 스킨 편집 > html 편집에서 "CSS" 메뉴로 들어갑니다.

• 티스토리 블로그 북클럽 스킨은 .post-cover:before를 검색하고 속성에 backdrop-filter: blur(10px);를 추가합니다.

  .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);
      backdrop-filter: blur(10px);
  }

• 티스토리 블로그 오디세이 스킨은 .article-header:before를 검색하고 속성에 backdrop-filter: blur(10px);를 추가합니다.
  

  /* area-view - 상세 페이지 */
  /* article-header */
  .article-header {
      position: absolute;
      top: 0;
      left: 50%;
      width: 100vw;
      height: 400px;
      margin-left: -50vw;
      padding: 0 20px;
      background-size: cover;
      background-position: 50% 50%;
      backdrop-filter: blur(10px);
  }

2. 흐린 정도를 조절하려면 숫자 값(10px)을 바꿉니다.

2. 그냥 대표 사진을 아예 안 보이게 하기

1. 북클럽 스킨은 .post-cover:before의 모든 속성을 display: none;으로 대체합니다.

.post-cover:before {
    display:none;
}

2. 오디세이 스킨은 .article-header 검색하고 속성에 background-image: none!important; 추가합니다.

/* area-view - 상세 페이지 */
/* article-header */
.article-header {
    position: absolute;
    top: 0;
    left: 50%;
    width: 100vw;
    height: 400px;
    margin-left: -50vw;
    padding: 0 20px;
    background-size: cover;
    background-position: 50% 50%;
    background-image: none!important;
}

이상으로 티스토리 스킨 제목 뒤로 대표 이미지를 편집하는 방법에 대해 살펴보았습니다.

즐거운 하루 보내세요. 감사합니다.