블로그 꾸미기 - 상단 제목 썸네일 없애기와 박스 사이즈 줄이기

스킨편집을 통해 블로그 상단 제목 박스에 대표 이미지가 썸네일로 나오는 문제를 해결하고 사이즈가 너무 큰 제목 박스를 크기만 조금 줄이든가 본문 크기에 맞추는  방식 및 썸네일 대신에 원하는 색상 넣는 방식에 대해 알아보겠습니다.

 

목 차 1. 블로그 상단 제목 박스 썸네일 없애기 2. 상단 제목 박스 사이즈 줄이기 3. 상단 제목 박스 사이즈 본문 사이즈로 만들기 4. 블로그 타이틀과 본몬 제목 타이틀 간격 줄이기

1. 블로그 상단 제목 박스 썸네일 없애기

본문 제목 박스에 본문의 대표이미지가 썸네일 큰 사이즈로 나오는 기본 형태를 우리의 입맛에 맞추어 썸네일을 없애고 원하는 색상을 넣는 순서는 다음과 같습니다.

1. 블로그 관리홈

2. 메뉴에서 꾸미기의 스킨편집

3. html편집의 HTML 탭에서 수정합니다.

4. HTML탭에서 본문의 아무 자리 나 마우스를 한번 누른 후에 ctrl + F를 눌려 "post-cover"  찾기를 합니다. 다음 그림과 같은 모양을 찾습니다. (참고로 북클럽을 사용 중입니다.)

5. 빨간 박스 안의 내용을 "style="background-color:#B2A4FF;"로 바꾸면 썸네일은 없어지고 색상은 #B2A4FF 색상이 됩니다. 다른 색상은 구글에서 색상을 찾아보면 잘 나옵니다. https://colorhunt.co/  (참고:color hunt)

빨간 박스를 다 없애면 색상은 그레이회색으로 나옵니다.

6. 적용을 누르시면 됩니다. 다음은 바뀐 내용입니다.

2. 상단 제목 박스 사이즈 줄이기

제목 박스 세로 폭을 줄이는 순서는 다음과 같습니다.

1. 블로그 관리홈

2. 메뉴에서 꾸미기의 스킨편집

3. html편집의 CSS 탭에서 수정합니다.

4. CSS탭에서 본문의 아무 자리 나 마우스를 한번 누른 후에 ctrl + F를 눌려 "post-cover"  찾기를 합니다. 다음 그림과 같은 모양을 찾습니다. (북클럽) css탭은 변화가 거의 없으니 라인 1046 정도에 있습니다.

5. 빨간 박스 "height"의 숫자 340px를 200px로 바꾸면 됩니다. 확인 방법은 바꾼 후 적용 누른 후 새로고침 후 등록된 블로그를 조회하시면 변경된 크기가 나오니 보시면서 원할 때까지 반복하여 변경하면 됩니다.

6. 박스 내의 제목 위치가 불균형을 이루니 위치 변경도 설정해 보겠습니다.

빨간 박스 "padding-bottom"의 숫자를 20px로 바꾸시면 됩니다. 처음에는 78px로 되어 있었습니다. 확인 방법은 바꾼 후 적용 누른 후 새로고침 후 등록된 블로그를 조회하시면 변경된 크기가 나오니 보시면서 반복하여 원할 때까지 변경하면 됩니다.

3. 상단 제목 박스 사이즈 본문 사이즈로 만들기

이번은 가로폭과 세로폭을 본문의 크기와 상단 제목에 맞게 변경하는 방법입니다.

1. 블로그 관리홈

2. 메뉴에서 꾸미기의 스킨편집

3. html편집의 CSS 탭에서 수정합니다.

4. CSS탭에서 본문의 아무 자리 나 마우스를 한번 누른 후에 ctrl + F를 눌려 "post-cover" 찾기를 합니다. 다음 그림과 같은 모양을 찾습니다. css탭은 변화가 거의 없으니 라인 446 정도에 있습니다.

5. "position: absolute;"를 "position: relative;"로 변경합니다.

6. CSS탭에서 본문의 아무 자리 나 마우스를 한번 누른 후에 ctrl + F를 눌려 "post-cover" 찾기를 합니다. 다음 그림과 같은 모양을 찾습니다. (북클럽) css탭은 변화가 거의 없으니 라인 1046 정도에 있습니다.

7. 빨간 박스 "height"의 숫자 340px를 0px로 바꾸면 됩니다. 확인 방법은 바꾼 후 적용 누른 후 새로고침 후 등록된 블로그를 조회하시면 변경된 크기가 나옵니다.

 

이와 같이 2가지 방법 중에 본인 보기에 좋은 사이즈를 구하시면 됩니다.

4. 블로그 타이틀과 본몬 제목 타이틀 간격 줄이기

블로그 타이틀과 본몬 제목 타이틀 간의 간격 좁게 하려면

1. 블로그 관리홈

2. 메뉴에서 꾸미기의 스킨편집

3. html편집의 CSS 탭에서 수정합니다.

4. CSS탭에서 본문의 아무 자리 나 마우스를 한번 누른 후에 ctrl + F를 눌려 "container" 찾기를 합니다. 다음 그림과 같은 모양을 찾습니다. css탭은 변화가 거의 없으니 라인 440 정도에 있습니다. padding-top: 330px 를 0px로 바꾸시면 됩니다.

339 #tt-body-page #container {

440 padding-top: 0px;

 

5. 소제목 3번의 6번 7번 설명처럼 1046라인의 height: 340px 를 0px로 440라인과 1046라인을 수정하면 블로그 타이틀과 포스팅 제목 타이틀의 간격이 균형 잡힌 모양이 될 것입니다.

 

1041 .post-cover {

1042     position: relative;

1043     z-index: 20;

1044     display: table;

1045     width: 100%;

1046     height: 0px;

1047     background-color: #cbcbcb;

 

블로그 꾸미기 1- 수동 목차 만들기 바로가기