구글블로그 사용법: 템플릿 디자이너에 글제목(포스트 타이틀) 색상 선택상자 추가하는 방법
구글블로그의 글(포스트)색상을 꾸미는 방법은 2가지로 생각해 볼 수 있겠다.
하나는, 템플릿디자이너에서 색상을 지정/변경할 수 있도록 색상선택상자를 표시되게 하는 방법이고, 또 하나는 간단히 CSS코드를 추가하고 색상코드를 직접 입력하는 방법이다.
방법 1. 템플릿디자이너에 색상선택상자 보이기
구글 블로그의 편리한 도구인 템플릿 디자이너(Template Designer)에서 포스트 타이틀의 색상을 바로 지정할 수 있도록 색상선택 상자를 추가하려면 아래와 같이 두 가지 코드를 추가하면 된다.
코드를 추가하기 위하여 블로그 대시보드 > 템플릿(Template) > HTML편집(Edit HTML)을 눌러 HTML편집창을 연다.
1. 첫 번째 코드 추가하기
아래의 그림을 참조하여 코드를 복사하여 붙여 넣는다.
ㅇ 코드를 추가할 위치를 찾는 방법은 HTML 편집창에서 [컨트롤+F]키를 쳐서 검색창을 열고 Group description="Post Title 을 복사하여 붙여 넣고 엔터키를 치면 해당 코드가 있는 위치로 이동하여 노랑색으로 표시가 된다. 그 보다는 첫 번째 코드는 위 그림에서 보듯이 60행 전후에 있기 때문에 그냥 찾는게 더 쉬울 수도 있겠다.
ㅇ 위 그림과 같이, </Group>바로 위에 아래의 코드를 복사하여 붙여 넣는다.
2. 두 번째 코드 추가하기
아래의 그림을 참조하여 두 번째 코드를 복사하여 붙여 넣는다.
ㅇ코드의 위치를 찾는 방법은 위와 같이 검색창을 열고 h3.post-title, .comments h4 { 을 복사하여 붙여 넣고 엔터키를 치면 해당 코드가 있는 위치로 이동하여 노랑색으로 표시된다. 두 번째 코드는 위 그림에서 보듯이 312행 전후에 있으므로 스크롤바로 내려서 찾아도 그리 어렵지 않을 것이다.
ㅇ 위 그림과 같이 font:~ 바로 밑에 아래의 코드를 복사하여 붙여 넣는다.
이제 두 가지 코드를 모두 추가 하였으므로 HTML편집창의 맨 위에 있는 [Save Template] 버튼을 눌러 저장을 한다. 저장을 하는데 한 참(약 1분정도) 걸릴 때도 있다.
저장이 되고 난 후에
=> 블로그 대시보드 > 템플릿 > Customise > Advanced > Post Title로 가면 이 글의 맨 처음에 있는 그림에서와 같이 색상선택 상자가 추가되어 있을 것이다.
※ 블로그의 글제목(포스트 타이틀)은 스태틱 페이지에서는 링크가 걸리게 되므로 설정된 링크 색상으로 표시된다. 위에서 설정한 색상은 해당 글(포스트) 페이지로 들어 갔을 때 적용이 된다.
포스트 타이틀 색상을 링크 색상과 관계없이 늘 일정하게 하는 방법은 아래의 링크 페이지에 설명되어 있다.
구글블로그 사용법: 글제목(포스트 타이틀) 색상을 일정하게 유지하는 방법 >>
※ "저장이 되지 않았다"는 경고 메시지
위에서와 같이 HTML 코드를 추가하고 저장을 한 뒤에 HTML편집창에서 빠져 나오려 하면 "저장이 되지 않았다"는 경고 메시지가 뜨는 경우가 흔히 있다. 실제로 저장이 되지 않은 경우도 있지만 저장이 되었음에도 그런 메시지가 뜨는 경우가 있다.
어느 쪽인지 확인 하는 방법은 HTML편집창이 열려있는 브라우저 창은 닫지 말고 그대로 둔 채로, 새로운 브라우저 창을 열어서 편집내용이 적용이 되었는지를 보면 알 수 있다.
편집내용이 정상적으로 적용되어 작동을 한다면, 변경내용이 저장이 된 것이므로 경고 메시지를 무시하고 HTML편집창에서 빠져 나오면 된다.
※ 참고 : 위 그림에서 보인 코드들
첫 번째 코드 - 추가하기 전
첫 번째 코드 - 추가한 뒤
두 번째 코드 - 추가하기 전
두 번째 코드 - 추가한 뒤
방법 2. CSS 코드 추가하는 방법
위와 같이 하면, 템플릿디자이너에서 쉽고 빠르게 글제목의 색상을 바꿀 있다.
또 하나의 방법은 아래와 같은 CSS 코드를 추가하고, 직접 HTML 색상코드를 주어도 된다. (CSS코드를 추가하는 자세한 방법은 링크페이지 참조)
하나는, 템플릿디자이너에서 색상을 지정/변경할 수 있도록 색상선택상자를 표시되게 하는 방법이고, 또 하나는 간단히 CSS코드를 추가하고 색상코드를 직접 입력하는 방법이다.
방법 1. 템플릿디자이너에 색상선택상자 보이기
구글 블로그의 편리한 도구인 템플릿 디자이너(Template Designer)에서 포스트 타이틀의 색상을 바로 지정할 수 있도록 색상선택 상자를 추가하려면 아래와 같이 두 가지 코드를 추가하면 된다.
1. 첫 번째 코드 추가하기
아래의 그림을 참조하여 코드를 복사하여 붙여 넣는다.
ㅇ 위 그림과 같이, </Group>바로 위에 아래의 코드를 복사하여 붙여 넣는다.
<Variable name="Post.title.color" description="Color" type="color"
default="#333" variants="#333" value="#333"/>
default="#333" variants="#333" value="#333"/>
2. 두 번째 코드 추가하기
아래의 그림을 참조하여 두 번째 코드를 복사하여 붙여 넣는다.
ㅇ 위 그림과 같이 font:~ 바로 밑에 아래의 코드를 복사하여 붙여 넣는다.
color: $(Post.title.color);
이제 두 가지 코드를 모두 추가 하였으므로 HTML편집창의 맨 위에 있는 [Save Template] 버튼을 눌러 저장을 한다. 저장을 하는데 한 참(약 1분정도) 걸릴 때도 있다.
저장이 되고 난 후에
=> 블로그 대시보드 > 템플릿 > Customise > Advanced > Post Title로 가면 이 글의 맨 처음에 있는 그림에서와 같이 색상선택 상자가 추가되어 있을 것이다.
※ 블로그의 글제목(포스트 타이틀)은 스태틱 페이지에서는 링크가 걸리게 되므로 설정된 링크 색상으로 표시된다. 위에서 설정한 색상은 해당 글(포스트) 페이지로 들어 갔을 때 적용이 된다.
포스트 타이틀 색상을 링크 색상과 관계없이 늘 일정하게 하는 방법은 아래의 링크 페이지에 설명되어 있다.
구글블로그 사용법: 글제목(포스트 타이틀) 색상을 일정하게 유지하는 방법 >>
※ "저장이 되지 않았다"는 경고 메시지
위에서와 같이 HTML 코드를 추가하고 저장을 한 뒤에 HTML편집창에서 빠져 나오려 하면 "저장이 되지 않았다"는 경고 메시지가 뜨는 경우가 흔히 있다. 실제로 저장이 되지 않은 경우도 있지만 저장이 되었음에도 그런 메시지가 뜨는 경우가 있다.
어느 쪽인지 확인 하는 방법은 HTML편집창이 열려있는 브라우저 창은 닫지 말고 그대로 둔 채로, 새로운 브라우저 창을 열어서 편집내용이 적용이 되었는지를 보면 알 수 있다.
편집내용이 정상적으로 적용되어 작동을 한다면, 변경내용이 저장이 된 것이므로 경고 메시지를 무시하고 HTML편집창에서 빠져 나오면 된다.
※ 참고 : 위 그림에서 보인 코드들
첫 번째 코드 - 추가하기 전
<Group description="Post Title" selector="h3.post-title, .comments h4">
<Variable name="post.title.font" description="Font" type="font"
default="normal normal 22px Arial, Tahoma, Helvetica, FreeSans, sans-serif" value="normal bold 30px 'Times New Roman', Times, FreeSerif, serif"/>
</Group>
<Variable name="post.title.font" description="Font" type="font"
default="normal normal 22px Arial, Tahoma, Helvetica, FreeSans, sans-serif" value="normal bold 30px 'Times New Roman', Times, FreeSerif, serif"/>
</Group>
첫 번째 코드 - 추가한 뒤
<Group description="Post Title" selector="h3.post-title, .comments h4">
<Variable name="post.title.font" description="Font" type="font"
default="normal normal 22px Arial, Tahoma, Helvetica, FreeSans, sans-serif" value="normal bold 30px 'Times New Roman', Times, FreeSerif, serif"/>
<Variable name="Post.title.color" description="Color" type="color"
default="#333" variants="#333" value="#333"/>
</Group>
<Variable name="post.title.font" description="Font" type="font"
default="normal normal 22px Arial, Tahoma, Helvetica, FreeSans, sans-serif" value="normal bold 30px 'Times New Roman', Times, FreeSerif, serif"/>
<Variable name="Post.title.color" description="Color" type="color"
default="#333" variants="#333" value="#333"/>
</Group>
두 번째 코드 - 추가하기 전
h3.post-title, .comments h4 {
font: $(post.title.font);
margin: .75em 0 0;
}
font: $(post.title.font);
margin: .75em 0 0;
}
두 번째 코드 - 추가한 뒤
h3.post-title, .comments h4 {
font: $(post.title.font);
color: $(Post.title.color);
margin: .75em 0 0;
}
font: $(post.title.font);
color: $(Post.title.color);
margin: .75em 0 0;
}
방법 2. CSS 코드 추가하는 방법
위와 같이 하면, 템플릿디자이너에서 쉽고 빠르게 글제목의 색상을 바꿀 있다.
또 하나의 방법은 아래와 같은 CSS 코드를 추가하고, 직접 HTML 색상코드를 주어도 된다. (CSS코드를 추가하는 자세한 방법은 링크페이지 참조)
h3.post-title {color: #008800; }