티스토리 뷰

티스토리 블로그 스킨 변경하기-블로그 본문과 사이드바 폭 변경하기

커피 한 잔의 여유 2013. 3. 2. 15:02

블로그는 본인의 얼굴과도 같다. 블로그를 어떻게 꾸몄는가에 따라 방문자의 느낌은 매우 다양할 것이다. 블로그는 예쁘게 꾸민다고 해서 무조건 좋은 것은 아니다. 블로그의 활용 용도가 본인만의 이야기를 담는 곳인 경우는 조금 다르겠지만, 본인만의 노하우를 기록함으로써 많은 방문자를 유입시키고자 하는 분, 유입된 방문자가 아늑한 분위기 속에서 나만의 노하우를 집중해서 읽을 수 있기를 원하는 분들은 블로그를 새롭게 단장할 필요가 있다.

 

내용을 간결하게 적으면서도 내용 전달을 주 목적으로 하시는 분은 본문 영역을 좁게 하는 것이 좋다.

내용이 많거나 고해상도의 이미지가 들어가는 경우는 본문 영역이 넓은 것이 좋다.

 

사이드바는 본인 로고, 카테고리, 최신글, 최신댓글 등으로만 구성하는 분은 내용의 폭을 감안하여 정하면 되고, 광고를 넣고자 하시는 분은 광고의 폭을 감안해서 정해야 한다.

 

 

 

 

티스토리에서 스킨 변경하기

 

블로그의 스킨을 변경하는 과정을 간략하게 설명한다. 아래의 예시는 티스토리 블로그를 기준한다.

티스토리에서는 블로거들의 편의를 위해 다양한 스킨들을 제공하고 있으며, 스킨 위자드(마법사)를 통해 쉽게 수정할 수 있도록 하고 있다.

 

티스토리 블로그 스킨 변경하기 순서는 다음과 같다.

1. 블로그 스킨 선택하기

2. 스킨 위자드를 이용하여 수정하기

3. 배경 변경하기

4. 타이틀 변경하기

5. 본문 영역 변경하기

6. HTML을 이용하여 사이드바 폭 수정하기

7. 관리자모드에서 글쓰기 가로폭 설정

 

 

 

블로그 스킨 선택하기

 

티스토리 관리자 메뉴에 보면 [스킨]메뉴가 있다. [스킨] 메뉴를 선택하면 1단형, 2단형, 3단형, 기타로 총 4가지 종류의 스킨을 선택한다. 본인의 블로그 테마에 가장 적합한 종류를 선택 후 사이드바의 위치를 고려하여 스킨을 하나 선택한다. 아래의 예시는 2단형 중에서 사이드바가 오른쪽에 위치한 스킨이다. 스킨 중에는 우측 하단에 M자 표시가 있는 것이 있다. 이는 블로그 메뉴를 선택할 수 있다는 뜻이다. M자 표시가 없으면 블로그 메뉴를 선택할 수 없다.

 

 

 

스킨 위자드를 이용하여 수정하기

 

스킨 메뉴에서 원하는 스킨을 선택하게 되면 사용중 스킨으로 등록이 된다. 스킨의 세부적인 내용을 변경하고자 한다면 스킨 위자드 버튼을 클릭하여 수정하면 된다. 세부적인 내용으로는 배경 그림이나 타이틀 디자인을 뜻한다.

 

배경 변경하기, 타이틀 변경하기

 

배경탭에는 다양한 이미지가 제공되고 있다. 이 이미지 중에서 선택해도 되고, 본인이 가지고 있는 그림을 이용하고자 한다면 직접올리기 버튼을 클릭해서 올릴 수 있다.

 

 

 

 

 

게시글 변경하기(본문 영역 변경)

 

본문 영역은 작성한 글의 본문이 들어가는 영역이다. 본인의 블로그 테마에 맞게 폭을 조절하면 된다. 글을 작성 후 본문 영역을 조절하게 되면 기존의 글에 들어 있는 그림의 경우 잘리는 현상이 발생할 수도 있으므로 본문 영역의 폭은 블로그 개설 초기에 정하고 수정하지 않는 것이 좋다.

 

아래의 예시는 본문 영역의 넓이를 610 으로 수정한 경우이다.

 

 

 

 

HTML을 이용하여 사이드바 폭 수정하기

 

HTML을 자주 사용해 보신 분은 그리 어렵지 않게 사이드바의 폭을 조절할 수 있지만, HTML 이 친숙하지 않으신 분들은 본문 영역과 사이드바의 폭을 조절하는 것이 결코 만만치만은 않다. 그래서 본문 영역과 사이드바의 크기를 조절하는 예를 설명하고자 한다. 아래의 그림을 보면 본문 영역은 610 픽셀이며, 사이드바 영역은 290 픽셀이다. 본문 영역과 사이드바 좌우에 각각 10 픽셀이 있다.

 

 

 

 

관리자 메뉴의 HTML/CSS 편집 메뉴를 선택하면 하단에 style.css 창이 있다. 컨테이너의 크기 및 본문 영역, 사이드바의 크기를 변경하기 위해서는 style.css 파일을 수정해야 한다.

 

본문 영역을 610 픽셀, 사이드바를 290 픽셀로 변경해 보자. 본인의 블로그 크기가 이보다 크거나 작다면 해당되는 차이만큼 변경해서 작성하면 된다.

 

위의 그림에서 930 픽셀 중 좌우 각각의 10 픽셀을 제외하면 910 픽셀이 된다. 910 픽셀은 순서대로 하면 610 픽셀 + 10 픽셀 + 290 픽셀이다. 이 수치를 style.css 파일에 각각 대입해 보자. 해당 위치를 찾기 어려우므로 CTRL + F 기능을 이용하여 #container 라고 입력 후 다음찾기 기능을 이용하면 해당 위치를 찾을 수 있다. 아래 풍선 도움말에 표시해 둔대로 수정을 해보자. 본문 영역의 크기를 스킨 위자드에서 수정한 경우는 이미 해당 값이 적용되어 있으므로 수정하지 않아도 된다.

 

 

이와 같이 수정 후 저장하면 스킨 변경은 완료가 된다. 스킨 변경시에는 미리보기 기능을 이용하거나 테스트용 블로그에 스킨을 적용해 보고, HTML과 style.css 값도 변경해 보고 원하는 모양이 나올 경우 수정하기를 추천한다.

 

관리자 모드에서 글쓰기 가로폭 설정

 

관리자 모드의 "글설정"에 글쓰기 환경 항목 중 글쓰기 가로폭을 본문영역의 넓이로 지정해 주면 된다. 아래 그림은 글쓰기 가로폭을 630으로 지정한 예이다.

 

 

저는 위 상품을 소개하면서 포인트를 받았습니다.