티스토리 스킨위자드로 제목이 바뀌지 않는 경우 변경 방법( h1, h1 a, h1 a:hover, h1 span 차이)

 

 

티스토리 스킨 제목이 바뀌는 않는 경우

 

html이나 css 언어를 안다면 스킨이 어떻든 간에 변경을 자주자재로 할 수 있을 텐데

어설프게만 알고 있으니, 스킨마다 블로그 제목과 배경색을 바꾸는 데 애를 먹네요...

그래서, 이 글은 공부한 것을 복습 용으로, 그리고 앞으로 저장 용으로 남기는 글이네요 ^ ^

 

아래 이미지는 티스토리 자체에서 제공하는 스킨이에요. 보통 스킨위저드에서 제목을 변경할 수 있는데

이 스킨 같은 경우는 변경이 안되었습니다...

 

변경 전 스킨 원본

 

제작자tistory(http://www.tistory.com)tistoryblog@hanmail.net

 

 

 

 

 

 

변경방법

 

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

 

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

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

 

 

 

 

 

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

 

<a href="  이곳에 티스토리 주소 입력해주세요  ">

<span> 이곳에 블로그 제목 입력해주세요 </span>

 

 

 

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

#header {  position:relative;  height:1%;  padding:/*@title-height:30=padding-top:*/80px/*@*/ 10px 27px 10px;  background:/*@title-background-color*//*@*/ /*@title-background-image*//*@*/ /*@title-background-image-position*//*@*/ /*@title-background-image-repeat*//*@*/;

 

 

 

위에 보면 header / header h1 / header h1 a / header h1 a:hover / heaser h1 span 으로 구분되는데요

각각 영역을 아래 그림에서 파란색으로 표시해 봤습니다

 

 

#header

: 화면 상단 제목과 메뉴가 들어간 전체

 

 

 

 

 

#header h1

:화면 상단에서, 글자가 들어가는 부분

(아래 이미지에서, 글자보다 파란색 영역이 더 큰 이유는 높이(height:49px) 지정이 들어가 있기 때문)

 

 

 

 

#header h1 a

: 화면 상단에서 링크가 들어가는 부분, 이 영역 밖에서는 링크 표시가 안 됨

 

 

 

#header h1 a :hover

(마우스를 이 영역 위에 올렸을 때만 나오는 영역)

 

 

#header  h1 span

: 글자 영역

 

 

 

배경색을 바꾸고 싶으면 background-color: 색 이름 을 넣으시면 되고요..

글자색을 바꾸고 싶으면 color: 색 이름 을 적습니다..

 

배경색은 검은색, 글자색은 흰색으로 바꿔보겠습니다

 

 

 

STEP 1. 우선 아래에서 회색으로 된 부분은 다 지웁니다

 

(또한, 회색 부부을 지우는 데에는, 제목이 이미지로 연결이 되어 있기 때문)

 

#header {
 position:relative;
 height:1%;
 padding:/*@title-height:30=padding-top:*/80px/*@*/ 10px 27px 10px;
 background:/*@title-background-color*//*@*/ /*@title-background-image*//*@*/ /*@title-background-image-position*//*@*/ /*@title-background-image-repeat*//*@*/;}

/* Header */
/* title */
#header h1 {font-family:/*@title-font-family*//*@*/;font-size:/*@title-font-size*//*@*/;color:/*@title-color*//*@*/;}
#header h1 a {display:block;width:306px;height:49px;background:url(images/title.png) left top no-repeat;cursor:pointer;}
* html #header h1 a {background-image: none;filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://i1.daumcdn.net/cfs.tistory/blog/skin/tis_simpleGrid/images/title.png', sizingMethod='crop');}
#header h1 a:hover { text-decoration:none;}
#header h1 span {display:none;}

 

 

그럼 이렇게 되지요

 

#header {
 position:relative;
 height:1%;
 padding:;
 background:;}

/* Header */
/* title */
#header h1 {;}
#header h1 a {display:block;width:306px;height:49px;}
#header h1 a:hover { text-decoration:none;}
#header h1 span {;}

 

 

 

STEP 2. 여기서 원하는 영역에 배경색과 글자색 지정.

 

#header 부분을 검은색, 글자를 흰색으로 할 경우

 

#header {
 position:relative;
 height:1%;
 padding:;
 background:black; }

/* Header */
/* title */
#header h1 {;}
#header h1 a {display:block;width:306px;height:49px;}
#header h1 a:hover { text-decoration:none;}
#header h1 span {color:white;}

 

#header h1 부분을 검은색, 글자를 흰색으로 할 경우

 

#header {
 position:relative;
 height:1%;
 padding:;
 }

/* Header */
/* title */
#header h1 { background-color:black;}
#header h1 a {display:block;width:306px;height:49px;}
#header h1 a:hover { text-decoration:none;}
#header h1 span {color:white;}

 

 

#header h1 a 부분을 검은색, 글자를 흰색으로 할 경우

 

#header {
 position:relative;
 height:1%;
 padding:;
 }

/* Header */
/* title */
#header h1 { background:black;}
#header h1 a {display:block;width:306px;height:49px; background-color:black;}
#header h1 a:hover { text-decoration:none;}
#header h1 span {color:white;}

 

 

#header h1 a:hover 부분을 검은색, 글자를 흰색으로 할 경우

 

#header {
 position:relative;
 height:1%;
 padding:;
 }

/* Header */
/* title */
#header h1 { background:black;}
#header h1 a {display:block;width:306px;height:49px; }
#header h1 a:hover { text-decoration:none;background-color:black;}
#header h1 span {color:white;}

 

 

#header h1 span 부분을 검은색, 글자를 흰색으로 할 경우

 

#header {
 position:relative;
 height:1%;
 padding:;
 }

/* Header */
/* title */
#header h1 { background:black;}
#header h1 a {display:block;width:306px;height:49px; }
#header h1 a:hover { text-decoration:none;}
#header h1 span {color:white; background-color:black;}  

 

 

 

 

[html 기초] 제목 태그 h1, h2, h3, h4, h5, h6

 

[html기초]  &nbsp;, br, pre, p 태그

 

[html/css기초] span, div