티스토리 블로그 메뉴바에 SNS 아이콘 추가하기 : Skeleton 반응형웹(모바일 포함)
- 블로그 관련 정보
- 2013. 12. 15.
티스토리 블로그 메뉴바에 SNS 아이콘 추가하기 : Skeleton 반응형웹(모바일 포함)
티스토리 블로그 반응형 스킨인 Skeleton 에서는 티스토리 자체에서 제공하는 상단메뉴바를 사용하지 않고, 자체 HTML로 제작된 메뉴바를 사용합니다(티스토리 제공 상단 메뉴바는 메뉴바로서 심플한 기능을 제공해주지만 사용자가 마음껏 기능 디자인을 할 수 없는 것은 단점입니다). 이에따라 사용자 입맛에 맞도록 자유롭게 무언가를 추가하거나 삭제하고, 수정할 수 있다는 장점이 생기는데요. 많이들 사용하는 SNS 아이콘을 설치하여 블로그 방문자에게 자신의 SNS를 소개하고 링크하여 개인 브랜드화에 약간의 도움이 될 수 있도록 디자인해보겠습니다.
Note
반응형 웹을 사용하는 티스토리 스킨에서는 접속자의 화면 사이즈를 추측할 수 없습니다. 즉, 스킨의 사이즈가 가변적입니다. Skeleton 스킨에서는 모바일 사이즈 등 작은 사이즈의 화면에서 상단 메뉴바 중 HOME 링크외에 다른 메뉴들은 모두 드롭다운 버튼 속으로 숨겨집니다. 하지만 일반 독자가 이 드롭다운 버튼을 클릭할 확률은 낮아보입니다. 따라서 PC화면처럼 큰 화면에서는 상단 메뉴바에 SNS 아이콘을 노출하고, 모바일에서는 글이나 본문 하단 쯤에 SNS 아이콘을 넣는 방법을 사용해야 합니다. 한마디로, PC화면과 모바일 화면용 SNS 아이콘의 위치가 다릅니다. 결국 서로 다른 SNS 아이콘용 소스코드 2개가 삽입됩니다.
PC화면용 SNS 아이콘 추가하기
먼저 PC화면에서 SNS 아이콘의 위치입니다. 상단 메뉴바 우측에 위치해있습니다. 스킨에서 웹 페이지의 요소들은 모두 <body>태그 안에 위치합니다. 그리고 Skeleton 스킨의 메뉴바는 <header>안에 위치해 있습니다. ▼
티스토리 관리자 - HTML/CSS 수정에 들어가서 소스코드의 </header>를 검색하여 위치를 찾아냅니다. </header> 바로 위쪽에 다음의 소스코드를 넣습니다. 사용자 입맛에 맞게 여러개의 SNS 아이콘을 넣을 수 있으며, 경우에 따라서는 광고 배너나 검색창을 위치시켜도 좋을 것 같습니다.
이 소스코드 중 <ul class="nav navbar-nav navbar-right">가 바로 상단 메뉴바의 우측에 위치하기 해주는 클래스입니다. 아이콘의 순서는 차례대로 노출됩니다. 현재의 소스코드에서는 RSS, E-MAIL, twitter, facebook 순으로 나열됩니다. 순서를 바꾸고자 한다면 이 위치만 손보면 됩니다.
해당 소스코드에서는 CSS에서 클래스를 만들어 이미지를 추가해두었습니다. HTML에서 절대위치로 곧바로 이미지를 삽입해도 무방합니다만 모바일용 소스코드에서 다시 한번 똑같은 아이콘을 호출해야하기 때문에 CSS에 적용해두고 클래스 형태로 구성하였습니다.
위 소스코드를 넣은 다음, 아래의 코드를 CSS에 넣어줍니다. CSS에 넣는 소스코드의 위치는 관계없습니다.
CSS에서 이미지를 삽입해두었습니다. 해당 이미지의 크기는 32px로, 양방향에 적당한 여백을 주기 위해 margin 값도 입력되어 있습니다. 아이콘 이미지 같은 경우에는 HTML/CSS 수정에서 파일 업로드탭에서 업로드 해두면 됩니다.(파일명은 꼭 일치되어야 합니다.)
모바일용 SNS 아이콘 추가하기
이제 모바일용 SNS 아이콘 소스코드입니다. 처음 구상으로는 PC화면의 SNS 아이콘 코드를 모바일화면에서 다른 위치에 뿌려주는 방식을 좀 찾아봤으나, 상단메뉴바 자체가 움직여야되는 등 기술적으로 어려운 부분이 있어서 약간만 다른 대동소이한 소스코드를 모바일용에 맞게 다시 한번 삽입해야 합니다. 제가 원하는 위치는 본문 하단입니다. 티스토리의 본문에 해당 치환자를 찾아 바로 아래에 다음의 소스코드를 넣어주면 됩니다.
최종 소스코드는 다음과 같습니다.
모바일에서는 다음처럼 아이콘이 나오게 됩니다. ▼
