재작년쯤 티스토리에서 새로 출시한 poster, 이하 포스터 스킨을 적용한 지 벌써 2년 차가 되었습니다. 당시 SSL 적용에 따라 티스토리의 http주소가 https로 변경되고, 블로그에 유사문서 문제가 끊임없이 터지며, 블로그로 인한 스트레스를 많이 받았습니다.
이 블로그는 원래 패스트푸드 fastboot 스킨을 사용했었습니다. 당시 새로 나온 포스터 스킨이 예뻐서 적용해서 사용했으나 사용하다 보니 몇 가지 불편한 점이 있었습니다.
티스토리 poster 반응형 스킨 수정 따라 하기
입맛대로 아는 html css 지식을 구글링 해가며 스킨을 변경했으나 몇 가지 손대지 못했던 것들이 있었는데, 며칠 전 포스터 스킨 편집 우연히 구글링 중 메모님의 블로그를 발견했습니다.
구글링 하다가 발견한 글. 포스터 반응형 스킨 편집을 세세히 기록해 놓은 글이었습니다.
카테고리 영역 수정하기
똑같은 티스토리 포스터 스킨이었지만 분명 다른 인터페이스의 메모님의 블로그를 둘러보다가, 전에 내가 시도하다가 하지 못했던 부분을 수정해 놓은 부분이 있어 따라 해 보기로 했습니다.
가장 먼저 따라한 것은 본문 상하단, 카테고리 영역에 링크 걸기. 포스터 스킨은 다 좋은데, 해당 글을 보다가 같은 카테고리의 글을 보기 위해서는 목록의 카테고리를 다시 찾아서 들어가야 합니다.
수정 후
이제는 블로그에서 위 여행 이야기 17 하노이 카테고리 명을 클릭하면 카테고리의 모든 글을 볼 수 있도록 카테고리 모음 페이지로 이동합니다.
위로 가기 버튼 추가
두 번째는 생각지 못했던 기능이었습니다. back to top 버튼 추가. 말 그대로 상단으로 이동하는 버튼입니다. PC와 모바일 두 곳 모두에서 작동하도록 버튼을 추가할 수 있었습니다.
수정 후
우측은 back to top 즉 상단으로 이동 버튼이 추가된 모습. 좌측은 하단 관련 포스트의 카테고리 페이지로 이동할 수 있도록 포스터 스킨 html/css에 추가한 하이퍼링크입니다.
검색버튼 수정
포스터 스킨에서 가장 불편했던 것 중 하나가 검색 버튼이었습니다. 메뉴에 검색창을 추가할 수 있도록 html css를 수정했습니다.
좌측 상단에 검색창이 생겼습니다. 메모님의 경우 검은색 테마로 티스토리 포스터 스킨을 수정하셨지만 나는 내 블로그 색상에 알맞게 사이즈와 색상을 변경했습니다.
자동펼침 기능 수정하기
정말 마음에 들었던 수정 기능 중 하나는 css 수정으로, 웹 브라우저 가로폭이 넓을 때 카테고리 자동 펼침 기능입니다. 대부분 컴퓨터는 16:9 사이즈인 데다가, 포스터 스킨은 좌측과 우측의 여백이 많은 편인데, 카테고리를 펼치기 위해 매번 버튼을 눌러야 하는 게 불편했습니다.
메모님의 블로그에도 가로폭이 넓은 경우 카테고리 자동펼침 기능을 수정한 이력이 있었습니다. 더불어 유튜브 가로폭 조절도 수정했습니다. 이 블로그에는 유튜브 영상을 많이 올리는 편은 아니지만, 몇 개 포스팅에는 유튜브 영상이 있어서 유용했습니다.
웹브라우저 창을 작게 설정하면 이렇게 카테고리 창이 닫혀있지만, 창을 넓히면 이제는 자동으로 카테고리 리스트가 펼침 상태로 변하게 됩니다.
오랜만에 html css를 만지며, 티스토리 스킨을 사용하며 불편했던 점들을 개선하고 나니 전보다 더 블로그 스킨에 애착이 갑니다. 다시 한번 소중한 기록을 공유해 주신 메모님 감사합니다. 덕분에 포스터 스킨을 무탈히 수정할 수 있었습니다.