티스토리 제목과 배경색 변경(html 칼라 색상표 포함)

 

 

티스토리 블로그 제목/배경색/글자 색상 변경하기(html 색상표 포함)

 

 

블로그 첫날 스킨을 다운 받은 후 상단 블로그 색상을 바꾸지 못해서, 이런저런 시도를 해 보다가

오늘 드디어, 티스토리  제목/글자 색상/배경 색상/마우스 오버할 때 색상 바꾸는 방법을 찾아내 바꾸었어요

 

아마 당분간 저의 글 주제는, <티스토리 스킨 변경사>가 될 것 같네요 :)

 

 

제가 제일 처음 다운받았던 스킨은 '텀블러코리아'에서 다운받은 스킨인데

이 스킨의 원 저작자는 criuce라는 분입니다.

본문 사이즈를 고려해서 저는 텀블로코리아 님의 스킨을 설치했습니다

 

 

 

BEFORE

처음 다운받은 스킨

 

 

 

 

 

 

 

AFTER

변경 후 스킨

 

 

티스토리 처음 시작하는 분들이 블로그 상단을 조정하실 때 참고하시라고

변경 방법을 적어 볼게요.

 

 

변경방법

 

Tistory 관리 화면 -> 꾸미기->html/css 편집 클릭

 

 

위 경로로 들어가면 오른쪽 위에 skin.html 영역

오른쪽 아래에 style.css 영역으로 구분이 됩니다

 

 

 

 

 

 

블로그 제목은 보통 skin.html 영역에 title 부분에 있어요.

title 이름은 스킨마다 모두 다릅니다.

 

 

ctrl+f 를 눌러서 아래 빨간색 글자로 표기된 부분을 찾아서 변경을 해주시는데요

 

 

skin.html 영역에서 변경할 부분

<li><a href="" title="Blueport"><span lass="home">Blueport</span></a></li>

 

 

Blueport → 변경 예: 고요한 책 한 권  (본인의 티스토리 제목 입력)

                          또는  이라고 변경.

 

 는 블로그 주소를 자동으로 나오게 하는 치환자이며,

 

 는, '관리자 > 환경설정 > 기본설정'에서 입력된 블로그 제목이 그대로 나옵니다.

 

 

style.css 영역에서 변경할 부분

#menuBox  { height:40px; margin:0px; padding:0px; background:url(images/menu_bg.gif); } #menu   { width:/*@post-width:320*/960px/*@*/; height:40px; margin:0 auto; padding:0px; font-size:11px; color:#f2f2f2; } .menuTable  { float:left; width:100%; line-height:normal; } .menuTable ul { margin:0; padding: 0 0 8px 0; list-style:none; } .menuTable li { display:inline; margin:0; padding:0; } .menuTable a { float:left; background:url("images/menu_bg.gif"); margin:0; padding:0 0 0 4; text-decoration:none; } .menuTable a span { float:left; height:13px; cursor:hand; overflow:none; display:block; background:url("images/menu_bg.gif"); padding:13px 15px 14px 15px; color:#FFF; } .menuTable .home { width:37px; } .menuTable .cover { width:28px; } .menuTable .media { width:47px; } .menuTable .location { width:60px; } .menuTable .tag { width:17px; } .menuTable .keywords { width:46px; } .menuTable .guestbook { width:51px; } .menuTable .admin { width:28px; } .menuTable .write { width:25px; } /* Commented Backslash Hack hides rule from IE5-Mac \*/ .menuTable a span { float:none; } /* End IE5-Mac hack */ .menuTable a:hover span { color:#FFF; } .menuTable a:hover { background-position:0% -40px; } .menuTable a:hover span { background-position:100% -40px; color:red }

 

 

background:url(images/menu_bg.gif) : 이미지를 연결시키는 태그인데요, 이미지 대신 배경색으로 바꾸려면

background:url(images/menu_bg.gif) 를 삭제하고 background-color 태그를 사용합니다.

→ 변경 예 : background-color : #8C8C8C

(원하는 색 code 번호를 찾아 입력함)

html 색상표(칼라코드)보기 : http://www.htmlcolorcode.org/

 

font-size :글꼴크기 color : 글자색깔

→변경 예 : #menu에서 : font-size:13px; color:#FFF;

→변경 예 : .menuTable a span에서  color:#FFF → 변경 예  color:#FFF (글자색 변경)

→변경 예 : .menuTable a:hover span 에서 color:red (마우스 오버했을 때 나오는 색깔 지정)

 

 

width : 너비 조절

→변경 예 : .menuTable .home { width:150px; }

(블로그 이름 글자수에 비례해서 가로폭을 변경합니다)

  

 

 

 

글자색 color 속성, 배경색 background-color 속성 배우기