Project/블로그 테마 만들기 2

[티스토리 블로그 테마] - 2. 티스토리 본문에 목차 추가

오늘은 티스토리 블로그 글 상세 페이지에 목차를 추가해보자. 기본 제공 티스토리 테마는 보다시피 본문 목차가 없다. 구글링을 해보니 jQuery의 toc 라이브러리로 간단하게 목차를 생성하는 방법도 있었지만, 직접 자바스크립트로 페이지를 파싱해서 만들어 보기로 했다. 목차 레이아웃 구성 코드를 작성하기에 앞서, 목차 컨텐츠 및 레이아웃을 구성해 보자. 목차는 본문시작 지점 가운데에 위치하며, 사용자가 스크롤을 내려서 목차가 보이지 않는 경우에는 사용자 화면의 오른쪽 영역에 미니 목차가 표출되도록 구현할 것이다. 모바일 기기로 접속한 사용자의 경우에는 목차를 표출할 충분한 공간이 없으므로, 목차 열고 닫기 버튼을 우측에 대신 표출하기로 했다. 또한 티스토리 에디터에서는 제목 1, 2, 3과 본문 1, 2,..

[티스토리 블로그 테마] - 1. 코드 블록 디자인을 mac 코드 스타일로 바꾸기

글을 읽기 전 미리 보는 완성본은 다음과 같다. 어떻게 만들었고 적용했는지 궁금하신 분들은 아래로 스크롤! See the Pen tistory code block by MiJeong Kim (@sap03110) on CodePen. 발단 여느 날과 다름없이 회사 맥북으로 공부하면서 블로그 글을 작성하고 있는 도중, 갑자기 내 티스토리 블로그 코드 블록 디자인이 무척이나 거슬리기 시작했다. 구글링을 하다 보면 여러 기술 블로그들을 엿보게 되는데, 대부분의 블로거 분들이 기본 코드 블록을 사용하기 보다는 디자인을 커스텀해서 사용하고 있는 것이었다. 난 참고로 기본 블로그 테마를 사용한다. 그렇다. 디자인이 민둥하다. 그 중에서도 이쁘다고 느꼈던 코드 블록 디자인은 carbon이라는 코드 이미지화 사이트에서 ..