지금 현재 사용중인 블로그의 스킨은 티스토리에서 제공하는 1단형 스킨인 #1 을 수정한 것이다. 개인적으로 #1 스킨은 반응형 화면에 적합한 최고의 스킨이라고 생각한다. 처음 보여지는 화면만 보고 별로라고 할수도 있지만 구조적으로도 대단히 마음에 든다. 일부 나에게 맞춰 수정해야 하는 부분들이 있긴 하지만 ..


1헤드바 제거


#1 스킨은 관리자 메뉴, 카테고리, 검색 등 주요 메뉴가 헤드바 형태로 맨 위 상단의 공간을 차지하고 있다.

현재 이 블로그에서는 디자인이나 효과를 새로 적용하긴 했지만 기존 스킨과 마찬가지로 헤드바 안에 각 기능들을 변경해 거의 비슷하게 유지하고 있었다.

헤드바의 배경이 투명 상태여서 존재 여부를 알긴 어렵긴 하지만 상단의 일정 부분은 헤드바로 인해 클릭이 되지 않았다.

헤드바 형태가 반드시 필요한 것은 아닌것 같아서 여러 구성요소들을 포함하고 있는 헤드바를 삭제했다. 헤드바를 삭제하고 관련 CSS 를 삭제하니 당연한 일이지만 위치가 모두 뒤죽박죽이 되었다. 상단의 메뉴들은 모두 화면에 고정되는 형태여서 새로 위치 잡는건 다행히 간단하게 해결했다.



2메뉴 버튼 변경


가운데 3줄 모양의 햄버거 버튼도 메뉴 버튼임을 알기 쉽게 하기 위해 2줄 형태에 MENU 란 문구를 추가했다. 최근 웹사이트들에서는 메뉴 버튼이 이제는 기본 구성요소가 되었고 단순한 3줄이 아닌 다양한 형태의 메뉴 버튼들을 사용하고 있다. 메뉴 버튼은 이제 웹사이트의 꽃이다. ㅎㅎ



3홈과 방명록 버튼 추가


방명록 버튼이 메뉴 안에 들어가 있어 찾기 어려운듯 해서 화면의 왼편 아래에 추가했다. 단순해 보이지만 나름 고민도 하고 신경 많이 썼다. 방명록 찾는 사람이 없을지도 모르는데 나 혼자 오버한다.;;


4첫화면 이미지 그리드 모바일 화면 변경


블로그의 첫페이지는 현재 맨소니를 이용한 이미지 그리드 방식으로 최근글의 목록을 보여주고 있다. PC 화면에서는 3개의 열로 9개가 나타나고 태블릿과 모바일 화면에서는 1열로 9개가 주루룩 나타나는 형태였다.

이번에 태블릿 화면에서는 2열로 보이도록 화면 구성을 추가했다. 휴대폰 화면에서는 기존과 마찬가지로 1열 화면 구성이다.

이제 어느 기기의 화면에서도 보기에 불편하지 않은 반응형 블로그이다. (완벽이란 말을 썼다가 지웠다. 내가 모르는 불편함이 있을 수 있으니..)


태블릿 화면 첫페이지



모바일 화면 첫페이지


5기타


이 외에도 타이틀 부분등 화면 구성들에서 크게 눈에 띄지 않는 부분들이긴 하지만 이곳은 끊임없이 조금씩 변하고 있다.


블로그의 스킨 꾸미기 방법이나 서식 만들기와 관련된 글은 더이상 작성하지 않는다. 그리고 스킨 만들기나 변경 사항을 기록하는 것은 개인적인 용도일 뿐이다. 여기저기 찾아보면서 시도해보기도 하고 실패하기도 하고 나 자신에게도 재미있는 시간들이었는데 아쉽게 생각한다.

