티스토리(TISTORY) 블로그 BASIC 스킨 수정하기
대대적인 스킨 수정에 앞서
지금 사용하고있는 저의 스킨에 대해 깔끔하다고 해주시는 분들이 많아
스킨 수정을 어떻게 했는지 정리를 해보고자 합니다.
-
둥근 테두리로 수정하기
-
메뉴바 색깔 변경하기
-
물결치는 블로그 제목 만들기
-
다음뷰 추천, 다음뷰 구독, 한RSS 구독 플로팅 버튼 달기
-
맨 아랫부분 Copyright 메뉴 글자색 변경하기
이것을 다 직접했나? 아니죠 많은 블로거님들 글을 보고 작업했습니다.
지금까지 사용하고 있는 스킨은 아래 그림과 같습니다.
솔직히 별볼일없는 스킨이예요.
심플해서 좋긴 한데 좀... 아마추어틱하다고 할까나?
그래도 나중에 어떻게 수정했는지 생각이 안날까봐 정리하는 것이니 참고하세요^^
둥근 테두리로 수정하기
Basic 스킨 테두리는 처음에 모서리가 뾰족하게 되어있어요.
처음에는 그런지 모르지만 배경색을 변경해보면 쉽게 알수있어요.
보기 싫은 테두리를 둥글게 변경하는 것는
티비의 세상구경 블로그에서 확인하세요. (참 정리를 잘하시는 듯)
http://nextgoal.tistory.com/631
메뉴바 색깔 변경하기
위에 그림 처럼 메뉴바 색은 블로그 제목 그림에 있는 장화 색깔을 추출해서
변경해보았습니다. (이건 직접 작업을 대견 대견^^)
images/wrap_menu.bottom.gif, wrap_menu_middle.gif, wrap_menu_top.gif
메뉴바 이미지 파일 3개를
수정해서 올리면 더 다양한 효과를 얻을 수는 있겠지만
굳이 메뉴바를 이미지로 처리할 필요가 있을까 싶어서
저는 그냥 단색으로 처리했어요.
(모서리가 둥근 메뉴바를 원하신다면 이미지 파일을 수정하셔야 합니다.)
제가 했던 방법을 설명드리겠습니다. 따라 하시면 되요.
티스토리 관리 페이지에 가서
HTML/CSS 편집을 선택합니다.
Ctrl + F 를 눌러 topWrapBlogMenu를 찾습니다.
찾았으면 style.css 파일을 아래와 같이 수정하면 끝! 참 쉽죠?
#header .blogMenu .topWrapBlogMenu {
background:#d95817 no-repeat; height:13px; }
#header .blogMenu .middleWrapBlogMenu {
background:#d95817 no-repeat left top; padding-left:36px;}
#header .blogMenu .bottomWrapBlogMenu {
background:#d95817 no-repeat; height:13px;}
색깔은 #d95817 부분을 원하시는 색상으로 변경하시면 되요.
물결치는 블로그 제목 만들기
이것과 관련된 글이 참 많은데요.
저는 패러홀릭님의 글을 참고했죠.
다음뷰 추천, 다음뷰 구독, 한RSS 구독 플로팅 버튼 달기
시작 첫페이지 말고 블로그 글을 선택하면 왼쪽에 3개의 버튼이 보입니다.
이것은 아래의 블로그를 보고 작업했어요.
아주 친절하게 설명하고 있으니 참고하시길...
오드리햇반님의 블로그
(요즘은 한RSS구독은 별로 중요하지 않아서 트위터, 페이스북 버튼으로 수정을 할까 생각중입니다.)
맨 아랫부분 Copyright 메뉴 글자색 변경하기
전체적으로 스킨을 깔맞춤하기 위해서
style.css파일에서 footer부분 색을 바꿔주시면 됩니다.
/* ***** footer ***** */
#footer { clear: both; text-align:center; padding:30px 10px 10px 10px; font:11px Verdana, dotum; color:#666;}
#footer .footMenu { padding-bottom: 8px; }
#footer .footMenu span { color: #b6b6b6; }
#footer a { color:#d95817;}
#footer .copyright, #footer .copyright a { font: 11px dotum; color: #d95817; }
이 어설픈 저의 스킨은 이런 방식으로 변경을 했습니다.
정리를 하고 나니 마음이 든든하네요. 히히
마지막으로 티스토리 스킨 변경할때 유용한 다른 글도 소개할께요.
티비의 세상구경 - 티스토리 BASIC 스킨 수정에 도움되는 몇가지 팁
(이미지 테두리없애기, 간격 조절 등등)
http://nextgoal.tistory.com/1068
패러홀릭 - 티스토리 스킨 수정
(스킨 구조를 파악하기가 정말 좋아요)
이번 기회로 많은 블로거님께 진심으로 감사를 드립니다.
그리고 스킨에 관련된 다른 좋은 글이 있으면 추천부탁드립니다.
저는 새로운 스킨 제작에 돌입하겠습니다. 응원해주세요^^
(포기할수도있음 ㅡㅡㅋ)
마지막 당부의 말씀
항상 현재 스킨을 저장(백업)하시고 수정하시길 바랍니다^^
