지난 스킨 적용하는 법의 게시글 이 후 이번에는 실제적으로 블로그의 형태를 이루는 데는 필요한 위젯 설정에 대해 정리해 본다. 위젯 설정을 통해 다른 곳으로 연결할 버튼의 역할을 하는 것과, 전체 레이아웃의 구성을 디자인을 할 수 있게 된다. 위젯 설정에서 투명 위젯과 내 나름대로의 이미지맵 설정하는 법을 정리해 봤다.

2. 위젯 설정하기

가) 레이아웃 위젯 설정 페이지

"관리 > 꾸미기설정 > 레이아웃 위젯 설정" 에서 작업을 한다. 여기에서 많은 작업을 해야 한다.

레이아웃 위젯설정 관리 페이지는 위와 같다.

나) 레이아웃 유형 설정하기
   1) 레이아웃 유형을 중앙 정열 형태로 선택해야 한다.  위의 빨간 테투리 박스 친 유형으로 선택해야 한다.

    2) 메뉴 사용에서 타이틀 선택 박스에 해제가 되어 있는 지 확인해야 한다. 타이틀은 사용하지 않는다.

다) 위젯 추가하기
    1) 내가 디자인한 스킨은 상단에 5개의 링크와 하단에 5개의 링크가 삽입된 디자인이다. 그래서 위젯을 위의 그림처럼 3단 구성으로 만들어야 한다.         

    2) 우측하단의 "위젯직접등록" 버튼으로 모두 15개의 위젯을 등록해야 한다. 
         내가 작업할 때는 편의상 작업명을 위젯상단1 ~ 5, 위젯중단1 ~ 5, 위젯하단1 ~ 5 로 만들고, 위의 그림처럼 메뉴형태 하단으로 위치를 이동시켜 자리를 배치하였다.

    3) 처음 위젯을 등록할 때는 레이아웃을 잡기 위해 위젯 사이즈를 입력해야 한다.
         스킨을 디자인을 할 때 미리 계획해서 디자인하였다면 바로 사이즈를 입력할 수 있겠으나, 그렇지 않았다면 수작업을 거쳐서 사이즈를 측정해야 한다.
         

다) 위젯 사이즈 설정하기
    1) "메뉴 형태(프롤로그, 블로그 등의 메뉴가 있는 곳)" 하단부터 위젯이 들어간다. 
         위젯의 가로 사이즈는 170픽셀로 고정되어 있다. 즉, 높이값만 조정해서 디자인한 스킨과 매칭을 시키면 된다.        

    2) 위 테이블 태그로 위젯의 사이즈를 조정하여 내가 적용한 스킨의 위젯 사이즈를 측정했더니
         상단 높이 : 100픽셀
         중단 높이 : 500픽셀
         하단 높이 :   80픽셀
         로 측정되었다. 위의 이미지가 해당 이미지이다. ( 인터넷 브라우저를 크롬을 사용하면 마우스로 긁으면 저런 적용된 위젯의 모습을 볼 수 있다)

라) 위젯 태그 입력하기
    1) 위젯중단 태그 입력 : 높이값 500 입력
        링크를 걸지 않고 여백으로 두는 곳이므로 위에서 언급했던 테이블 태그에서 높이값 500픽셀만 설정해서 5개의 위젯에 입력하면 된다.

    2) 위젯상단과 위젯하단 태그 입력 : 링크와 이미지맵의 작업이 필요
         위젯상단의 사이즈가 170 x 100 픽셀 / 위젯하단의 사이즈가 170 x 80 픽셀
         이 공간 전체에 링크를 적용하는 것이 아니고, 글자 부분에만 링크를 거는 작업을 할 경우 이미지맵을 사용해야 한다.

         먼저, 170 x 100 픽셀 / 170 x 80픽셀 사이즈의 배경이 투명한 이미지(PNG, GIF 파일)를 제작하고 블로그의 게시글에 비공개 포스팅으로 등록을 한다.
         등록한 포스트에서 마우스 오른버튼으로 해당 이미지의 "이미지 주소 복사"로 등록된 URL을 기록해야 한다.

블로그에 비공개로 이미지를 포스팅한다.

         위의 이미지 주소를 복사해 두었다면 위젯상단과 위젯하단의 태그는 아래와 같이 입력하면 된다.

       이미지맵에 대해서는 따로 설명하지 않고, 코드값을 설정하는 법에 대해 설명하고자 한다.
       왜 위젯을 3단 구성으로 했는 지에 대해 설명을 하지 않았는 데, 바로 이미지맵 설정을 쉽게 하기 위해서였다.
       고급형 블로그 위젯은 이미지맵을 복잡하게 사용해서 설정하는 데, 그럴 필요가 없어서 쉽게 설정하기 위해서였다.

      area shape="RECT" coords=" 0,50,170,100" 이미지맵 설정에서 이 부분만 이해하면 된다. 
      area shape="RECT"은 사각형으로 선택 영역을 만든다는 것이고,
      coords=" 0,50,170,100"는 선택 영역의 좌표값을 뜻한다. 이 부분은 위의 이미지를 참고하면 된다. 
      사각형 이미지의 좌측상단이 원점인 0,0 이고 우측하단이 마지막 좌표값으로 170,100이다.
      여기에서 내가 클릭 영역으로 사용하는 부분은 전체 부분이 아니고, 중앙 하단 부분을 클릭 영역으로 사용하므로 0,50이 시작점이 된다.
      즉 coords의 좌표값은 시작점 좌표 2자리와 마지막 좌표 2자리의 조합을 적는 것이다.
      이 좌표값을 고민없이 알아내기 위해 투명위젯 사이즈를 해당 사이즈에 맞췄다.

      위젯상단에서 메인로고 부분은 다른 위젯과는 다르게 클릭영역이 상단에 위치하므로 coords 값이 0,0,170,50 으로 설정하였다.

      위젯하단은 이미지맵을 사용하지 않고 설정이 가능하다. 왜냐하면 클릭영역이 전체 영역이기 때문이다. 이번 작업에서는 그냥 이미지맵을 사용해서 작업을 했다
      혹시 추후 변경사항이 발생할 지 몰라서…

      이상으로 위젯 설정이 끝났다.

3. 블로그 하단 푸터 설정
홈페이지 블로그의 하단에 회사 소개가 들어가는 것을 설정한다.

디자인을 982 x 100 픽셀로 제작을 미리 해둔다. 200kb 용량 이하로 제작해야 한다.

리모콘에서 전체박스 > 직접등록 > 하단영역 에 이미지 등록을 하면 추가가 된다.

4. 모바일 스킨 적용하기
아쉽게도 모바일 스킨은 홈페이지형으로 레이아웃을 만들 수 없다.

700 x 700픽셀에 2Mb 용량 이하로 PNG 파일 형식으로 제작하여 블로그 관리에서 설정하면 된다.

블로그 관리 > 기본정보 관리 > 블로그 정보 > 모바일앱 커버사진 에서 디자인한 스킨을 등록하면 된다.

이상 홈페이지형 블로그 만들기 방법을 정리해 보았다.

아휴… 정리하는 것이 더 힘드네…