본문 바로가기

블로그TIP

티스토리 반응형 스킨 추천, 스켈레톤 설정하기

기존의 티스토리 일반 스킨에서 반응형 스킨으로 바꾸고자 마음의 결정을 내렸다면, 기존 잘 쓰던 스킨의 백업은 잊지 않고 하셨겠죠? 지난번 포스팅한 (링크 : 티스토리 스킨 추천, 블로그를 반응형웹으로 바꾸는 스켈레톤 스킨) 을 하셨다면, 블로그는 반응형 웹 스킨으로 바뀌었을 껍니다. 다만, 바로 사용하는덴 약간의 커스터마이징이 필요합니다.



티스토리 모바일 스킨은 OFF로




티스토리 블로그를 반응형 웹 스킨으로 바꾼 이상, 더이상 모바일웹 스킨은 별도로 사용할 필요가 없습니다. 따라서 모바일웹 스킨 ON을 OFF로 바꿔주세요!



우측 사이드바를 간결하게 수정하기!


티스토리 반응형 웹 스킨은 사이드바 부분은 사이드바 설정에 따라 출력이 조절할 수 있습니다. 




Recent article와 Recent article(default) 두 종류의 최신 게시글이 있는데요, 하나는 마크업쿼리 블로그의 최신글입니다. 이를 제외하지 않으면 아래처럼 출력됩니다.



해더부분의 수정! 바로가기 메뉴와 헤더이미지


스켈레톤 스킨은 상단에 보면, 메뉴들이 있습니다. 바로가기 하는 메뉴인데요, 이건 HTML을 이용해서 수동으로 바꿔주셔야 합니다. 티스토리 HTML/CSS 메뉴에 가서, CTRL+F 로 'item'을 검색해봅시다. 약간의 HTML 지식이 필요한 부분인데, 원하는 형태로 수정하시기 바랍니다.


예를들면, 메뉴 상단에 나오는 Home 을, '홈' 또는 '내 블로그' 등으로 수정하면 된다는 이야기 입니다. 또한 submenu item 1을 또 다른 이름으로 바꿀 수 있고, 그 앞부분에 있는 a href 뒷부분에 주소 붙여넣기를 통해서 바로가기 링크를 만들 수 있습니다.


샘플예로, home, submenu item 1 부분은 임의로 수정가능합니다.


또, 티스토리 반응형 웹 상단에 마크업쿼리라는 이미지 배너가 나타나게 됩니다. 이 부분은 CTRL+F로 'header'를 찾으면 아래와 같이 나옵니다. 이떄 아래처럼 빨간 상자 부분을 삭제해주시면 본래 블로그의 제목과 소개글이 나오게 됩니다. 또는, 원하는 이미지를 업로드해서 링크 연결해주시면 별도 로고 사용도 가능합니다.





블로그도 반응형으로 스킨을 교체하면, 어느 화면에서나 최적화된 모습으로 블로그를 보여줄 수 있게 됩니다. 좀 더 디테일한 부분은 하나씩 수정해가면서 손을 봐야겠지만... 그리고 마지막으로 한번더 말씀드리자면, 이전 스킨은 반드시 저장하고 수정하는거 잊지 마세요. 꼭!