스킨

개요 카테고리의 표시 형식은 티스토리의 형식이 아닌 Bootstrap의 리스트그룹으로 표시하고 있습니다. 최초 스킨 배포자의 경우, JavaScript를 사용하여 상위 레벨의 카테고리만 표시하도록 설정을 해 놓았습니다. 저의 경우는 서브 카테고리를 사용하기에 이 역시 화면에 함께 표시를 하고자 하였습니다. 따라서 해당 리스트그룹을 접었다 폈다 할 수 있는 형식으로 변경하였습니다. 완성된 모습은 다음과 같습니다. 수정사항 기존의 코드는 다음과 같습니다. // script.js var categories = []; // 전체 글 갯수 구하기 var totalNumberOfPosts = $("a.link_tit > span").text().match(/\(([^)]+)\)/)[1]; categories.pus..

개요 참고 : HTML Snippets for Twitter Boostrap framework : Bootsnipp.com 모바일 환경에서 편리하게 페이지 내에서 이동할 수 있도록, 오른쪽 하단에 back to top 버튼을 추가하였습니다. 화면이 아래로 스크롤되면 왼쪽 하단에 표시되며 누르면 스크롤되어 페이지 상단으로 이동하는 기능입니다. back to top 버튼 추가 작업은 티스토리의 스킨편집창에서 진행합니다. 단순한 기능이지만 조금더 멋스럽고 자연스럽게 화면을 스크롤해주고 툴팁이 사라지는 등의 애니메이션 기능이 필요하기 때문에 Jquery 라이브러리를 변경해주어야 합니다. html 항목을 선택한 후, 아래의 소스코드를 태그 아래에 추가하였습니다. Top 기존 수정들과 달리 html 뿐만 아니라 C..

개요 이번 포스트에서는 블로그의 접속 시 글의 제목과 본문이 표시되는 영역, 그리고 포스트 및 공지사항을 수정하도록 하겠습니다. 수정 대상 영역은 아래와 같습니다. Read more 버튼으로 교체하기 기초 템플릿은 메인화면에 글제목과 내용의 앞부분이 표시되며 글의 전체 내용을 보기 위한 주소는 Read more라는 링크로 되어있습니다. 이를 버튼으로 교체하였습니다. 스킨편집창에서 Read more 를 검색하여 해당부분을 찾습니다. 앞서 복사한 코드를 붙여 넣으면 링크대신 버튼으로 표시됩니다. [수정전 - 기본 템플릿] Read more [수정후 - 현재 버전] Read more → 댓글 시스템 교체하기 기본 템플릿은 티스토리의 기본 댓글 시스템이 적용되어있지 않았습니다. (덕분에 다양한 댓글 시스템이 있..

개요 블로그의 오른쪽에 위치한 사이드바도 간단한 수정 범위 내에서 제 취향대로 수정하였습니다. Icon 추가 사이드 바에도 역시 밋밋한 텍스트를 조금 더 꾸며줄 수 있도록 font awesome 아이콘 라이브러리를 사용하여 아이콘을 추가하였습니다. 티스토리 스킨 제작기 - Navbar 수정의 상단 메뉴 Icon 넣기를 참고한다면 어렵지 않게 수정할 수 있을 것이라고 예상하기 때문에 여기서는 생략하겠습니다. 방문자 수 표시 방법 변경 기초 템플릿의 사이드 바의 방문자수는 한 줄에 작성되어 있어 모양새가 좋도록 줄 바꿈이 필요하다는 생각이 들었습니다. 2줄로 나누어서 표시하였습니다. [수정전 - 기본 템플릿] Today: Yesterday: Total: [수정후 - 현재 버전] Total: Today: Ye..

2018/06/20 - [티스토리/스킨제작] - 티스토리 스킨 제작기에서 이어서 진행합니다. 부트스트랩 버전 업 & 소스 교체 (CDN 적용) 기초 템플릿은 부트스트랩 4의 베타 버전을 사용하고 있었습니다. 이를 현재 최신 부트스트랩 버전으로 교체하였습니다. 또한 부트스트랩을 다운로드한 후 이를 다시 티스토리에 업로드하는 과정이 귀찮다는 생각에 CDN에서 받아오도록 하였습니다. (실제 개발자가 아닌관계로 성능이나 효과의 차이는 모릅니다. ) 앞선 과정에서 부트스트렙이 적용된 기본 템플릿을 티스토리의 스킨으로 적용하였습니다. 다시 스킨편집 화면으로 들어가도록 하겠습니다. html 편집 버튼을 누릅니다. HTML을 선택한 상태에서 소스코드의 아무 곳이나 누른 후 Ctrl+F 를 눌러 노란색 바탕의 찾기 화면..

개요 티스토리가 제공하는 기본 스킨이 아닌 손수 제작한 스킨을 사용해 보고자 시작하게 되었습니다. 웹 개발자 및 디자이너는 아닌 관계로 직접적으로 빈 문서에서부터 HTML과 CSS 를 작성하여 그럴듯한 모양새의 스킨을 만든다는 것은 감히 꿈도 못꾸는 관계로 다음과 같이 작업을 하였습니다. 스킨을 구성하는 CSS는 부트스트랩1을 이용합니다. HTML은 공개되어 있는 티스토리 스킨을 기반으로 합니다. 그래서 이를 바탕으로 몇 가지 간략한 수정만으로 현재 사용하고 있는 티스토리 스킨을 얻을 수 있었습니다.수정 결과는 보고계시는 페이지의 현재(18/6/18) 모습과 같습니다. 참고 문서 tistory-essence-skin 스킨가이드 - 티스토리 Introduction - Bootstrap Component -..