티스토리 북클럽 본문 넓이 수정하는 방법

티스토리 북클럽 스킨의 본문 넓이 수정하는 방법에 대해서 설명하겠습니다. 북클럽 스킨의 기본형태는 본문이 다소 좁아 글을 발행했을 때, 글을 읽는 사람들로 하여금 답답한 느낌을 줄 수 있습니다. 본문 넓이를 일부 조정함으로써 블로그의 가독성을 높일 수 있습니다.

 

북클럽 스킨 본문 넓히는 방법

 

 

목차
1. 북클럽 스킨 본문 넓이 수정 요약
2. 메인 페이지 넓이 수정
3. 콘텐츠 페이지 넓이 수정

 

 

 

1. 북클럽 스킨 본문 넓이 수정 요약

티스토리 북클럽 스킨은 많은 사람들이 사용할 만큼 잘 만들어졌습니다. 하지만 글을 발행할 때, 일부 문단이 의도치 않게 줄 바뀜이 생기는 등 아쉬운 점도 분명 있습니다. 이번 포스팅에서는 사이드바를 유지하는 상태에서 본문 넓이를 수정하는 방법을 알려드리겠습니다. 요약하면 다음과 같습니다.

 

항목	수정내용
메인 페이지	CSS, max-width: 1080px; → max-width: 1160px;
콘텐츠 페이지	CSS, width: 68.51xxxx%; → width: 70.7%;
콘텐츠와 사이드바 사이 영역	CSS, margin-left: 255, -255px; → margin-left: 288, -289px

 

---

 

2. 메인 페이지 넓이 수정

메이 페이지 넓이 수정입니다. 북클럽 스킨의 북리뷰 타입을 기본으로 설명드리겠습니다. 아래 그림은 CSS코드를 적용하여 넓이를 수정한 모습입니다. 1080px에서 1160px로 바뀐 정도를 빨간색 선으로 표현하였습니다. 좌, 우 양측에서 조금씩 넓어졌음을 확인할 수 있습니다.

 

 

블로그 메인 페이지 넓이 수정

 

수정 순서는 다음과 같습니다.

 

• 1. 관리 화면 > 스킨 편집 > html 편집 > CSS로 이동합니다.
• 2. CSS에서 Ctrl+F를 사용하여 "max-width: 1080"을 검색합니다.
• 3. 1080px를 1160px로 총 6개소 변경합니다.

북클럽 초기 버전 기준으로 123번 줄을 포함한 6개소 코드를 변경해 줍니다.

 

/* 123번 줄 */
#header .inner {
	position: relative;
	max-width: 1160px;
	margin: 0 auto;
}

#container .content-wrap /* 315번 줄 */
#footer .inner           /* 368번 줄 */
.post-cover .category    /* 1071번 줄 */
.post-cover h1           /* 1077번 줄 */
.post-cover .meta        /* 1090번 줄 */

 

 

 

---

 

3. 콘텐츠 페이지 넓이 수정

메인 페이지에 이어 콘텐츠 페이지도 수정해줘야 합니다. 아래 사진의 빨간 선을 보면, 메인 페이지와 마찬가지로 양측으로 약간씩 넓어졌음을 확인할 수 있습니다.

 

 

블로그 콘텐츠 페이지 수정

 

 

수정방법을 요약하면 다음과 같습니다.

 

• 1. 관리 화면 > 스킨 편집 > html 편집 > CSS로 이동합니다.
• 2. CSS에서 Ctrl+F를 사용하여 "width: 68"을 검색합니다.
• 3. 68.51xx% → 70.7%로 수정합니다.

북클럽 초기버전 기준으로 339번 줄을 아래의 코드처럼 수정합니다.

 

/* 339번 줄 */
#content {
	float: left;
	width: 70.7%;
	padding: 72px 0 60px;
	box-sizing: border-box;
}

 

 

3-1. 콘텐츠와 사이드바 사이 영역 수정

콘텐츠 페이지 외에 한 곳을 더 수정해야 합니다. 눈으로 잘 식별이 되지는 않지만, 본문 우측과 사이드바 사이에 세로줄이 하나 있습니다. 콘텐츠를 수정하면 앞서 보았던 그림의 좌측 파란색 선이 본문 옆에 붙어 있음을 확인할 수 있습니다. 이것을 콘텐츠와 사이드바 사이의 중간에 위치하도록 수정하는 것입니다.

 

수정 순서는 다음과 같습니다.

 

• 1. 관리 화면 > 스킨 편집 > html 편집 > CSS로 이동합니다.
• 2. CSS에서 Ctrl+F를 사용하여 "margin-left:255"와 "margin-left: -256"을 검색합니다.
• 3. 255px → 288px, -256px → -289px로 수정합니다.

 

북클럽 초기버전으로는 각각 327번과 2210번 줄에 있습니다.

 

/* 327번 줄 */
#container .content-wrap:before {
	content: "";
	position: absolute;
	top: 0;
	left: 50%;
	z-index: 10;
	width: 1px;
	height: 100%;
	margin-left: 288px;
	background-color: #eee;
}

/* 2210번 줄 */
.layout-aside-left #container .content-wrap:before {
	margin-left: -289px;
}

 

---

지금까지 북클럽 스킨의 메인 페이지와 콘텐츠 페이지의 넓이를 수정하는 방법을 알아보았습니다. 기존과 넓이 차이가 거의 없다고 느낄 수도 있습니다. 하지만 그 작은 차이가 글을 읽는 사람들에게는 보기 편한 블로그라는 인식을 주기에 충분할 수도 있습니다. 간단한 수정으로 큰 효과를 누리시기를 바라겠습니다.

 

 

티스토리 스킨 변경방법과 변경 후 필수 확인요소

티스토리 스킨 변경방법과 변경후 필수 확인요소