네이버 블로그 홈페이지형으로 간단하게 바꾸기

 

홈페이지형 블로그란 PC에서 홈페이지처럼 보이게 스킨을 꾸미는 것을 말합니다. 이 글에서는 최대한 간단하게 홈페이지형으로 바꾸는 방법을 설명드리겠습니다.

 

목차

 

 

홈페이지형 블로그

 

홈페이지형 블로그는 PC에서만 보이기 때문에 꼭 하실 필요는 없습니다. 블로그를 꾸미는데 좀 더 도움이 되는 정도의 작업이지만 만들기는 까다롭습니다.

 

순서 요약

1. 이미지 준비 - 이미지가 2개 필요합니다.

• 스킨에 사용할 스킨 배경 이미지(1920 x 600)를 만듭니다. 
• 투명 위젯 이미지(170 x 600) 를 만듭니다. 

2. 레이아웃 설정 - 1단으로 설정, 투명위젯 5개 배치

3. 세부디자인 설정 - 타이틀 이미지를 등록합니다.

 

 

1. 이미지 준비

 

이제 실제로 작업이 시작됩니다.

 

1.1 스킨 배경 이미지 

자주쓰는 사이즈는 다음과 같습니다. 구현하고 싶은 카테고리 개수에 따라 높이가 달라질 수 있습니다.

• 가로 2,000px, 세로 700px
• 가로 1,920px, 세로 700px / 800px / 900px

높이가 너무 길면 스킨 배경 이미지만 보이기 때문에 저는 1920 x 600으로 준비했습니다. 테스트 해보실 분들을 위해 준비했습니다.

 

이미지를 만드실 분을 위해 팁을 드리면 미리캔버스에서 '프레젠테이션'을 검색하면 1920 x 1080 사이즈의 무료 이미지들이 많이 나옵니다.

 

1.2 투명 위젯 이미지 

• 가로 170px, 세로 600px

위에 타이틀 이미지 좌측에 버튼 이미지가 보이시죠? 그곳에 170 x 330 사이즈의 투명 이미지가 숨어있어요. 높이가 600이면 타이틀 이미지 밑으로 벗어납니다. 저는 타이틀 이미지 안에 넣기 위해 높이를 330으로 했습니다.

 

투명 위젯 이미지를 불러와야 하기 때문에 어딘가에 업로드되어 있고 링크 주소가 필요합니다. 투명위젯 이미지를 블로그 글에 삽입하고 비공개로 발행한 뒤 우클릭 후 이미지 주소를 복사해 메모장에 임시로 저장해주세요.

 

 

 

 

2. 레이아웃 설정

 

2.1 스킨 꾸미기 

1) 블로그 관리 - 꾸미기 설정 - 레이아웃/위젯 설정 에서 아래와 같은 1단 레이아웃을 선택합니다.

 

2.1 투명 위젯 설정

1) 위젯 사용 설정에서 제일 아래 [위젯 직접등록]을 선택합니다.

2) 위젯명을 정하고 아래의 위젯코드를 입력합니다.

<table><tbody><tr>
	<td>
		<img src="위젯이미지주소" usemap="#widget1~5" />
		<map name="widget1~5" id="widget1~5">
		<area shape="rect" coords="0,0,170,330" href="연결할카테고리주소" target="_top" />
		</map>
	</td>
</tr></tbody></table>

 

• '위젯이미지주소'는 1번에서 복사한 바로 그 이미지 주소입니다.
• usemap, map name, id는 1번부터 5번까지 차례대로 번호를 붙여 구분해 주세요.
• area href는 버튼을 눌렀을 때 아래 뜨게 만들고 싶은 카테고리 링크주소입니다. 카테고리 주소는 카테고리에 우클릭해서 [링크 주소 복사]를 선택하면 됩니다.

 

3) 투명위젯 5개를 다 만들면 타이틀 아래에 드래그합니다. 하얀 점선이 뜨면 드랍해서 위치를 정해주세요. 타이틀은 삭제해 버리셔도 됩니다. 스킨에 따라 타이틀 때문에 아래로 투명 위젯이 밀리기도 합니다.

 

 

3. 세부디자인 설정

세부디자인 설정으로 와서 메인 타이틀 이미지를 등록해야 합니다.

 

1) 세부디자인 설정으로 넘어갑니다.

2) 리모콘에서 [스킨배경] 메뉴를 클릭합니다. 

3) [디자인] - [직접등록] - [상단영역 / 파일 등록]을 눌러 위에서 만든 타이틀 이미지(1920x600)를 등록합니다.

 

---

 

자 이제 변경된 블로그 디자인을 보겠습니다. 저는 실제로 쓰는 이미지라서 위에서 샘플로 올린 이미지와는 다른 점 참고하시기 바랍니다.

 

 

 

관련포스트

네이버 블로그 로직에 따른 운영과 포스팅작성 방법

네이버 블로그 마켓 소개와 판매