티스토리 블로그: Poster 스킨에 로고 넣기

티스토리 블로그 꾸미기: Poster 스킨에 로고 넣는 방법

---

티스토리 블로그 Poster 스킨

티스토리 블로그에서 세련되고 멋진 스킨들을 무료로 제공하고 있다. 심지어 반응형으로 제작되어서 디바이스에 맞춰 디자인이 구성되고, 커버 디자인도 쉽게, 마음대로 바꿀 수가 있다. 

티스토리 블로그를 처음 만들 때, 어떤 스킨으로 예쁘게 꾸며볼까 고민을 많이하다가 나는 Poster 스킨을 선택했다. 여러커버 디자인 중에 슬라이더가 화면 전체를 꽉 채우는 스타일이 마음에 들었기 때문이다. 그런데 유일한(?) 단점이 블로그 이름이 나오는 화면 상단(헤더, header)에 '로고 이미지'를 넣을 수 없다는 것이다. 다른 스킨들은 사이즈에 맞춰서 로고 이미지를 업로드 하면 노출이 자동으로 되지만, Poster 스킨은 텍스트로만 블로그 이름을 보여준다는 점이 매우 아쉬웠다. 

다행히도 티스토리 블로그는 html 소스를 편집할 수 있기 때문에 해당 위치에 로고를 직접 넣기로 하였다.

---

liis 로고

나는 이미지 높이가 48px인 PNG 파일의 먼저를 준비했다. 왠만하면 배경이 투명한 PNG 파일로 로고를 준비하자.

 

 

 

<header id="header">
	<h1><a href="https://liis.tistory.com/"><img src="./images/logo_PNG_h48.png"></a></h1>
</header>

html 화면에서 우선 'header' 태그를 찾는다. 그리고 차례로 h1 > a 태그가 있는 곳이 바로 로고의 위치다. a 태그는 로고를 클릭하면 블로그 메인으로 이동하게 링크가 설정이 되어있기 때문에 a 태그는 건들지 않도록 주의해야한다. 그리고 a 태그 안에 위와 같이 img 태그를 추가하고 이미지 파일명만 수정하면 간단하게 로고 이미지를 추가할 수 있다.

---

CSS 편집: 헤더(header) 높이 수정

각자 넣은 로고 이미지의 크기에 따라 헤더 영역이 이상하게 보일 수도 있다. 나는 기존 Poster 스킨의 헤더의 영역보다 로고 이미지가 커서 양쪽에 있는 메뉴와 돋보기(검색) 아이콘과 높이가 맞지 않았다. 그래서 CSS 부분도 수정을 해야했다. 나와 같은 문제점이 나타났다면 아래 내용도 확인하시라.

#header .mobile-menu {
	position: absolute;
	top: 32px; /*여기를 수정하세요*/
	left: 33px;
	z-index: 500;
	width: 40px;
	height: 40px;
	outline: none;
}

#header .search {
	position: absolute;
	top: 22px; /*여기를 수정하세요*/
	right: 19px;
	width: 0;
	padding-right: 40px;
}

관리자 페이지에서 CSS 편집하는 화면에서 위 소스를 검색(ctrl+F)해서 찾아본다. '.mobile-menu'와 '.search'는 각각 헤더 더 양쪽에 있는 메뉴와 돋보기 모양의 아이콘이다. 여기서 'top'에 있는 숫자를 조정하면서 높이를 맞춰주면 된다. 나는 각각 32, 22px로 변경해서 지금과 같은 블로그 헤더를 완성하였다.↓

 

 

 

티스토리 블로그 Poster 스킨에 로고 이미지 적용 결과 :)

모바일도 동일하게 적용된다^^

---

by. liis (Life is like this)