티스토리 square 반응형 스킨 편집 정리
square 스킨 사이드바 가로값 조절
CSS 편집 부분에서 sidebar를 검색합니다.
그럼 다음과 같은 부분을 찾을 수 있습니다.
여기에서
#sidebar { position: fixed; top: 0; left: 0; bottom: 0; padding: 0 30px; max-width: 350px; width: 100%; height: 100%; font-size: 15px; font-weight: bolder; background-color: #fff; border-right: 1px solid #ddd; cursor: default; overflow-y: auto; z-index: 100; }
max-width: 350px 이 부분이 가로값을 조절하는 부분입니다. 저는 350px 로 폭을 넓게 했습니다.
square 스킨 타이틀 폰트 크기 변경
다음은 타이틀 폰트 크기 변경 입니다.
타이틀 폰트 크기를 변경하는 위치는 다음과 같습니다.
css 부분에서 sidebar h1 부분을 찾아줍니다.
#sidebar h1 { margin: 0; padding: 0; text-align: center; font-size: 30px; line-height: 2; }
font-size: 30px; 이 부분이 타이틀 폰트 크기 변경하는 곳입니다.
square 스킨 대 카테고리 글씨 크기 변경
다음은 사이드바 부분의 상위 카테고리 글씨 변경입니다.
css 에서 #sidebar .widget h3 부분을 찾아줍니다.
#sidebar .widget h3 { margin: 0; padding: 0; font-size: 22px; font-weight: 500; color: #07a; }
font-size: 22px 이 부분이 square 대 카테고리 글씨 크기 부분입니다. 이 코드에서 컬러로 바꿀 수 있습니다.
다음은 소 카테고리를 변경하도록 하겠습니다.
square 스킨 소 카테고리 글씨 크기 변경
소 카테고리 글씨 크기 변경은 sidebar 가로 폭 조절하는 곳에서 변경가능합니다.
CSS 편집 부분에서 sidebar를 검색합니다.
그럼 다음과 같은 부분을 찾을 수 있습니다.
여기에서
#sidebar { position: fixed; top: 0; left: 0; bottom: 0; padding: 0 30px; max-width: 350px; width: 100%; height: 100%; font-size: 15px; font-weight: bolder; background-color: #fff; border-right: 1px solid #ddd; cursor: default; overflow-y: auto; z-index: 100; }
font-size: 15px; 이 부분이 소 카테고리 크기 변경을 하는 부분입니다.
글씨에 두껍게 하고 싶으신 분들은 파란색 부분 font-weight: bolder; 을 추가로 적으시면 됩니다.
추가하시면 다음과 같이 됩니다.
#sidebar { position: fixed; top: 0; left: 0; bottom: 0; padding: 0 30px; max-width: 350px; width: 100%; height: 100%; font-size: 15px; font-weight: bolder; background-color: #fff; border-right: 1px solid #ddd; cursor: default; overflow-y: auto; z-index: 100; }
square 스킨 카테고리 괄호 부분 폰트 크기 변경
다음은 카테고리 옆 글 갯수를 나타내는 부분 폰트 크기 변경을 하도록 하겠습니다.
css 에서 검색을 cnt로 하시면 찾기가 쉽습니다.
#sidebar .category .c_cnt { font-size: 15px; line-height: 0; }
font-size: 15px; 이 부분이 괄호 숫자 크기를 변경하는 부분입니다.
이어서 글 영역의 스킨 폭을 넓히도록 하겠습니다.
square 스킨 글 영역 폭 넓히기
css 에서 content 로 검색합니다.
다음과 같은 부분을 찾아줍니다.
#content-inner { max-width: 1100px; width: 100%; }
max-width: 1100px; 이 부분이 글 영역을 넓히는 부분입니다. 저는 1100px 로 넓혔습니다.
다음은 컨텐츠 글 영역 부분 위치 조절입니다.
저는 개인적으로 square 스킨은 2단 구조로 되어있다보니 조금 휑한 느낌과 한쪽으로 너무 치우쳐져 있는 듯 하여
글 영역 부분을 가운데 정렬하도록 하겠습니다.
square 스킨 글 영역 가운데 정렬
#content-inner { max-width: 1100px; width: 100%; } 가 있는 부분 바로 아랫줄에 다음과 같은 코드를 넣어줍니다.
#content-inner { margin:0 auto; }
그럼 다음과 같이 두줄이 됩니다.
#content-inner { max-width: 1100px; width: 100%; }
#content-inner { margin:0 auto; }
저는 우선 여기 까지만 수정했습니다.
프로필 영역에 프로필 사진을 넣으려고 했는데
실력이 부족하다 보니 메인 화면에서 글 영역이 계속 사라져서 진행하지 않았습니다.
이 글이 저와 같은 티스토리 square 스킨 편집을 원하시는분 에게 도움이 되길 바랍니다.
도움이 되셨다면 좋아요 부탁드립니다.
'디지털노마드 > 티스토리' 카테고리의 다른 글
| 티스토리 서식 공유 추천 (6) | 2019.03.05 |
|---|---|
| 티스토리 블로그 설정 (0) | 2018.10.22 |
| 티스토리 square 반응형 스킨 편집 정리 1 (0) | 2018.10.15 |
| 티스토리를 시작하다 (0) | 2018.10.11 |
