티스토리 square 스킨 사이드바 스크롤 본문과 따라가게 만드는 방법
- IT/블로그 팁
- 2019. 5. 24. 17:33
안녕하세요, 오늘은 티스토리 Square 스킨 사이드바 수정에 관한 내용입니다. 도움이 되는 포스팅 이길 희망합니다.
★_Square 스킨 본문과 사이드바 스크롤 따라가게 하는 방법
티스토리 Square 스킨은 walle 님이 제공하는 스킨으로 티스토리 스킨 대상을 받은 스킨입니다. 수정이 간단하고 자유도가 높아 많은 반응형 스킨 유저들의 사랑을 받고 있습니다. 오늘은 Square 스킨의 본문과 사이드바를 고정하는 방법에 대해서 포스팅 해보도록 하겠습니다. 이 방법은 본문에서 스크롤을 내릴 경우 본문 내용 뿐만 아니라 사이드바도 동시에 내려가게 함으로써 사이드바의 공간을 100% 활용할 수 있는 장점이 있습니다. 반면에 치명적인 단점은 모바일 상에서 메뉴토큰을 클릭하여 사이드바를 활성화 할때 사이드바만 스크롤 조정이 안된다는 약점이 있습니다. 그러므로 유입독자가 PC 인 블로거나, 사이드바의 내용이 많지 않은 블로거는 사이드바를 고정하는 것을 추천 드립니다. 반대로 모바일 독자 유입이 많은 블로거는 고정하지 않는 것을 추천 드립니다. 어디까지나 저의 의견 이므로 필요하신 분들은 참고만 해주시기 바랍니다. 그럼 지금부터 방법을 알아보도록 하겠습니다.
Square 스킨 css 수정하여 본문과 사이드바 스크롤 고정하기.
↑ 먼저 스킨 편집 부분에 들어가서 CSS를 클릭합니다. 이후 Ctrl+F를 이용하여 sidebar를 검색 합니다. 다음으로 수정할 부분을 확인 합니다. 위 사진의 파란색 점선 부분을 수정 할 것입니다. fixed 부분은 본문과 사이드바를 고정하는 부분이고 100%부분은 사이드바의 영역을 나타냅니다.
↑ 수정이 완료된 사진 입니다. fixed는 absolute로 변경 해주시고 100%는 블로거마다 다르게 설정 해주셔야 하는 부분 입니다. 저는 그냥 1000%로 지정 하였습니다. % 부분이 짧으면 사이드바의 내용이 짤립니다. 그 부분은 아래의 사진을 참고 해주시기 바랍니다.
↑ 100% 부분을 수정하지 않으면 1번으로 표시된 부분이 짤립니다. 그래서 그냥 1000%로 수정해두었던것 입니다.
↑ 사이드바가 짤린 사진도 첨부합니다. 이해에 도움이 되길 바랍니다. 지금까지 square 스킨의 사이드바와 본문 스크롤 고정하는 방법에 대한 내용 이였습니다. 도움이 되셨길 바랍니다.
<연관글>
포스팅 125 - 구글 애널리틱스 활용하여 티스토리 블로그 게시물 수익 분석 확인하는 방법
포스팅 120 - square 스킨 모바일 토글 버튼 수정하는 방법
+ 처음에 사이드바와 본문이 고정되어 함께 내려갈때 뭔가 소소하지만 기쁜 마음이었습니다. 광고를 더 달 수 있는 신대륙을 발견한 기분이였는데요. 모바일에서 확인하니 오류가 있었습니다. 모바일에서 메뉴토글버튼을 누르고 사이드바를 활성화 시 사이드바만 스크롤이 되지는 않았습니다. 이렇게 되면 블로그 방문자가 사이드바 내용을 확인 하려면 본문 스크롤을 한 후 사이드바를 다시 확인하게 되는 번거로움이 생겨 이탈자가 생길 위험이 있다고 생각하여 저는 고정하지는 않았습니다. 이용하실 때 참고가 되길 바랍니다. 그럼 지금까지 gapsoo 였습니다. 좋은 하루 되세요. 감사합니다.
