티스토리 포트폴리오 스킨 수정. 본문 너비 조정. 본문 폭 넓히기

티스토리에서 기본적으로 제공하는 반응형 스킨인 포트폴리오 스킨을 적용 후, 포스팅한 내용들을 보니 넓은 도화지 내의 공간을 충분히 활용하지 못한 느낌이 살짝 들었습니다. 이유는 본문 너비가 충분히 넓지 않게 설정돼있기 때문이었습니다.

 

요즘에는 정사각형 모니터를 쓰시는 분들보다 와이드형 모니터를 쓰는 분들이 훨씬 많기 때문에 티스토리 블로그의 화면을 효율적으로 활용할 필요가 있었습니다.

 

우선 본문 너비가 720px로 비교적 좁은 상태의 화면을 보시면 아래와 같습니다. 이 정도의 너비가 적당할 수도 있고 보기 좋을 수도 있지만 애드센스 반응형 광고가 표출될 때 보면 정사각형에 가까운 광고가 나오는 경우가 많아 글이 쓰인 문단의 너비와 왠지 어울리지 못하는 느낌이 살짝 듭니다.

본문 너비 720px의 경우 포스팅된 글의 모습

 

이를 해결하기 위해 아래와 같이 본문 너비를 1024px로 늘려보았습니다. 이제 글들이 옆으로 시원시원하게 나열되는 것을 확인할 수 있습니다. 애드센스 반응형 광고도 글 문단 너비와 비슷한 길이로 표출되는 것을 볼 수 있었습니다.

본문 너비 1024px의 경우 포스팅된 글의 모습

이렇게 본문 너비를 넓히고 줄이는 방법은 다음과 같습니다. 티스토리 스킨마다 약간 다를 수 있지만 넓이에 해당하는 'width' 부분을 검색하여 조정 후 적용을 몇 번 반복해보시면 성공하실 것입니다. 저는 포트폴리오 스킨(Portfolio Skin)을 기준으로 말씀드리겠습니다.

1. 크롬브라우저로 개발자 툴 켜기

먼저 스킨 수정의 가장 기본은 구글 크롬브라우저에서 F12버튼을 눌러 개발자 툴을 켜주는 것에서부터 시작합니다. 개발자 툴을 켜면 아래 캡쳐화면의 오른쪽 상단 붉은 박스 부분의 화살표가 보이실 겁니다. 이 화살표를 클릭 후 본문에 마우스를 갖다 두면 여러 개로 나누어져 구분된 영역들이 음영으로 표시됩니다. 우리가 원하는 것은 '본문 너비'를 조정하는 것이므로 마우스를 움직여 음영이 '본문 너비'를 나타낼 때 마우스를 '클릭'하면 오른쪽 개발자 툴에 해당 부분의 소스 코드가 나타납니다. 

 

2. CSS에서 'article_view' 검색하고, 'max-width' 부분 수정하기

개발자 툴에서 선택한 음영에 나타난 class명을 보시면 'article_view'라고 쓰여있는 것을 볼 수 있습니다. 이 개발자 툴에서 확인한 코드는 HTML에 있는 코드입니다. 이제 티스토리 스킨편집 화면으로 들어가 CSS 편집화면에서 'article_view' 를 검색하시면 여러 개가 뜨는 것을 볼 수 있습니다. 이 중 'max-width' 부분을 찾으면 1~2개가 나옵니다. 이 중에서 하나를 조정 후 적용시켜보면 너비가 바뀌는 것을 확인할 수 있습니다. 저는 1024px로 수정했습니다. 확실히 너비가 넓어진 것을 확인할 수 있습니다. 블로그 특성에 맞게 원하는 너비로 조정하시면 되겠습니다.

 

3. 수정 후 주석 달아놓기

HTML이나 CSS 편집화면에서 코드를 수정 후 항상 '주석'을 달아놓으면 좋습니다. 나중에 다시 스킨을 수정해야 할 경우 다시 처음부터 찾아야하는 번거로움을 덜 수 있기 때문입니다. '주석'은 꼭 기억할 수 있게 규칙성 있게 작성하시면 좋습니다. 또는 자신이 다시 검색하더라도 이 단어로 검색하겠다 싶은 단어를 꼭 넣어 작성하는 것이 추후 스킨 수정 시 매우 유용합니다. 참고로 HTML에서 주석을 다는 방법은 <!--  주석 내용 --> 이와 같이 표시하시면 되고, CSS에서 주석을 다는 방법은 /* 주석 내용 */ 이와 같이 표시하시면 됩니다. 주석으로 표시한 부분은 티스토리 스킨편집 화면에서 갈색으로 표시되며 HTML, CSS언어로 인식되지 않습니다.