본문 바로가기

티스토리 블로그 팁

티스토리 블로그 스킨 배경색 수정할때 쓰면 좋을 프로그램




블로그 스킨 수정하는데 꼬박 며칠이 걸리는지 모르겠다 오늘같은 경우는 하루 죙일 블로그수정만 ㅠㅠ 애써 수정 해놨더니 뭐 하나 잘못 건드려서 첨부터 다시 한것도 잇고 그래도 패스트부트 같은 경우는 수정하는 방법이 여러개가 있어서 유용하게 잘 했던것 같다

한것들을 첨부터 다시 정리하려니 엄두가 안나지만 몇가지들은 다시 수정할때 필요할 수 있으므로 정리 해봐야 할것 같다



그중에서 오늘은 블로그 스킨 색상 변경에 대해 말해볼까 한다 먼저, 블로그에 설정된 모든 색상을 변경할때는 색상표가 필수로 필요한데,

좀 더 다채로운 색상을 활용하기 위해선 조금 번거롭더라도 프로그램을 이용하는것을 추천한다



내가 사용한 프로그램은 Color Cop이라는 프로그램인데 


Colorcop.zip





프로그램을 받아 실행하면 뭐 대충 이런 화면이 나온다. RGB코드와 일반 #이 들어간 색상 코드 둘드 사용 가능하며

커스텀을 이용하면 좀 더 여러가지 색상을 선택할 수 있다. 무엇보다도 저 스포이드 모양을 누르면 컴퓨터 화면 어디에도 있는 색상을 추출해 낼수 있고 정확한 색상 추출을 위해 돋보기도 사용 가능해서 정말 추천하는 프로그램이다




일단 color cop을 실행하고 내가 원하는 블로그의 색상을 생각해야한다

보통 3가지 색상을 조합해야 하는데 내가 원하는 색상은 연한 푸른기 없는 회색이었으나 그럼 폰트 색깔이 대비가 되도록 전부 바꿔줘야 해서 머리가 아파서 결국 진한 색으로 선정해야했다. 패스트부트(fastboot)를 이용하는 분들은 기본 셋팅된 색깔 자체가 진한색 위주이므로 진한 색상은 진한색으로, 연한 색으로 셋팅되어 있는곳은 비슷한 연한 컬러로 적용해 주는것이 낫다. html코드나 css를 잘 알면 몰라도 잘 모르면 배경 컬러 뿐만 아니라 폰트컬러, 아이콘 컬러 하나하나 다 셋팅들어가야 하므로 복잡해지고 꽤나 머리가 아프다




진한곳은 진한색으로 색상만 변경하였다




그럼 간단하게 설명이 끝났으니 쭉쭉 적어나가볼까??

일반적인 드는 html로 수정했지만 색상은 거의 css로 수정해야 한다는 것을 추가로 기억하자


1. <html수정>패트부트의 시작화면(메인화면) 안보이게 만들기

아래 코드 사이의 var f_enableTedition = false;를 true로 수정



---------- T-Edition Enable

false: Use FastBoot Index (Default)

true: Use T-edition

-------------------------------

*/

var f_enableTedition = true;

</script>

<script>

/* FastBoot Index by Readiz */





2. <css 수정>화살표가 가르키는 부분 전체 배경색 변경하기

아래 코드 에서 빨간색부분을 변경한다 rgb코드도 되고 #코드도 괜찮음 제가 무슨색으로 변경했는지 아시겟죠? 하얀색으로 변경했답니다




FastBoot Overriding Start */

html,

body {

  background-color:rgb(255, 255, 255);

  overflow-x:hidden;

}




3. <css 수정> 게시물의 타이틀 색상과 글자 색상 변경 방법 각 설명을 참조하세요 글씨 색상이 연한색상이기 때문에 배경을 진한색으로 설정하는것이 쉬워요 





h3.title a {

  color: #fff;     <-글자색상 변경

}

h3.title {

  color: #fff;   <- 아이콘 색상 변경

  line-height:32px;

  font-size: 20px;

  font-weight: bold;

  border-radius:3px;

  padding-top: 3px;

  padding-bottom: 1.5px;

  padding-left: 10px;

  margin-bottom: 2px;

  margin-top: 5px;

  background: #654327;   <-타이틀 색상 변경

}




4. <css 수정>상단바 색상수정 아래 코드 빨간색으로 표시된 부분을 수정해 주세요



#taglog li .cloud1 {

  border-radius:4px;

  padding:4px;

  background-color:#3d2918;

  color:#fff;

  font-size:17px;

  font-weight:bold;

}

#taglog li .cloud2 {

  border-radius:4px;

  padding:4px;

  background-color:#3d2918;

  color:#fff;

  font-size:15px;

}





5. <css 수정>하단바 색상수정




#footer {

  color:#fff;

  min-height: 250px;

  padding-bottom:30px;

  padding-top:10px;

  background-color:#3d2918;

}




뭐 이정도 까지 했으면 대충 이미지가 많이 바꼈을꺼에요. 다른것 수정은 제가 많이 시도해보고 찾아봤는데 실패한게 많아서요, 정확한 정보를 알려드릴수 있을 때 까진 안적는게 좋을것 같네요....ㅠㅠ 저도 이제 알게된 새내기라 모르는게 많답니다. 근데 반말로 시작해서 존댓말로 끝나느게 함정..ㅋ 정말 포스팅 하다보면 이런적이 너무 많아요