안녕하세요 이번에도 티스토리 관련 유익한 정보를 알려드리기 위해서 간단하게 포스팅 해보도록 하겠습니다 오늘 알아볼 내용은 티스토리 가로폭 사이즈 조절하는법에 대해서 알아보도록 할텐데요 물론 티스토리 블로그 초보자 분들을 위해서 무료 기본 티스토리 스킨 부터 fastboot 스킨까지 가로폭 사이즈 조절 방법 모두 알려드릴테니 하단 그림설명을 잘 따라와 주시면 되겠습니다
우선 기본 무료 티스토리 스킨 부터 설명드려 보도록 하겠습니다 물론 기본 스킨 종류도 다양한데요 많이 이용하시는 스킨들 위주로 설명드려볼테니 차근차근 따라해보시면 쉽게 적용해 주실 수 있으실것 같습니다 자 그럼 시작해보도록 하겠습니다
물론 대부분 다른 티스토리 블로그 들이 설명하고 있는 내용을 보시면 글쓰기 상자에서 가로폭 조절하는 방법을 설명해 놓은 경우가 많은데요 물론 해당 글을 발행하고 보면 폭이 줄어들어 있지 않게 보이는것을 확인하실 수 있습니다 이것은 단순히 글쓰기 가로폭을 줄이는 것이지 실제 보여지는 티스토리 article 가로폭 조정 방법이 아니기 때문에 실제로 조정해주시려면 아래와 같이 html편집 으로 들어가셔서 수정해주셔야 합니다
기본 무료 스킨
가장 먼저 반응형 스킨 #1 부터 알아보도록 하겠습니다 무료 스킨이면서 사용하는 사람들이 많지만 처음 하시는 분들은 어떻게 수정해야 하는지 몰라서 답답해 하신 분들도 많으셨을것 같습니다 이 스킨은 사이드바가 따로 있지 않기 때문에 css 수정을 통해서 쉽게 적용해주실 수 있는데요
html편집창으로 들어가셔서 css 항목을 클릭해주시면 다음과 같이 코드 검색으로 article_skin 을 검색해 주시면됩니다 그럼 다음과 같이 width 항목에 너비 사이즈 px 값이 나오게 됩니다 여기서 원하시는 사이즈로 입력하셔서 저장해주시면 됩니다
다음으로 많이 이용하시는 스킨으로 square 인데요 이 스킨은 사이드바가 있지만 역시 css수정을 통해서 쉽게 변경 해주실 수 있습니다
html편집 창으로 들어가신 다음 역시 css항목으로 이동합니다 그리고 여기서 검색으로 content-inner 를 찾아주세요 그러면 위 그림과 같이 나오는데요 이것도 마찬가지로 max-width 사이즈를 조절해 주시면 됩니다
fastboot 스킨
마지막으로 fastboot 스킨에서 가로폭 사이즈 조절 방법 입니다 이 스킨 같은 경우 다른 무료 스킨과는 다르게 html에서 조정해 주실수가 있습니다 하지만 안타깝게도 px 로 조정되는 것이 아니라 비율로 조절을 해주게 되어 있기 때문에 불편해 하실 수도 있으실것 같은데요
우선 fastboot 스킨에서 html 편집으로 들어가줍니다 그럼 다음과 같이 나오는데 여기서 검색창으로 id="leftcontent" 를 입력해서 찾아주세요 이부분은 위에 그림에서 나와있는 본문 가로폭 사이즈 영역을 의미합니다 해당 코드 오른쪽 코드를 확인해 보시면 col-md-8 이라고 되어 있는데 뒤에 숫자 8 보다 크게 설정해주시면 본문 티스토리 가로폭 사이즈가 늘어나게 되는 것입니다
반대로 사이드바 부분의 티스토리 가로폭 역시 조정을 해주셔야 하겠죠 코드 검색으로 id="sidebar" 를 검색하셔서 오른쪽 col-md-4 이라고 되어있는 숫자 4을 작게 설정해주시면 되는데요 여기서 한가지 주의사항이 있습니다 바로 위에 본문 가로폭에 입력했던 8이라는 숫자와 사이드바 가로폭 4이라는 숫자의 합이 반드시 12가 나오게 설정해주셔야 한다는 점입니다 애초에 스킨을 만들때 본문과 사이드바 폭 사이즈가 일정하도록 만들어졌기 때문인것 같습니다 이점을 유의하셔서 설정할수는 있는데 개인적으로 그냥 기본 사이즈로 사용하는 것이 더 좋다는 결론을 내었습니다 이점 참고해주시면 좋을것 같습니다
이것으로 티스토리 가로폭 사이즈 조절법에 대해서 한번 정리해 보았습니다 물론 html 수정을 처음하시는 분들은 매우 어려울수도 있겠습니다 하지만 여러번 따라하다보면 조금씩 늘게 되는만큼 위 내용을 잘 읽어보시고 한번 실습해보시길 바랍니다 혹시라도 티스토리 블로그 관련해서 더 궁금하신점이 있다면 아래 포스팅 글도 참고해주시면 도움이 되실것 같습니다
'돈버는공부 > 티스토리 연구' 카테고리의 다른 글
티스토리 html 배너 삽입 방법 - 사이드바 광고 넣기 (4) | 2018.03.31 |
---|---|
네이버 검색엔진 최적화 - html 마크업 하는법 (0) | 2018.03.29 |
블로그 포스팅 누락 확인 및 검색반영 요청 방법 (0) | 2018.03.26 |
티스토리 배경음악 bgm 넣는법 (1) | 2018.03.21 |
블로그 포스팅 개수 몇개가 적당할까? (0) | 2018.03.20 |