오디세이(Odyssey) 스킨 본문 가로 크기 수정하기 CSS 편집

티스토리에서 제공하는 스킨을 모두 설치해 봤는데 오디세이 스킨이 반응형 스킨 중에 제일 마음에 들어서 조금씩 수정하면서 사용하고 있습니다.

 

오디세이 스킨의 본문 크기가 작게 보여서 가독성이 떨어지는 부분이 있습니다.

 

오디세이 스킨 본문 너비 크기 조정

 

CSS 스킨 편집 들어가기

블로그 관리자에 들어가서 꾸미기 - 스킨편집으로 들어가 갑니다.

스킨 편집

오른쪽에 Html 편집을 클릭하고, CSS 편집으로 갑니다.

html 편집

CSS

 

 

CSS 코드 수정

이제 본문 크기를 조절 할 겁니다. 수정 시 실수가 있을 수 있기 때문에 CSS를 모두 복사해서 메모장에 붙여 넣고 저장해 주세요. 스킨을 편집 할 때마다 항상 백업을 해야 바로 복구할 수가 있습니다.

 

스킨 편집 안에서 'Ctrl+F'를 누르고 '.area-main'을 검색해 줍니다. 아래 코드는 본문 폭 크기에 영향을 주지는 않지만 본문 크기를 800px로 수정하기 때문에 780px에서 800px로 수정해 줍니다.

.area-main

 

실제 본문 가로 폭을 넓게하는 코드입니다. 아래 부분을 수정해 줍니다. .main (본문과 메뉴 크기), .area-main (본문 크기), .area-aside (메뉴)의 각 항목에서 max-width 폭 크기를 조정해 줍니다.

.main {
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
	}
 
 /* area-main */
.area-main {
    width: 100%;
    max-width: 800px;
	}

오디세이 스킨 편집 - 본문, 메뉴 폭 크기

본문이 640px에서 800px로 넓어져서 가독성이 더 좋아보이네요. 너무 넓게 하면 광고라든가 다른 추가 메뉴가 틀어지는 경우가 있으니 적당한 크기로 수정하시면 됩니다.

 

CSS 수정한 부분만 txt로 넣어 놨어요!

area-main_css_800.txt

0.00MB

 

 

스킨 수정 다른 글도 확인해 보세요!

2023.05.09 - [일상] - 티스토리 본문 제목 스타일 변경 (CSS 스킨 편집, 서식 만들기)

2023.05.28 - [일상] - 티스토리 쿠팡 파트너스 사이드바에 고정(플로팅) 하기