티스토리 블로그 본문과 사이드바 배경색상바꾸기

티스토리 블로그에서 본문과 사이드바의 배경색을 바꾸면서 자료를 정리하여 올려드립니다.

티스토리에서 공식적으로 배포한 스킨에만 적용 된 스킨위자드로 블로그 배경 색상를 쉽게 바꾸기도 하지만 블로그를 꾸미다 보면 스킨위자드와 수작업과 블로그 꾸미기는 연동이 어렵기 때문에 블로그 본문과 사이드바에 배경색을 바꾸는 방법을 알아 놓으면 편리합니다.

skin.html에서 style.css부분에서 블로그 본문과 사이드바 배경색을 바꾸는 방법을 알고 적용하여 나타나는 것을 보면 무엇인가 만들어 가는 성취감을 느끼는 것도 있습니다. skin.html 소스를 바꾸고 적용하면서 반드시 미리보기를 습관화 하여 블로그 꾸미기에서 잘못 되었을 때 다시 바꾸기 위함입니다.

오늘은 블로그를 바꾸면서 3가지를 알아봅니다.

1.  티스토리 블로그 본문 배경색상 바꾸기

style.css부분에서 post-body 를 찾아 #f9f9f9와 같은 자신이 원하는 색상코드를 바꾸어 주면 본문의 바탕색이 바꾸어 집니다. 저의 블로그는 스킨위자드와 수작업으로 블로그 꾸미기는 연동이 어려워 수동으로 스킨을 꾸미다 보니 하나하나 알아가는 일에 성취감을 느끼기도 합니다. 

 style.css의 post-body에서 배경색상을 바꿉니다.

.article {
  margin: 36px 0 0 0; overflow:hidden;
  /*@post-body-color=color: #f9f9f9;*/color: #000000;/*@*/
  /*@post-body-font-family=font-family:;*/font-family: inherit;/*@*/
  font-size: /*@post-body-font-size=*/inherit/*@*/;

 

본문과 사이드바 색상을 같게 하거나 사이드바를 다른 색상으로 바꾸기도 합니다. 이때 본문 색상이 이미 정해져 있는 상태에서 사이드바는 원하는 색상으로 바꾸어 지지 않은 것을 알게 었답니다. 왜냐하면 이미 본문의 색상에 사이드바 색상이 더하여져 보여지기 때문에 원하는 색상으로 바꾸지 않은 것을 봅니다.

사이드바 색상과 문문의 색상을 일치 시키려면 사이드바 색상코드는 #000000로 만들면 사이드바 색상은 본문과 같은 배경색상으로 일치되어 보이게 됩니다.  

 

2. 티스토리 블로그 사이드바 배경색상바꾸기

style.css부분에서 sidebar 를 찾아 아래 #ffffff와 같은 자신이 원하는 색상코드를 바꾸어 주면됩니다.

style.css의 sidebar에서 배경색상을 바꿉니다.

#sidebar { float:left; width: 330px; padding: 14px; background-color: #ffffff; }
#footer { clear:both; padding:20px 0 0 0; }

 

본문 색상이 이미 정해져 있는 상태에서 사이드바는 원하는 색상으로 바꾸어 지지 않은 것을 알게 었는데 실험을 하기위해 사이드바 색상을 바꾸어 본 저의 블로그 사이드바 배경색상입니다.  

 

3. 티스토리 블로그 타이틀 높이조절하여 바꾸기

마지막으로 스킨제작으로 블로그를 꾸미다 보면 블로그 타이틀 높이를 조절하여 주는 곳을 알아봅니다. 역시 style.css부분에서 header을 찾아 아래 title-height에서 자신이 원하는 블로그 타이틀 높이를 조절하여 스킨에 적용합니다.

블로그타이틀 높이 사이즈 조절은 빈번하게 바꾸는 것이 아니기 때문에 제가 사용하면서 편리하게 찾고자 하거나 혹 자료가 필요한 분에게 저의 블로그에서 검색으로 찾을 수 있게 태그를 단어로 만들어 놓습니다. 블로그를 만드는 과정에서 반드시 알아야 하는 블로그 꾸미기에 관한 일들은 저의 블로그에서 검색으로 찾을 수 있습니다.  

 

 

티스토리 블로그는 디자인을 적용하면 한 번 작성된 HTML은 처음부터 수정하지 않아도 CSS 수정만으로도 새로운 디자인이 가능하다는 것을 알게 됩니다. 저의 블로그는 처음보다 많이 바꾸었지만 새로운 스킨으로 전체를 바꾸지 않습니다.

좌측의 드롭다운 메뉴도 다양하게 적용하는 것은 어느정도 skin.html에서 style.css부분을 자유롭게 하다보니 원하는 곳에 알맞는 사이즈로 드롭다운메뉴를 적용시켜 보이게 하기도 합니다. 배우는 것은 끝이 없는 것 같습니다.

색상코드를 만들어 가져오는 곳 저의 글 바로가기

 트윗 위젯만들고 색상코드 쉽게 얻을 수 있는 곳