본문 바로가기

블로그지침서

티스토리 스킨 '스퀘어 Square' 사이드바 디자인.

티스토리 블로그를 시작하는 사람들이라면 처음 스킨 선택에 있어서 고민이 많을 것이다. 스킨을 수정했더니 원래 글들이 네이버 검색에서 누락이 됐다는 둥 안 좋은 이야기들이 많이 들려서인지(믿거나 말거나) 나 또한 초반 스킨 선택에 있어서 신중했다. 그래서 많은 고민 끝에 선택한 스킨이 바로!




스퀘어(Square) 스킨. 2015년 공모전 대상을 수여한 스킨으로 반응형 디자인 + 깔끔함에 선택하게 되었다. 그런데 이 스킨 단점이 사이드바에 뭘 넣으려고 하면 본래의 깔끔함을 훼손해 보기 싫고 안 하자니 다른 블로그들 사이드바에 떡하니 있는 네이버 이웃커넥트나 애드센스가 부럽고... 정말 계륵 같은 존재의 스킨이었던 것이다. 그래서 본래 스킨 느낌을 최대한 살리면서 보기 좋게 이웃커넥트와 에드센스를 삽입해보자! 하고 과감히 HTML CSS를 수정해 보았다.



먼저 모바일 반응형 웹으로 보았을 때 메뉴 토글 위치가 아래에 있어서 잘 안보였다. 그래서 CSS 태그를 수정해 위로 올렸다. 그리고 글 상단에 오는 에드센스 광고는 텍스트 광고가 펼쳐질 시 회색 톤으로 나오게 단순형 디자인을 사용했다. 좀 튀는 색깔을 사용하면 효과가 높아지겠지만 클릭률이 줄더라도 전체적인 블로그 톤과 어우러졌으면 하는 바람이 있었다.


두 번째로 사이드바에 네이버 이웃커넥트를 넣었다. 이웃커넥트 베너 디자인 중 기본형을 하자니 세로 길이가 길기 때문에 메뉴가 아래로 내려가 보기 싫었다. 그래서 심플형 디자인을 삽입했다. 위치는 사이드바의 블로그 타이틀 아래 가운데로 잡았다. 하지만 중앙 정렬 태그를 삽입했는데도 불구하고 왼쪽 사진처럼 살짝 치우치는 게 아닌가... 위젯 자체 중심에 문제가 있는 듯해 보였다. 왼쪽 여백을 줬는데도 안 먹는다. 결국 가로 2칸짜리 투명 표를 만들고 왼쪽 칸에 오른쪽으로 이동할 만큼 가로 사이즈 픽셀을 지정, 오른쪽 칸에 위젯을 넣어 중앙으로 맞췄다. P.S. 저 초록색 버튼 자체 디자인을 정말 심각하게 수정하고 싶지만 네이버에서 제공하는 디자인이기 때문에 수정을 불가능하다. 버튼 링크를 다 따서 만들어 볼까도 했는데 역시나 불가능.



다음으로 구글 애드센스 광고를 사이드바에 한 개 정도 넣고 싶었다. 그런데 위치가 역시나 문제. 이웃추가 버튼 아래에 넣자니 또 메뉴가 아래로 밀리고 해서 왼쪽 맨 위에 있는 빈 공간에 넣어보기로 했다. 이 공간은 사이드바로 접근할 수 없는 공간이라  HTML 수정을 직접 해야 한다. HTML을 살펴보면 <div class="black"> 라고 있는데 이 부분이 왼쪽 위 빈 공감을 감싸고 있는 부분이다. 여기에 <center>태그, <br>태그를 쓰고 애드센스 234*60 하프베너 코드를 넣으면 저 위치에 딱 들어간다.



모바일로 메뉴 토글을 눌렀을 때도 문제없다. 광고가 텍스트로 나올 시 이웃추가 색상과 같은 그린 톤으로 맞춰봤는데 좀 더 고민해봐야겠다. 상하 여백 비율은 괜찮아 보인다.




마지막으로 사이드바 스크롤 느낌 조절. 뭔가 스퀘어 스킨은 스크롤 내리는 게 답답하다. scrollnerita: 0 코드를 삽입해 보았는데 2% 부족하다. 지우고 mouseWeel 코드를 사용해 조정해 보았는데 이제야 만족스럽다. 수치는 50으로 설정했다. 참고로 mouseWeel 코드는 메뉴의 개수에 따라 느낌이 달라질 수 있으니 본인 블로그 상황에 따라 조절해 주는 것이 좋다. 일단 이 정도로 수정해 보았는데 100%는 아니지만 이전보다 조금은 더 만족스러운 것 같다.



글 : 사진 / 독소

자세한 문의는 덧글 주세요