고래스킨 게시글 너비 변경하기(게시글이 좁아서 답답했던 분들께)

 

 

안녕하세요? 빵순쓰입니다.

 

수익형 블로그를 운영하시는 많은 분들이 고래스킨을 채택하여 사용하고 있습니다.

저도 여러 스킨을 찾아보다가 결국 정착한 것이 고래스킨이었는데요,

많은 분들이 사용하고 있으니 html 도움을 청할 곳도 많고 비쥬얼적으로도 매우 깔끔하여 블로그 운영에 많은 도움을 받고 있습니다.

 

아직 고래스킨을 다운받지 않은 분들은 고래스킨으로의 스킨 변경을 고려해 보시기 바랍니다.

고래 스킨은 아래 카페에서 무료로 배포하고 있습니다.

 

https://cafe.naver.com/vbpcc3

애센라이프 - 애드센스 / 워드프레스... : 네이버 카페

 

 

고래스킨을 적용하고 나니 단 한가지 마음에 안 드는 점이 바로 블로그 너비가 너무 좁다는 것이었습니다.

고래스킨 와이드 버전이 있으면 바로 갈아타고 싶을 정도였지만, 안타깝게도 와이드 버전은 없습니다.

 

하지만 티스토리 블로그의 장점이 무엇이겠습니까? 바로 html 수정을 통한 커스터마이징이 자유롭다는 것입니다.

 

고래스킨의 답답한 너비가 마음에 안 드셨던 분들께 제가 알아낸 너비 변경 방법을 공유하고자 합니다.

html 수정 몇 개 만으로 매우 간단하게 수정이 가능하니 지금부터 잘 따라오시기 바랍니다.

 

[목차]

 

---

게시글 너비 변경 방법

게시글 너비 변경을 위해 블로그 관리 -> 스킨 편집 -> html 편집 -> CSS로 진입합니다.

게시글 너비 변경은 1) 전체 가로 너비, 2) 글 너비, 3) 사이드바 너비 수정으로 순차적으로 이루어집니다.

 

전체 가로 너비 수정

고래스킨은 container 라는 네모 상자 안에 게시글 + 사이드바가 들어있는 형태입니다.

따라서 게시글의 너비를 수정하려면 우선 container의 최대 너비를 늘려주어야 합니다.

 

Ctrl + F를 눌러 #wrap #container를 검색 후 width를 1200px로 높여 줍니다.

더 넓게 사용하고 싶은 분은 숫자를 조금씩 올려가며 적용합니다.

 

 

글 너비 수정

글은 세 개의 max-width를 수정하여 넓혀줄 수 있습니다.

 

첫 번째 손볼 것은 category .h-entry입니다. 아래의 코드와 똑같은 부분을 찾아 max-width를 950px로 설정합니다.

역시 더 넓은 너비를 원한다면 숫자를 높여 줍니다.

 

 

두 번째로는 page .h-entry를 검색해 최대 가로 너비를 높여 줍니다.

 

 

마지막, .post-content를 검색해 이전과 마찬가지로 최대 너비를 높여 줍니다.

 

 

 

 

사이드바 너비 수정

사이드바는 넓어진 게시글의 너비만큼 균형있게 줄여 줍니다.

저는 #sidebar를 검색 후 max-width를 250px로 줄여 주었습니다.

 

 

최종 정리

전체 가로 너비(글+사이드바): #wrap #container 검색 후 width: 1200px로 변경

글 너비: 아래 세 개의 조치 취하기

 -category .h-entry 검색 후 max-width: 950px로 변경

 -page .h-entry 검색 후 max-width 950px로 변경

 -post-content 검색 후 max-width: 950px로 변경

사이드바 너비: #sidebar 검색 후 max-width: 250px로 변경

 

---

 

글을 마치며

수익형 블로그를 운영할 때는 글의 내용도 중요하지만 블로그를 방문하는 사람들의 가독성도 함께 고려해야 합니다.

게시글의 너비가 넓으면 블로그 방문자로 하여금

이탈률을 줄이고 온전히 글의 내용에만 집중할 수 있도록 합니다.

 

블로그 방문자의 가독성을 고려하여 여러분의 소중한 파이프라인 구축에 도움이 되었으면 좋겠습니다.

 

저도 배워가고 있는 초보자라 많이 알지는 못하지만 혹시 설정하면서 잘 되지 않거나 질문사항이 있다면 성심성의껏 답변해 드리겠습니다. 오늘도 좋은 하루 보내세요.

 

 

함께 보면 좋은 글

블로그 체류 시간을 늘려주는 로딩 이미지 설정하기

 

수익형 블로그에 필수인 자동목차 설정(복붙 한번으로 해결했어요)

 

티스토리 블로그 상단 광고 두 개 설정하기