블로그 모바일 화면 수정 - 메뉴 버튼 내의 아이콘 & 검색결과 @ 떠다니는 SNS 공유 버튼

2016. 12. 25. 19:44

이곳에 오신 모든 분들 ~ 메리 크리스마스!!

크리스마스날에도 나는 스킨 수정을 하고 있다. -.-;

낮에 휴대폰으로 블로그를 잠시 보고 있노라니 스킨에 바꾸고 싶은 곳들이 몇군데 보인다. 지금처럼 그대로 사용해도 별 문제가 없는 부분이기는 하다. 수정하기에 그리 어려울꺼 같아 보이지 않는다. 천천히 하려다 쇠뿔도 단김에 빼라고.. 바로 실행에 옮겼다.

메뉴 버튼 내의 아이콘 변경

메뉴 버튼은 PC 보다는 모바일 환경의 방문객을 위한 부분이다. 이 메뉴 버튼의 오픈시 상단에는 PC 화면에서 왼쪽 사이드 메뉴의 아이콘들을 모바일 환경에서 볼 수 있도록 하였다. ^(사진1) 그런데 이 아이콘들이 앞으로 여러개로 늘어날 수도 있고 크기도 너무 작아서 실사용하기에는 불편해 보인다. 그래서 아이콘들의 사이즈를 크게 수정하고 여러 아이콘을 삽입하여 이용할 수 있도록 하고, 메뉴바의 크기를 벗어난 아이콘들을 가로 스크롤로 볼 수 있도록 리스트 정렬 방식으로 아이콘들을 수정했다. ^(사진2) 아이콘 부분에는 구독하기와 링크 추가 버튼을 전에 모두 삭제했었는데 이번에 다시 추가했다. 아예 없으니 혹시 찾는 사람이 있을수도 있을거 같고 (나만의 착각?) 어딘가에는 있는게 좋을꺼 같다.

아이콘의 마우스 오버 효과가 제대로 실행되도록 하느라 좀 애먹긴 했지만 원래 원하던 형태로 완성되었다. 하다 안되면 그냥 처음 상태로 복원하려고 했는데 다행이다.

사진1. 수정 전 사진2. 수정 후
카테고리 검색결과 화면 변경

사진3. 티스토리 모바일

모바일로 블로그를 보고 있으니 카테고리 검색결과의 화면이 제목만 보여 좀 부실해 보인다는 생각이 들었다. 다른 곳들은 어떤 모습일지 궁금해서 티스토리 홈페이지의 모바일 화면을 살펴보니 이 스킨과 비슷한 매거진 뷰 형태이기는 한데 약간의 차이가 있다. 가볍게 둘러 보기에도 티스토리쪽이 훨씬 좋아보인다. ^(사진3)

티스토리 홈페이지 모바일 페이지에서는 목록 표현시 제목과 내용, 이미지가 함께 표시된다. 그러나 이 스킨의 카테고리 검색결과는 모바일 스킨의 경우 이미지가 있을때와 없을때 다르게 보여진다. 이미지가 있을때는 제목과 이미지만 표시되고 이미지가 없을때는 제목과 내용이 함께 표시된다. ^(사진4) 제목과 이미지만 보이고 내용은 볼 수 없으니 아무래도 한번에 얻을 수 있는 정보가 적다. 그래서 이 스킨에서도 티스토리의 홈페이지와 같이 제목과 함께 내용도 볼 수 있는 형태로 수정하였다.^(사진5)

추가로 이미지 썸네일은 원래 4:3 비율로 보여주는 형태였으나, 그림의 크기도 크게 하고 글도 조금 더 많이 볼 수 있도록 PC 화면의 이미지 비율은 4:3을 유지하고 모바일 화면의 이미지만 1:1 비율로 변경했다.^(사진6)

사진4. 수정 전 사진5. 수정 후 사진6. 썸네일 크기 변경
사이드바 메뉴 아이콘 로고로 변경

사이드바의 상단에는 원래 메뉴바의 아이콘과 동일한 아이콘을 배치했었다. 그런데 이번에 메뉴바를 수정하면서 아이콘들이 다 뒤죽박죽이 되었다. 아이콘 폰트 크기를 크게 하면서 범위를 벗어나게 되어 어떻게 수정을 해도 이상하게 보인다. 아무것도 없이 빈 화면으로 두는것도 횅하니 이상해서 간단하게 로고와 메일 보내기 버튼을 배치하였다.^(사진7)

사진7. 사이드바 로고
SNS 공유 버튼 추가

이제까지 SNS 공유 버튼 없이 블로그를 운영했다. 왠지 글이 여기저기 퍼져나가는것이 꺼려지기도 했다. 근데 생각해보니 링크로 공유되는것인데 굳이 사용하지 않을 이유가 없을듯 해서 설치하기로 마음을 먹었다. 티스토리의 플러그인을 통해 간단히 추가하는 방법도 있지만 너무 개성이 없는 듯 해서 SNS 공유 버튼 만들기에 관련된 글들을 검색해서 찾아보다 코코소프트님의 블로그 의 티스토리 블로그 SNS 공유버튼 직접 달기라는 글을 보고 따라서 만들었다. ^(사진8) 전에 사용하던 오버효과들을 버튼에 이용해 내 방식대로 고치긴 했지만 뭔가 그럴싸하게 보인다. ㅎㅎ

사진. 8

카카오톡과 네이버, 카카오스토리, 페이스북, 트위터의 공유 링크 버튼을 설치했으나 카카오톡의 경우 PC 에서는 작동하지 않아 PC 화면에서는 보이지 않도록 설정했다. 그리고 카카오 스토리의 경우 하위 카테고리에서는 왠일인지 작동하지 않는다. -.-;

공유 버튼은 헝성 글 하단에 위치하고 있다는 고정관념이 있었는데 어느 블로그를 구경하다가 왼편 사이드에 고정하거나 블로그 오른편 하단에 고정해서 항상 보이도록 해놓은 곳들을 보았다. 어차피 설치한 김에 눈에 잘띄도록 항상 보이도록.. 오른편 하단에 고정되어 보이도록 했다. ^(사진9)

사진.9

화면에 뭔가 계속해서 떠있는게 많아 시선을 어지럽게 하는건 아닐까 걱정도 든다. 이 SNS 공유 버튼들이 제 역할을 잘해 주었으면 하는 바램이다.