본문 바로가기
🌿 오늘도 들러주셔서 감사합니다. 이 공간이 여러분께 작은 쉼이 되기를 바랍니다.
블로그 개설 & 운영

티스토리에서 본문과 사이드바(카테고리 등) 사이본문영역 확장및 구분선을 제거하려면

by 블로바 2025. 5. 21.
반응형

티스토리 북클럽 스킨사용중 오른쪽 사이드바 영역이 여백으로 있어 본문영역이 작아 불편하고 본문확장후 구분선으로 화면이 잘리는 등의 불편함 여러분도 느끼셨을 겁니다

✅ 목표

  1. 카테고리 사이드바 제거 또는 숨기기
  2. 사이드바와 본문 사이 구분선 제거
  3. 본문 영역을 100%로 확장

✅ 1. 사이드바 숨기기 (필요한 경우)

css
복사편집
#aside, .sidebar, .sidebar-area { display: none !important; }

사이드바는 .sidebar 또는 #aside라는 ID/클래스를 많이 사용합니다.
사용 중인 스킨 구조에 맞게 적용해주세요.

✅ 2. 구분선 제거 (사이드바와 본문 사이)

css
복사편집
#content, .content-area, .container { border: none !important; box-shadow: none !important; }

일부 스킨에서는 border-right 또는 border-left로 구분선을 구현합니다:

css
복사편집
#content { border-right: none !important; }

 

✅ 3. 본문 영역 100% 확장

css
복사편집
#content, .content-area { width: 100% !important; max-width: 100% !important; }

또는 레이아웃이 flex 구조일 경우:

css
복사편집
.container { display: block !important; }

💡 .wrap, .container, .inner, .article, #content 등 본문 레이아웃에 영향을 주는 클래스명을 F12(개발자도구)로 확인하여 수정하세요.

✅ 4. 전체 적용 예시

css
복사편집
/* 사이드바 숨기기 */ #aside, .sidebar { display: none !important; } /* 구분선 제거 */ #content, .container { border: none !important; box-shadow: none !important; } /* 본문 영역 전체 확장 */ #content { width: 100% !important; max-width: 100% !important; float: none !important; }

✅ 적용 방법

  1. 티스토리 관리자 페이지 접속
  2. 스킨 편집 → CSS 편집
  3. 맨 아래에 위 코드 추가
  4. 저장 후 블로그 새로고침

📌 팁 나만의 쉽게 하는 방법

본문 확장 사이드바 영역 삭제

사이드바 구분선 있어 불편함

 

실행방법

변경전 본문 width 값변경전 사이드바 width 값
css 변경전 width 값

 

위의 수치를 Width 값을 아래처럼 가각 99,  00으로변경

변경후 본문 width 값변경후 카테고리 width 값
css 변경후 width 값

 

사이드바 구분선 없애는 방법

사이드바 구분선
오른쪽 흰색의 사이드바 구분선

실행방법

css 편집에서 아래항목 width 값을 1에서 0으로 변경저장

구분선 변경전구분선 변경후
css width 값 변경

 

반응형