신고
댓글
  • 프로필사진 티&라다 ^ ^ 가끔 오게 되는 블로그인데 ~
    틱 틱 소리나는게 깨 거슬리네여 ~ 마우스 이동시 ~ 맨위줄 9개 SONYLOVE MENU 맨아래 등 전체종료등
    새벽이라서 더욱 그런가 ~ 틱 틱 말구 맑은 소리가 좋을듯 하기에 몇자 적어보네요 아님 무음이 최고
    2017.10.14 01:11 신고
  • 프로필사진 SONYLOVE 좋은 말씀 감사합니다.
    고려해 보도록 하겠습니다.
    2017.10.14 01:51 신고
  • 프로필사진 묘한오빠 이곳에서 배우는 블로그팁, 정말 많았는데... 정말 더이상 블로그팁 포스팅은 하지 않으시나요? 많이 아쉽네요.
    2017.10.14 01:30 신고
  • 프로필사진 SONYLOVE 저도 더 안쓰려고 했는데 이 말 하자마자 하나 올렸네요;;; 2017.10.14 01:51 신고
  • 프로필사진 묘한오빠 저도 변덕이 죽끓어 지금은 하고싶을때 하고 싶은거 하고 살고 있습니다 ㅎㅎ
    SONYLOVE님 블로그는 저의 롤모델입니다 ㅋㅋ
    2017.10.14 16:03 신고
  • 프로필사진 SONYLOVE 에고 감사하긴 하지만.... 저 같이 막장으로 제멋대로 운영하는 블로그를 롤모델로 하시면 큰일이신데요;;;
    방문객 다 떨어져요.
    게다가 앞으로 점점 더 심해질지도 모르고요. ㅎㅎ
    2017.10.14 16:34 신고
  • 프로필사진 땀똔 저도 아쉽지만 충분히 공감이 됩니다.. ^^ 2017.10.14 17:26 신고
  • 프로필사진 SONYLOVE 더는 안쓰려고 했는데 자꾸 쓰게 되네요;;; 2017.10.14 18:33 신고
  • 프로필사진 liontamer 햄버거 메뉴가 무엇인가 궁금했는데 저거였군요 이름 귀여워요!!
    그리고 전 틱틱 소리 좋았는데.. 지금은 무음 폰으로 보고 있어 소리는 안나요 바꾸셨나용?
    2017.10.15 00:12 신고
  • 프로필사진 SONYLOVE 햄버거처럼 3단으로 쌓아놓은듯한 모양이라서 그렇게들 부르나봐요. ㅎㅎ

    그리고 소리 효과는 항상 제 로망이라는.. ㅎㅎ
    2017.10.15 03:22 신고
  • 프로필사진 liontamer 햄버거 메뉴란 귀여운 이름 때문인가.. 이제 소니러브님 블로그 들어와서 메뉴 버튼을 보면 자꾸 와퍼가 먹고파요 ㅠㅠㅠ 2017.10.15 22:19 신고
  • 프로필사진 SONYLOVE 먹는걸로 보이신다니 감사한대요. 보기 싫은게 아니라니.. ^_^; 2017.10.16 00:57 신고
  • 프로필사진 작은불빛 오..예뻐졌네요.
    저도 저렇게 꾸미고 싶어요 '~'
    2017.10.21 13:25 신고
  • 프로필사진 SONYLOVE 요즘엔 넓직넓직하고 여유가 있는 화면 구성이 좋아 보이더라고요.
    작은불빛님 스킨 제작은 잘 진행되어가고 계신가요? 궁금하네요. 어떤 모습일지.. ^_^
    2017.10.21 18:00 신고
  • 프로필사진 작은불빛 아...그거 외장하드가 죽어서 그대로 날아가버린 바람에 재구상중이에요.ㅠㅠ 이놈의 여름철 습기때문에 죽은 기기가 2개나 되다보니 좀 의욕이 영 없네요 2017.10.21 18:27 신고
  • 프로필사진 SONYLOVE 기대하고 있었는데 매우 안타깝네요.
    가슴 아프시겠어요.
    2017.10.21 20:41 신고
댓글쓰기 폼