본문 바로가기
Blog

티스토리 북클럽 스킨 제목 배경 없애는 방법

by 젠틀슈 2023. 6. 13.

목차

     

    티스토리 북클럽 스킨에서는 기본으로 게시물 제목 배경에 섬네일 이미지가 보이게 됩니다. html편집을 통해 제목 배경 없애는 방법에 대해서 알아보겠습니다. 복잡해 보이지만 잘 따라서 해보시면 초보분들도 충분히 하실 수 있습니다.

    티스토리 북클럽스킨 제목배경 없애는 방법 썸네일
    티스토리 북클럽스킨 제목배경 없애는 방법


    제목 뒤 배경 없애기

    먼저, 제목 뒤에 나오는 섬네일 배경이미지를 없애보겠습니다. 관리자페이지 > 꾸미기 > 스킨편집 아이콘 > HTML편집을 눌러줍니다.

    HTML창에 커서를 놓고 ctrl+f를 눌러서 아래의 행을 찾아줍니다.

    "background-image:url(https://blog.kakaocdn.net/dn/cjxcoY/btskAERw8Ki/pkdNjW71XrH82AZAfaCTgk/img.jpg)"

    약 400~420번대 행에 위치해 있습니다. 위의 행을 "background-image:none" 으로 변경해 줍니다.

    오른쪽 상단의 적용을 꼭 누르시고, 미리보기창의 새로고침을 해보면 이미지가 회색으로 변경된 것을 확인할 수 있습니다.

    html-편집-방법


    제목 박스 크기 조절

    이미지가 빠지니 박스 크기 높이가 너무 큰듯한 느낌이 들 것입니다. 이번엔 박스크기를 조절해 보겠습니다.

    CSS 모드로 들어가서 다시 창에 커서를 올린 후 ctrl+f 를 눌러서 아래의 행을 찾아줍니다.

    . post-cover }의 height 부분은 340px에서 250px으로 변경해 줍니다. 이번에도 적용 > 새 로고침해서 확인해 보시고 원하는 크기로 줄이거나 늘려주시면 됩니다.


    제목 박스와 본문 사이 간격 조절

    CSS 모드로 들어가서 다시 창에 커서를 올린 후 ctrl+f 를 눌러서 아래의 행을 찾아줍니다.

    ##tt-body-page #container

    약 400번대 줄을 찾아보시면 나옵니다. padding-tap 크기가 339px로 되어 있는 것을 본인이 원하는 크기로 줄여주시면 됩니다. 저는 좁게 하고 싶어서 230px로 변경했습니다. 크기를 확인하시러면 적용 > 새로고침을 눌러가면서 간격을 조절해 보시면 됩니다.


    제목 박스 폰트 색상 조절

    제목에 박스 회색을 걷어내기 전에 폰트 색상먼저 조절해 보겠습니다. 카테고리 (category) 글제목 (h1) 작성자, 날짜 (.meta)에 있는 색상을 색상값을 입력해서 변경해 주거나 컬러칩을 이용해서 변경해 줍니다. 저의 경우 컬러칩을 이용해서 회색-블랙-회색으로 조절해 줬습니다. 제목(h1)의 두께도 좀 더 굵게 500으로 변경해 줬습니다.


    제목 박스 색상 조절

    마지막으로 제목 박스 색상을 빼겠습니다. 앞뒤에 /*을 붙이면 주석처리 됩니다. 색상을 가려보겠습니다. background-color 행 전체 앞 뒤에 /* 주석처리 할 부분 */를 넣어줍니다. 띄어쓰기까지 넣어주셔야 합니다. .post-cover {, .post-cover:before { 두 곳 다 적용해 줍니다.


     

    변경이 완료된 모습입니다. 이상으로 티스토리 북클럽 스킨 제목 배경 없애는 방법을 알아보았습니다. 감사합니다.


    자동차 에어컨 똥구린내 어떻게 제거할까?