본문 바로가기
IT 정보/인터넷

티스토리 북클럽 스킨 본문 너비 조정하기

by 글천개
반응형

티스토리 북클럽을 본문 너비 조정하는 법에 대해 알아보겠습니다. 티스토리에서는 다양한 기본 스킨을 지원하고 있습니다. 하지만 꼭 기본 틀만 고집 안 해도 되는 게 그게 바로 HTML, CSS 언어를 수정하면 되는데 어렵지는 않습니다. 천천히 따라 하기만 해도 쉽게 적용이 가능합니다. 

 

반응형

    티스토리 북클럽 스킨 본문 너비 조정하기

1. 티스토리 북클럽 관리자 페이지
2. 사이드 메뉴 중에서 [스킨편집] 클릭
3. 상단 메뉴 중 [HTML 편집] 클릭
4. CSS 메뉴를 선택하고 들어감
5. 찾기 [ CTRL + F ] #content 검색
6. width: 67.1225412;  사이즈 조절

 

 

티스토리 북클럽 본문 너비 조절

티스토리를 하다보면 다음에서 제공하는 기본 스킨들이 많습니다. 여기서 유료로 돈을 주고 사기보다는 스킨을 편집해서 사용하는 게 더 유용할 때가 많습니다. 유료 스킨으로 경우 고가는 아니어도 나름 돈을 주고 구매하는 경우가 상단 수가 있는데 별반 차이가 있지는 않는 거 같더라고요.

 

개인들이 직접 만들어서 무료로 제공하는 경우도 상당수 있습니다. 그부분은 다음에 무료 제공 스킨에 대해 알아보도록 하겠습니다. 오늘은 공식 무료 스킨을 편집하고 조정하는 법에 대해 알아보겠습니다.

 

티스토리에서 제공하는 북클럽 스킨을 먼저 블로그에 적용을 합니다. 북클럽의 경우에는 본문 메엔 화면과 사이드바로 구성되어 있습니다. 지금은 메인 본문 페이지의 너비를 줄이고 늘리는 방법에 대해 알아보고자 합니다. 먼저 [ 관리자 페이지 ]  이동을 하면 좌측 메뉴 중에 [ 스킨 편집 ]  있습니다.

 

해당 메뉴를 통해서 들어가면 [ HTML 편집 ] 메뉴가 있는데 해당 메뉴로 들어갑니다. 해당 메뉴에서는 [ HTML / CSS ] 메뉴가 있는데 CSS 클릭하고 들어갑니다.

티스토리 본문 너비 수정
티스토리 북클럽 본문 너비 수정

 

 

티스토리 북클럽 CSS 편집하기

기본적으로 북클럽에서는 본문 너비와 사이드바 너비 등 모든 사이즈가 기본 설정이 되어 있습니다. 여기서 자신의 스타일로 바꾸기 위해서는 CSS 편집을 해야 합니다. 그럼 HTML 편집기를 이용해서 CSS 수정해 보겠습니다. [ CTRL + F ] 수정하고자 하는 문장을 검색해야 합니다. 

 

티스토리 본문 너비 수정
티스토리 관리자 모드 스킨편집 
티스토리 본문 너비 수정
티스토리 스킨편집 html 편집

 

기본적으로 HTML 언어가 너무 길기 때문에 손쉽게 찾기는 어렵습니다. 그럼 검색창에 [ #content ]  검색을 진행합니다. 검색을 하면 찾은 표시로 노란색을 표시가 되는데 해당 부분을 하나씩 보면서 검토를 해야 합니다.

 

300번대 우리가 찾는 코드가 숨겨져 있는데 아래와 같습니다.

#content {
float: left;
width: 60.518518518518519%;
padding: 10px 0 20px;
box-sizing: border-box;
}

티스토리 본문 너비 수정
티스토리 html 편집기 css 코드 수정

 

해당 부분은 너비를 수정하는 방법입니다 width 값을 수정하면 되는 화면을 비율로 영역을 표시하는데 줄이면 너비가 줄어들고 수치를 높이면 당연히 반대로 넓어집니다. 이렇게 자신에게 맞는 수치로 조정을 해서 원하는 값을 넣으면 간단히 본문 너비는 조정이 가능합니다.

 

본문의 너비를 조정하게 되면 반대로 사이드바 너비로 조정을 해줘야 보기에 좋습니다. 여기서 본문만 줄이면 사이드바 간격이 벌어서 보기에 좋지 않습니다. 다음에는 사이드바 너비 조정하는 방법에 대해 알아보겠습니다.

 

마무리 

이렇게 오늘은 티스토리 북클럽의 메인 본문 너비를 조정하는 방법을 알아봤습니다. 다른 스킨보다 쓰기도 편하고 모양도 괜찮은 거 같습니다. 본문도 조정하고 사이드바도 수정하고 폰트나 색상 등을 수정하면 돈을 주고 살 필요가 없다고 느껴질 겁니다.

 

꼭 유료 스킨이 아니더라도 html, css 수정을 통해서 자신이 원하는 사이즈나 모양으로 변경이 가능합니다. 이것도 하나하나 배워가도록 하겠습니다.

 

댓글