티스토리, SNS 공유하기 아이콘 최적화
자신의 티스토리 블로그를 만들고 나서 글을 한두 개 작성하다 보면, 블로그 디자인에 관심을 갖게 되고 적당한 스킨 (테마)을 찾아보고 적용하게 됩니다..
저는 이 과정에서 몇몇 블로그를 둘러보다기 "친효 스킨"이 마음에 들어서 검색해보니 스킨 제작자 (친절한 효자손)가 성함만큼 친절하게 이 스킨을 무료로 배포하고 있었고 정기적으로 업데이트를 하고 있어서 신뢰감이 가서 이 스킨을 사용하기로 결정했습니다. 이 훌륭한 스킨을 이용하고 있는 입장에서 이 자리를 빌어 감사를 드립니다.
일단 스킨을 적용하고 나면, 그 스킨에 약간의 품을 들여서 자신만의 것을 만들기 위한 Customizing 작업을 할 필요가 있습니다.
오늘의 그중의 한 가지에 관한 이야기입니다.
제 개인적인 생각이지만 친효스킨은 상당히 세심하게 만들어진 스킨입니다. 워드프레스와 같은 외국 CMS (Contents Management System)를 사용하다 보면 글로벌 SNS들의 공유 기능은 잘 되어 있지만 국내 토종 SNS는 지원하지 않는 경우가 많은데 친효스킨은 양 쪽을 모두 망라하고 있습니다.
페이스북, 트위트, 구글플러스, 카카오톡, 카카오스토리, 네이버블로그, 네이버밴드의 총 7가지의 SNS 공유 버턴을 지원하고 있습니다.
그런데, 이렇게 많은 SNS를 지원하다 보니 한 가지 문제가 있더군요.
PC로 볼 경우는 문제가 없는데 모바일로 보게 되면 가로 폭이 좁아서 아이콘이 모두 한 라인에 표시되지 않는다는 것입니다. 아래 그림처럼 보기가 조금 좋지가 않습니다.
그래서 이 중에서 제가 잘 사용하지 않은 구글플러스와 카카오스토리는 제거하기로 결정을 했습니다.
아래는 그 제거 방법입니다. 앞서 여러 포스팅에서 html 편집에 들어가는 방법을 설명하였으므로 이번 포스팅에서는 생략하도록 하겠습니다.
혹시 그 방법이 생소하신 분은 아래 포스팅을 참조하세요.
html 편집창에 들어가서 상기 "구글플러스"와 "카카오스토리" 공유 기능이 정의된 자바스크립트 함수 호출 부분을 찾아서 이 부분을 HTML 주석 코드로 Disable 시키면 됩니다.
상기 영역을 찾는 방법은 코드 첫 줄에 마우스 커져를 놓고 Ctrl+F를 눌러서 찾기 기능으로 들어가서 찾으면 됩니다.
이와 같은 방법을 적용한 후의 모바일에서의 화면입니다.
구글플러스와 카카오스토리가 제거되어 나머지 아이콘들이 나란히 배열되어 있는 것을 확인할 수 있습니다.
제가 바라던 모습입니다.
이상으로 친효스킨에서 SNS 공유버턴을 자신에 맞게 최적화하는 방법에 대해서 알야 보았습니다.
감사합니다.
이 글을 공유합시다
