❏ 홈페이지형 블로그 만들기 - 03. 여백과 위젯 설정하기
안녕하세요! 김코드입니다🙇♂
저번과 이어지는 홈페이지형 블로그 만들기 3번째 시간입니다!
여기까지 따라와 주신 여러분들이 대단합니다!
이제는 정말 막바지이니 조금만 더 힘내서 완성해 봅니다!
❏ 홈페이지형 블로그 만들기 - (2) 스킨제작과 적용법
안녕하세요! 김코드입니다 😆 오늘도 저번시간에는 홈페이지형 블로그 제작 전 기본적인 세팅에 대해서 알아보았는데요! ❏ 홈페이지형 블로그 만들기 - (1) 기본세팅 안녕하세요! 😆 또 오랜
y-seon97.tistory.com
☝ 이전 글 보러 가기! ☝
01. 여백영역 지정하기 ❗
이번에는 홈페이지형 블로그에서 디자인적 요소와 링크연결을
넣는 메뉴바를 만들 수 있는 여백영역을 만들어보겠습니다.
저번 시간에는 스킨과 기타 부가적인 요소들을 설정한 상태입니다.
글 상자들이 뒤에 있는 바로가기 위젯과 스킨을 가려
잘 보이지 않는 상태를 해결해 보겠습니다.
관리 > 꾸미기 설정 > 레이아웃 설정
레이아웃 설정 화면입니다.☺️
레이아웃 설정 화면 우측 메뉴바에서 제일 하단에 있는
+위젯직접등록버튼으로 추가해 보겠습니다.
그럼 이러한 창이 뜨게 됩니다
여기에 아래 코드를 붙여 넣기 한 후 다음 버튼을 눌러주세요!
<table width="170" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr><td width="170" height="600"></td></tr>
</tbody>
</table>
위젯명은 투명위젯 - n으로 숫자를 매겨주시면 더욱 편합니다!
다음 버튼을 눌렀더니 긴 투명 직사각형이 나타나는데요!
직사각형이 잘 나타나는지 확인 후 등록 버튼을 눌러주세요!
이를 반복해서 5개의 투명위젯을 만들어주세요!
😯 앗? 저는 정상적으로 출력되지 않아요...😯
만약 투명위젯이 정상적으로 출력되지 않는다면
빼먹은 대괄호나 따옴표가 있는지 꼭 확인해 주시길 바랍니다!
만든 투명위젯은 하단에 위치하고 있으니
드래그하여 글 영역 위로 올라올 수 있도록 이동시켜 주세요!
위젯을 상단으로 이동시킨 후 적용버튼을 누르면
이렇게 스킨이 정상적으로 보이는 것을 볼 수 있습니다! 👏
02. 스킨 좌표 추출하기 ❗
자 이번에는 바로가기 위젯을 연결해 보도록 하겠습니다
저번 시간에 꼭 핑크색 상자 안에 위젯이 있어야 한다고 말씀드렸는데요!
이렇게 블로그 화면에서 스킨 위에 마우스로 드래그를 해보면...
이렇게 레이아웃에 지정한
투명위젯들이 보이는 것을 확인할 수 있습니다!
이번에는 바로가기 위젯을 연결해 보겠습니다!
그전에 아래의 이미지 파일들을 저장해 주세요!
해당 이미지는 위젯을 연결할 때 꼭 필요한 준비물입니다!
저장한 이미지를 나만 보기 스킨폴더에 작성해 주세요!
그럼 이렇게 글 하나가 작성된 것을 볼 수 있습니다
작성한 투명위젯을 마우스로 드래그하여 찾아주세요!
그런 다음 우클릭하여 이미지 주소를 복사해 주세요!!!
복사한 주소는 꼭 메모장이나 스티커메모에 붙여 넣기 하여 저장해 주세요!
블로그 스킨으로 돌아와
지정하고 싶은 위젯을 드래그하여 찾아주세요!
그리고 해당 바로가기 위젯 영역을
이미지 파일로 저장해 주세요!
이제는 링크로 연결되는 바로가기 위젯을 설정하겠습니다!
아래의 링크를 통해 이미지맵 사이트로 이동해 주세요!
Free Online Image Map Generator
Easy free online html image map generator. Select an image, click to create your areas and generate html your output!
www.image-map.net
가운데 Select Image from My PC 버튼을 눌러
아까 저장한 위젯 사진을 불러와주세요!
그럼 이렇게 화면이 나타나게 됩니다
해당 사이트에서는 이미지 내 좌표값을 가져와 링크를
걸어주는 html코드를 생성해 주는 사이트입니다!
이미지 내 링크 삽입과 이미지맵이 궁금하시다면
아래의 링크를 참고하시는 것도 좋을 것 같습니다.
<map> - HTML: Hypertext Markup Language | MDN
HTML <map> 요소는 <area> 요소와 함께 이미지 맵(클릭 가능한 링크 영역)을 정의할 때 사용합니다.
developer.mozilla.org
하단의 네모칸은 위의 설명과 같습니다.
Link영역의 이동할 주소는 스킨에 작성한 카테고리겠지요??
블로그의 카테고리의 주소를 따는 방법은
마우스 우클릭 > 새 탭에서 링크열기를
통해서 카테고리의 주소를 얻을 수 있습니다!
그럼 상단의 주소 창애서 복붙을 통해
이동할 주소를 삽입해 주면 됩니다
이미지의 좌표값을 얻는 방법은
상단의 미리 보기 이미지에 시작점과 끝점을 클릭해 주시면
코드 내에 삽입이 됩니다.
그렇기에 예시로 작성해 본다면
<img src="투명위젯_주소" usemap="#image-map">
<map name="image-map">
<area target="_blank" alt="adobe" title="adobe" href="https://blog.naver.com/PostList.naver?blogId=shine-line&from=postList&categoryNo=12" coords="3,5,190,82" shape="rect">
<area target="_blank" alt="js" title="js" href="https://blog.naver.com/PostList.naver?blogId=shine-line&from=postList&categoryNo=10" coords="1,123,190,220" shape="rect">
<area target="_blank" alt="html, css" title="html, css" href="https://blog.naver.com/PostList.naver?blogId=shine-line&from=postList&categoryNo=11" coords="7,254,190,350" shape="rect">
<area target="_blank" alt="php" title="php" href="https://blog.naver.com/PostList.naver?blogId=shine-line&from=postList&categoryNo=8" coords="2,391,188,485" shape="rect">
<area target="_blank" alt="React" title="React" href="https://blog.naver.com/PostList.naver?blogId=shine-line&from=postList&categoryNo=8" coords="3,522,186,620" shape="rect">
</map>
이렇게 코드가 뜨는 것을 볼 수 있습니다!
여기서 img의 src부분에 전에 따로 작성해 둔
투명 위젯 링크주소를 넣으시면 됩니다!
03. 바로가기 위젯 연결하기 ❗
이번엔 얻은 좌표값으로 바로가기 위젯을 연결해 보겠습니다.
블로그 관리 > 꾸미기 설정 > 레이아웃 설정으로 이동해 주세요
현재 설정하는 디자인에서는
첫 번째 줄에서만 위젯을 연결해야 하기 때문에
투명위젯 1번을 수정하겠습니다!
위젯 수정창이 뜨게 됩니다.
기존의 위젯 코드 입력 창에 있던 위젯 코드는 삭제하시고
방금 전 저희가 따온 이미지좌표 코드를 붙여 넣기 해주시면 됩니다!
수정버튼 확인 후 하단의 적용버튼 클릭!
그러면 확인해 볼까요??
홈 화면으로 돌아와
위젯에 마우스를 올리면 하단에 링크가 나타납니다!!
클릭을 해보면
자연스럽게 해당 카테고리로 이동하는 것을 볼 수 있었습니다!!
어렵지 않은 방법으로 이렇게 홈페이지형 블로그를 만들어보았습니다!
간단하게 이미지 작업과 html에 대한 기초적인 지식만 있으시다면
쉽게 만들어볼 수 있으니 한번 만들어 보시길 바랍니다!!
혹시 어렵거나 궁금하신 사항이 있으시면
아래 댓글로 남겨주시면 시간 나는 대로 알려드리겠습니다! :)
2024년 새해 복 많이 받으세요!
읽어주셔서 감사합니다!
❏ 홈페이지형 블로그 만들기 - (1) 기본세팅
안녕하세요! 😆 또 오랜만의 포스팅입니다. 오늘은 html, css, js 등등 을 사용한 홈페이지가 아니라 약간의 html, 포토샵, 일러스트를 사용한 홈페이지형 블로그를 만드는 방법에 대해서 알아보겠
y-seon97.tistory.com
❏ 홈페이지형 블로그 만들기 - (2) 스킨제작과 적용법
안녕하세요! 김코드입니다 😆 오늘도 저번시간에는 홈페이지형 블로그 제작 전 기본적인 세팅에 대해서 알아보았는데요! ❏ 홈페이지형 블로그 만들기 - (1) 기본세팅 안녕하세요! 😆 또 오랜
y-seon97.tistory.com