티스토리 북클럽스킨 : 블로그 타이틀 변경하기(글씨체, 이미지)

북클럽스킨에서 블로그 상단 타이틀 바꾸기

안녕하세요, 오늘은 북클럽 스킨에서 블로그 타이틀을 변경하는 방법을 소개하고자 합니다. 북클럽 스킨에서 원하는 대로 블로그 화면을 구성하는 데에 도움이 되시길 바랍니다.

 

목 차
1. 원하는 글씨체로 변경
2. 원하는 문구로 변경
3. 원하는 이미지로 변경

 

티스토리 북클럽 스킨 : 블로그 타이틀 변경하기

---

1. 원하는 글씨체로 변경

밋밋한 티스토리 타이틀을 원하는 폰트로 변경해봅시다.

• 구글 웹폰트에서 URL 및 폰트명을 복사한 후 [스킨 편집] - [html 편집], [CSS]

  : 원하는 웹폰트를 찾아서 URL을 복사한 후 HTML 및 CSS에 넣습니다. (지난 포스팅 참고 : 티스토리 전체 폰트 순식간에 바꾸는 방법)

• [CSS 120행 근처]에서 #header h1을 찾아서 아래와 같이 font-family에 폰트명을 넣습니다.

#header h1 {
	padding: 23px 0 ;
	font-family: 'Jua', sans-serif;  /*변경을 원하는 폰트명 넣기*/
	font-weight: 200;   /*폰트 두께 변경*/
	font-size: 1.6em;   /*폰트 크기 변경*/
	line-height: 10px;  /*폰트 줄간격 변경*/
	letter-spacing: -0.2px;  /*폰트 자간 변경*/
	color: #333;    /*폰트 색 변경*/
}

  : 폰트 종류뿐만 아니라 글씨 두께, 크기, 줄 간격, 자간, 색상까지 수정할 수 있습니다.

 

 

2. 원하는 문구로 변경

이번에는 타이틀을 원하는 문구로 바꿔봅시다.

• [html 38행 근처]에서 잇플래닛을 찾아 삭제 후 원하는 문구를 넣습니다.

물론 [블로그 관리 홈] > [블로그] > [블로그 이름]에서 블로그 이름(title)을 수정해도 타이틀을 수정할 수 있습니다. 하지만 이는 블로그 전체 이름이 변경되는 것이라 사이트 검색에도 반영됩니다. 따라서 사이트 검색에 반영되지 않도록 하면서 길게 혹은 다르게 문구를 변경하고 싶은 경우에 이 방법으로 변경할 수 있습니다.

 

 

3. 원하는 이미지로 변경

이번에는 타이틀을 이미지로 변경해보겠습니다.

• 먼저 이미지를 서버에 탑재하기 위해 [CSS] 옆의 [파일 업로드] 탭에서 [추가] 클릭

이미지를 업로드 한 후 링크 주소 복사

• 이미지를 선택해 업로드를 하고, 업로드된 이미지의 이름에 마우스 우클릭 후 [링크 주소 복사] 클릭
• 복사한 URL을 아래와 같이 수정

복사한 내용 : //tistory3.daumcdn.net/tistory/4926308/skin/images/title_itplanet.png
수정 : <img src="//tistory3.daumcdn.net/tistory/4926308/skin/images/title_itplanet.png">

• [html 38행 근처]에서 잇플래닛을 찾아 삭제 후 <img src="~">를 붙여 넣기

  :  위에서 문구를 수정했던 같은 위치에 이미지 URL을 넣어주면 됩니다. 만약 이렇게 넣었더니 생각보다 이미지 크기가 작거나 너무 크다면, 이미지의 크기는 CSS에서 수정할 수 있습니다.

• [CSS 143행 근처]에서 #header h1 a, #header h1 img를 찾아서 height를 이미지의 높이에 맞춰 수정합니다.

이미지 크기는 해당 이미지 파일 속성에서 확인 가능

#header h1 a {
	display: inline-block;
	height: 50px;  /*이미지 세로 길이*/
	text-decoration: none;
	color: #333;
	vertical-align: top;
}
#header h1 img {
	width: auto;
	height: 50px;  /*이미지 세로 길이*/
}

그럼 최종적으로 블로그 상단의 타이틀이 지정한 이미지로 변경된 것을 확인할 수 있습니다.

 

 

마무리하기

저도 세 번째의 이미지로 변경하는 방법을 택하여 현재 티스토리에 적용 중입니다. 저는 타이틀을 잇 플래닛 한글, 영어를 모두 포함하도록 표현하고 싶었기 때문입니다. 블로그 이름을 바꿔버리기에는 "잇 플래닛 IT Planet"를 이름으로 사용하기에는 부적절한 느낌이 들었고, 상단에 타이틀(header)도 2가지 글씨 색으로 한글과 영어를 따로 표현하고 싶었습니다. 그래서 이미지를 만들어 넣는 방법을 적용하였습니다.

 

하지만 블로그 속도 최적화 측면에서는 아무래도 이미지나 폰트 교체는 불리한 면이 있습니다. 즉, 타이틀을 위해 새로운 웹폰트를 불러오거나 이미지를 로딩하는 것은 페이지의 속도를 지연시키기 때문입니다. 그럼에도 폰트를 교체하거나 이미지로 타이틀을 사용하고 싶다면, 웹폰트는 가급적 이미 사용 중인 웹폰트로, 이미지는 최대한 압축하여 업로드하는 것을 고려할 필요가 있을 것 같습니다.