쉽고 빠른 홈페이지형 네이버 블로그 스킨 위젯 설정법 3 - 이미지맵 만들기

"본 포스팅은 제가 만든 캔바 템플릿에 대한 홍보 내용을 포함하고 있으며, 해당 템플릿 사용 시 저에게 소정의 수익이 발생함을 알려드립니다."

 

 

안녕하세요 :)
이 글은 저의 홈페이지형 네이버 블로그용 커스텀 스킨 디자인의 위젯을 설정하는 방법에 대해 안내해드리기 위한 포스트입니다.

쉽고 빠른 위젯설정 방법2에서는 블로그 설정 후 위젯을 설정하기 위한 이미지맵 만들기의 내용을 다루고 있어요.

이미 이 부분을 알고 계신 분들은 원하시는 내용으로 이동하셔서 참고하시면 좋을것 같습니다.

 

👉 쉽고 빠른 위젯설정 방법1 - 홈페이지형 블로그스킨ㅣ블로그 기본 설정하기

👉 쉽고 빠른 위젯설정 방법2 - 홈페이지형 블로그스킨ㅣ투명위젯기둥 설정하기

👉 쉽고 빠른 위젯설정 방법4 - 홈페이지형 블로그스킨ㅣ위젯코드 설정하기

 

쉽고 빠른 위젯설정 방법1에서는 블로그의 스킨 설정과 위젯코드를 넣을 수 있는 투명위젯기둥(뼈대) 만드는 과정까지 소개를 해 드렸었고, 쉽고 빠른 위젯설정 방법2에서는 투명위젯기둥을 블로그에 설정하여 스킨 공간을 확보하는 방법까지 알아보았어요.

회를 거둡할 수록 과정이 조금 더 복잡해지기는 하지만 늘 말씀드리듯, 조금 복잡할 뿐 어려운건 아니니 잘 따라와 주세요~

 

👉홈페이지형 블로그스킨 적용가능한 템플릿 바로가기

 

 

STEP 5. 디자인한 블로그스킨을 내 블로그에 설정하기

 

저번 포스트에서는 투명위젯기둥 10개를 만들었었어요.

저는 6개만 만들었지만 위젯이 들어갈 위치와 스킨 디자인에 따라 필요한 기둥갯수만큼 적용해주면 된답니다.

투명위젯기둥만 적용된 블로그는 당연히 아무것도 안 보이겠죠?

오른마우스로 드레그해서 보이는 투명위젯기둥들

 

이렇게 스킨을 넣어줄 빈 공간이 마련되었으니 나에게 맞춤 디자인한 홈페이지형 네이버 블로그 스킨을 설정해보도록 할께요.

홈페이지형 네이버 블로그 스킨을 설정하기 위해서는 네이버 블로그 내 메뉴 -> 관리 -> 세부디자인설정 -> 리모콘 설정창에서 직접등록을 클릭하면 파일을 등록할 수가 있어요.

상단 영역의 파일등록을 눌러 저장해 놓은 스킨을 업로드해주세요.

업로드하면 바로 스킨이 적용되것을 확인할 수 있답니다.

저장한 홈페이지형 네이버 블로그 스킨 파일이 등록과정

 

네이버 메뉴와 블로그 메뉴에서 원하는 색감을 선택하고 적용을 눌러주면

홈페이지형 블로그 스킨이 적용된 상태

 

짜랸~~ 이렇게 스킨이 예쁘게 변한것을 확인할 수 있답니다~~ 

자, 이제 부터 조금은 헷갈릴 수 있으니 집중해 주세요!!!!

 

 

STEP 6. 이미지맵 제작하기

이미지맵이란 이미지 위의 특정 좌표를 클릭할 수 있게 위젯의 위치를 설정하는 것이라 보면 되는데요, 어느위치에 클릭할 수 있는 버튼을 만들건지 그 자리를 정하는거예요.

 

직관적인 이미지맵 사이트 바로가기

Free Online Image Map Generator

 

홈페이지형 네이버 블로그스킨을 적용 하고 나서 스킨을 드래그 해보면 투명위젯기둥이 보인다고 했잖아요?

그 기둥 하나하나를 캡처도구를 이용해 캡처해 주세요.

저의 스킨은 총 15개의 위젯 기둥을 동록 하였어요.

 

저에게 필요한 위치의 위젯기둥 5개를 캡쳐했어요.

 

내가 사용할 위젯기둥이 있는곳을 캡쳐했다면 반드시 꼭 해줘야 하는 아주 중요한 과정이 있어요.

캡처한 이미지를 더블클릭하면 그림판에서 열릴건데요, 크기 조정 및 기울이기를 클릭하면 조정할 수 있는 창이 뜰거예요.

그 창에서 픽셀을 선택하면 픽셀크기의 숫자가 보이는데 이 부분이 가로 170으로 되어 있다면 조정할 필요가 없어요.

그렇지만 각 사용자의 모니터 해상도나 화면비율에 따라 투명위젯기둥을 애초에 170사이즈로 작업했음에도 챕처할땐 크기가 변하게 되고 그 상태로 이미지맵을 만들면 전혀 다른 위치에 좌표가 생겨버리게 된다는 사실.

캡처한 이미지의 크기가 170이 아니죠? 꼭 170사이즈로 변경해야 되요!!!

 

캡처한 모든 이미지들을 확인하여 사이즈 변경후 저장을 해줍니다.

 

이제 이미지맵 사이트를 열어  내 PC에서 이미지 선택 을 클릭하여 사이즈변경하여 저장한 이미지들을 하나 불러오세요.

위젯 넣을 곳이 한개 이상이라면  +Add New Area  버튼을 눌러 추가해주세요. 한개의 위치를 찍을때 마다 한개의 자리가 필요해요.

저는 3개가 필요해서 3개를 추가해주었어요.

위젯의 좌표코드

 

 Show Me The Code! 를 클릭하면 위젯을 찍어둔 위치의 좌표가 보이고 그 좌표를 더블클릭하면 숫자가 선택이 되요.

더블클릭하여 좌표가 잡히면 복사해서 위젯 코드에 넣어줄꺼예요.

위젯좌표 코드를 사용하기 위해 더블클릭 해줍니다.

 

다음 포스트는 쉽고 빠른 위젯설정 방법4 - 홈페이지형 블로그스킨 위젯코드 설정하기 에서 뵙도록 할께요.

 

**궁금한점이 있다면 DM으로 소통해주세요~