티스토리 사이드바 오른쪽에서 왼쪽으로 옮기기 본문 영역은 왼쪽으로!!

마크쿼리 웹 반응형 스킨 사이드바 수정

Spider’s Web 3.0.5 기준으로 작성했습니다.

상단메뉴바수정하는부분은 대충다된거같으니 이제 사이드바? 수정할부분을 끄적거려볼께요. ^^
그리고 상단 메뉴 부분은 앞으로 바꾸면 그때그때 포스팅하도록 하겠습니다.

1. 사이드바 오른쪽에서 왼쪽으로.
2. 사이드바 하단에 추가.
3. 모바일에서 사이드바 숨기기.
4. 나머지 수정한 부분.?

제가 사이드 바를 왼쪽에 기본적인 위치에서 오른쪽으로 옮긴 이유는 별다른 건 없습니다. ㅎㅎ
다들 그리고 다른 스킨도 사이드바가 오른쪽에 있으니 왼쪽으로 옮겨서 사용하는 겁니다.
애드센스 부분 테스트 한다고 옮긴 이유도 있지만 옮기고 나서 괜찮았던 거 같습니다.

skin.html 부분은 두 군대이고 style.css 한 군데입니다.

skin.html

본문 영역
<main role="main" id="content" class="main">
<div class="container skeleton"><!-- site layout : container --> 
<div class="row"><!-- site layout : row -->
<article role="article" class="col-sm-9 skeleton-content hentry"><!-- site layout : article column -->
.
.
.
사이드바 영역
<aside role="complementary" class="col-sm-3 skeleton-aside"><!-- site layout : aside column -->
<s_sidebar>

style.css

.skeleton-content {
  min-height:1000px;
  border-right:1px solid #ccc;
}

<article role="article" class="col-sm-9 skeleton-content hentry">부분에 col-sm-push-3 추가.

<article role="article" class="col-sm-9 col-sm-push-3 skeleton-content hentry">

<aside role="complementary" class="col-sm-3 skeleton-aside">부분 col-sm-push-9추가.

<aside role="complementary" class="col-sm-3 col-sm-push-9 skeleton-aside"> 

이렇게 만 해주면 사이드바가 왼쪽으로 옮겨집니다.

.skeleton-content에 border-right:1px solid #ccc; 부분을 border-right를 border-left로 수정.
이 부분이 사이드바 영역이랑 본문 영역을 구별해주던 줄입니다.
border-right:1px solid #ccc; 삭제하면 줄이 없어집니다.

.skeleton-content {
  min-height:1000px;
  border-left:1px solid #ccc;
}

이렇게 수정하면 사이드바 오른쪽에서 왼쪽으로 이동했지만 스샷을 찍고 보니까;;
본문 영역, 사이드바 영역 위에 공유 버튼이랑 원래 검색창 바 있는 부분도 다 꺼져야 모양이 맞아들어갈 거 같네요.
공유 버튼 있는 부분은 설명 없이 바로 수정된 부분을 올릴게요.
방법은 같으니까.
이해하실듯합니다.

skin.html

<div class="container skeleton-mid-banner">
<div class="row">
<div class="col-sm-9 col-sm-push-3 mid-content">
	<div class="row col-nospace">
		<div class="col-sm-8 social-link">

style.css

.mid-content {
  min-height:50px;
  padding:20px 30px;
  line-height:2;
  border-left: 1px solid #ccc;
}

Plus

정리해보면

초반에 수정할때 사이드바 영역 전체랑 본문 영역 전체를 순서를 바꿔도 되지만...
이렇게 수정하니 모바일에서 본문이 밑으로 내려가더라고요 ;;
암튼 지금은 모바일에서 사이드 바를 안 보이게 해서 상관은 없지만 암튼 쉽게 쉽게 가자는 게 좋으니까요 ^^

혹시나 궁금하시면 방명록이나 댓글로 문의하세요 '';;