본문 바로가기
티스토리 블로그/블로그 운영 정보공유

티스토리 글 제목 배경 이미지 사진 없애기 배경 변경 방법 (CSS 코드 수정)(스킨 북클럽)

by Grey.han 2024. 3. 7.
반응형

목차

    본 글은 북클럽 스킨에서 CSS 부분을 변경하여 블로그의 테마를 꾸미는 방법입니다. 

    기본 북클럽 스킨에서는 글 제목 뒷 부분에 썸네일 사진이 들어가게 되는데요. 이렇게 썸네일이 들어가게 되면 글의 제목이 잘보이지 않아서 해당 부분을 변경해 주었습니다.

     

    다른 스킨들 중에서도 제목뒤에 사진이 들어가는 스킨이 있다면 오늘 글에서 알려드리는 방법을 따라하시면  쉽게 변경하실 수 있습니다.

     

    1. 수정후 결과

    배경 사진을 안보이게 적용해준 결과 이미지 입니다.

     

    위 이미지와 같이 제목 뒤에 원래 썸네일 사진이 붙지만 썸네일 사진이 보이지 않아서 더욱 제목을 강조해 주는 느낌을 줄 수 있습니다.

    2. 'F12' 개발자 도구에서 제목 배경 부분 코드 찾기

    개발자 도구를 통해서 제목 썸네일 부분의 코드를 확인할 수 있습니다.

    위에 이미지를 확인해보면 '.post-cover:before'가 해당부분 코드인게 확인됩니다.

     

    해당 코드의 'background-color'를 조정해서 뒷 배경이 안보게이게 설정할 수 있습니다. (배경 사진 자체를 제거할 수 도 있지만 색상 변경 방법이 더 간편하여 위 방법으로 진행했습니다.)

     

    'F12 개발자 도구'에서 위 이미지와 같이 미리 색상을 변경하여 적용해볼 수 있습니다.

     

    맘에드는 색상으로 미리 적용해보고 맘에드는 색상의 색상코드를 복사하여 티스토리 'HTML/CSS'코드에 색상코드를 붙여넣기 하여 적용할 수 있습니다. (위에서 적용된 색상코드는 이미지에서 확인할 수 있듯이 '#04beb8' 입니다.)

     

    'F12 개발자 도구' 사용방법은 아래 링크를 통해서 확인 가능합니다.

     

    'F12' 개발자 도구 사용법

    3. 티스토리 스킨 편집에서 코드 변경하기

    티스토리 스킨편집에서 'CSS' 코드를 수정해 줘야합니다. (이미지 참고)

     

    키보드에서 'alt+F'을 누른후 나오는 검색창을 통해서 위에서 찾은 제목의 배경 코드(='.post-cover:before')를 찾아서 해당 코드가 있는  위치를 찾습니다.

     

    해당 코드를 찾았으면 이전에 복사해둔 배경 색상 코드를 붙여 넣기하여 'background-color'에 넣어 줍니다.

     

    여기까지 위 내용을 따라서 적용했다면 제목의 뒷 배경 색상 변경이 완료됩니다.

     

    티스토리 HTML/CSS 편집' 방법
    티스토리 운영 가이드 (기록 업데이트)

     

    반응형

    댓글