네이버 홈페이지형 블로그 만들기 2 메뉴 버튼과 투명 이미지 이해
- 블로그
- 2020. 2. 15. 12:00
홈페이지형 블로그 만들기 1편에서는
왜 투명 위젯이 필요한지를 알아보았습니다.
오늘은 나머지 부분을 마무리하겠습니다.
앞선 과정이 필요하시면 참고하세요.
캡처 화면과 블로그에 올렸던 이미지를 겹치고 메뉴를 만듭니다.
투명 위젯을 따냅니다.
메뉴 위치가 투명 위젯마다 똑같으면 하나만 하면 됩니다.
포토샵의 info 패널로 위치를 확인하는데 소수점이 나오면 이건 안되는데요...
패널 옵션에서 단위를 픽셀로 바꿀 수가 있습니다.
필요한 위치정보는 오른쪽 위와 왼쪽 아래만 있으면 됩니다.
그러면 크기기는 사각형이 되죠.
메뉴 위치가 투명 위젯마다 다르다면 일일이 따내서 위치를 확인해야 합니다.
메뉴가 만들어진 이미지를 다시 업로드하고 드래그해서 투명위쳇 위치를 확인해 보았습니다.
이미지 170*520 크기로 투명 이미지(png)를 5개 만듭니다.
여기서는 back1~5까지 만들었습니다.
앞선 투명 위젯은 단순히 메뉴들을 아래로 내리기 위한 이미지였다면
투명 이미지는 클릭했을 때 원하는 위치로 이동하는 액션을 담당하는 역활을 하게 됩니다.
이런 방법은 플래시로 메뉴 만들 때도 사용하죠.
투명 이미지 5개를 게시판에 올리고 발행합니다.
하나의 게시판에 5개를 다 올리는 것이 편하겠죠.
이미지를 올린 글은 삭제하면 안 됩니다.
투명 이미지 주소 5개 모두 복사해 둡니다.
내친김에 게시판 주소도 확인하고
투명 이미지와 대응하는 게시판 주소를 같이 정리하는 것이 좋습니다.
주소를 가져오는 위 화면은 크롬이며
익스플로러에서는 게시판 주소나 이미지 주소는 마우스 우클릭하면 속성에 있습니다.
준비된 게시판 주소와 투명 이미지 주소를 아래에 적힌 내용으로
앞선 투명 위젯을 만들 때 넣었던 곳에 넣을 겁니다.
따로 첨부된 파일을 받으셔도 되겠습니다.
이렇게 되죠.
앞서 투명 위젯을 만들었던 코드는 삭제하고 이 코드만 넣으면 됩니다.
홈페지용 블로그 소스.txt설정이 완료되었다면 블로그의 메뉴를 클릭해서 링크가 걸린 범위를 확인해봅니다.
블로그 홈페이지형에서 두 개의 투명 이미지에 걸쳐지는 메뉴가 있다면
투명 이미지 사이에 있는 부분은 링크가 걸리지 않는다는 단점은 있습니다.
투명 이미지마다 간격이 생겨서 그런 건데요.
이건 사용자 입장에서는 어쩔 수 없나 봅니다.
유료로 판매하는 포트폴리오에서도 드래그하면 투명 이미지가 보이고
투명 이미지 사이에서 클릭이 안 되는 건 제가 만든 것과 똑같더군요.
새로운 블로그를 만들면서 옛날 생각 하면서 만들어 보았는데
링크용 투명 이미지 하나에 두 개의 버튼은 들어가지 않아 많은 시도를 했는데도
결국 해결하지 못했습니다.
하나의 투명 이미지에 두 개의 메뉴(버튼)는 들어갈 수 없는지 조금 더 연구해 봐야겠고,
다음에는 다른 모양의 홈페이지형을 만들어 보겠습니다.
설명을 꼼꼼하게 하려고 캡처도 많이 했습니다만,
제가 쉽다고 생각되는 방법으로 작성하였습니다.
잘 안되는 부분은 알려주시면 설명하겠습니다.
'블로그' 카테고리의 다른 글
| 검색엔진 등록을 위한 사이트맵 만들고 등록하는 방법입니다 (0) | 2020.03.10 |
|---|---|
| 티스토리 블로그 유료스킨 JB FACTORY 게시판 가로폭 수정하는 방법 (0) | 2020.03.04 |
| 네이버 홈페이지형 블로그 만들기 1 투명 위젯 이해 (0) | 2020.02.12 |
| 티스토리 블로그 유료스킨 적용하는 방법(외부스킨변경 방법) (0) | 2020.02.06 |
| 티스토리 블로그 테이블에 스크롤이 생겨요 (0) | 2020.02.01 |