북클럽 스킨 글 제목 배경 사진 없애기

북클럽 스킨 글자 크기 변경하고 썸네일 정사각형 만들기에 이어 북클럽 스킨의 글 제목에 본문의 사진 배경을 없애보겠습니다. 배경도 아래와 같이 원하는 배경으로 원하는 부분이 들어가면 멋진데 그렇지 않은 경우가 많고, 여러 배경으로 통일성을 해치는 경우도 많습니다. 배경이 없는 것이 깔끔하다고 생각하는 분들에게 도움이 될 것으로 생각됩니다. 

 

북클럽 글제목 배경 없애기

 

 

북클럽 글제목 작성자, 날짜 없애기

먼저 배경화면을 없애기 전에 북클럽 스킨 글 제목에 작성자와 날짜를 없애보겠습니다. 글 중에 작성일자가 중요한 글도 있지만 그렇지 않은 경우도 많기 때문에 날짜를 먼저 없애보겠습니다. 이건 개인 취향이므로 이 부분이 필요가 없다면 건너뛰어도 되겠습니다. 

 

먼저 작성자와 날짜를 없애기 위해서는 html 편집으로 들어갑니다.

아래 부분이 작성자와 날짜를 표기하는 부분입니다. 이 부분을 주석처리하면 됩니다. 주석처리는 바로 아래와 같이 <!-- 주석처리할 내용 --> 이렇게 양쪽으로 감싸주면 그 사이에 있는 내용이 주석 처리가 됩니다. 

 

 

작성자 날짜 없애기 코드

 

그러면 아래와 같이 작성자와 날짜가 모두 사라지게 됩니다. 주석처리를 어디에 하냐에 따라 작성자만 없앨 수도 있고, 날짜만 없앨 수도 있습니다. 

 

작성자 작성일 없앤 결과

 

 

글 제목 배경 사진 없애기

북클럽 스킨 적용 후 폰트 크기 키우기와 썸네일 사각형으로 만들기는 북클럽 스킨 글자 크기 변경하고 썸네일 정사각형 만들기 게시물을 참고해주세요. 이번에는 북클럽 스킨에서 글 작성 시 제일 처음 올린 사진이 글 제목의 배경으로 들어가는 현상에 대해 해결해보겠습니다. 

 

글을 쓰다가 보면 사진을 올리게 되는데 글에 올린 사진 중에 임의의 사진이 글 제목에 바탕으로 깔리게 되어 글 제목조차 보이지 않는 경우도 있고 미관상으로도 보기 안 좋은 경우가 많습니다. 글 제목이 깔끔하게 배경 없이 나오도록 하는 세팅을 알아보겠습니다.

 

 

 

html과 css 하나도 몰라도 아래와 같은 순서로 수정하면 되니 하나씩 따라오시면 됩니다. 

 

위에서 글저자와 날짜를 주석처리한 윗부분을 보면 아래 블락으로 지정한 부분이 있습니다. 이것을 "none" 으로 바꾸어 줍니다. 빨간 화살표처럼 바꾸어 주면 됩니다. 

 

 

글저자와 날짜 없애기

 

그리고 위와 같이 html 이든 css 든 수정 하면 저장 버튼을 눌러줘야 합니다. 아래 적용버튼 보이시지요?

 

백그라운드 배경 없애기

 

 

그러고 나서 내 블로그 미리보기를 하면 아래와 같이 바뀌어 있습니다. 

 

이런 결과를 원하는건 아니지요?

 

네 가지 작업을 해야 합니다.

• 제목 위 공간 줄이기 
• 제목과 본문과의 간격 줄이기
• 회색 배경 없애기
• 글 제목 컬러 변경 

 

제목 위 공간 줄이기 

스킨 편집의 CSS 수정으로 들어가서 아랫부분을 찾아서 높이를 수정해줍니다. 

 

글제목 상단 높이 조정

 

저는 340px을 140px로 수정했습니다. 

 

제목과 본문 간격 줄이기

그런데 이렇게 하고 나면 제목과 본문까지의 공간이 너무 넓게 비어있게 됩니다. 이 부분을 줄여보겠습니다. 

공간이 넓게 비어보이는 현상

 

CSS편집으로 들어가서 아래 부분을 찾아서 14px로 바꿉니다. 깔끔하게 해결됩니다.  

 

글제목 하단 간격 조정

 

회색 배경 없애기

스킨 편집의 CSS 수정으로 들어갑니다.

배경색을 삭제하기 위해서 아래 부분에 백그라운드 컬러를 삭제하거나 주석 처리합니다. 

CSS의 주석은 /* (주석할 부분) */으로 표현합니다. 아래는 주석 처리한 결과입니다. 

 

백그라운드 컬러 변경

 

위와 같이 수정을 하면 배경색이 하얀색으로 되어 글 제목이 보이지 않게 됩니다. 글 제목을 변경하는 방법을 알아보겠습니다. 

 

 

글 제목 컬러 변경

글제목 수정은 총 2군데의 CSS를 수정해주면 됩니다. 

 

첫 번째는 카테고리를 나타내는 글 수정입니다. 아래 주석 표시 옆에 수정된 내용을 반영해주면 됩니다. 

 

카테고리 색깔 변경

 

두 번째는 제목의 컬러를 바꾸어 줍니다. 

제목의 컬러를 진회색으로 변경

 

만약 위에서 글쓴이와 날짜를 삭제하지 않았다면 이 부분의 컬러도 바꾸어주어야 합니다. .post-cover .meta 부분의 컬러를 바꾸어 줍니다. 여기에서는 글쓴이와 날짜를 삭제하지 않았기 때문에 별도의 수정은 필요 없습니다. 

 

 

최종 결과물 보기

 

 

위와 같은 과정을 잘 따라왔다면 아래와 같은 최종 결과물을 볼 수 있습니다. 

꼭 위에서 설정한 수치로 해야 하는 것은 아니고 수치를 조금씩 변경해가면서 조절하면 나한테 딱 맞는 스킨으로 만들 수 있습니다. 

 

북클럽 스킨 최종 수정결과

 

북클럽 스킨을 사용하시는 분들은 북클럽 스킨 글자 크기 변경하고 썸네일 정사각형 만들기도 함께 참고해서 자기만의 스킨으로 변경해서 사용해보세요. 

북클럽 스킨 글자 크기 변경하고 썸네일 정사각형 만들기

 

함께 읽으면 좋은 글

4개월 애드센스 수익 인증

애드센스 핀번호 Pin# 도착, 외화통장 등록

삶의 무기가 되는 글쓰기

티스토리 스킨변경 할 때 주의해야 할 점 2가지

수능후 할일 - 블로그 애드센스 하자