부트스트랩

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

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

개요 하단(footer)은 많은 부분을 고칠 것이 없어 내용이 많지 않습니다. 상단 메뉴(Navbar)와 동일한 색상을 적용하고, Copyright 문구의 연락처란을 본인의 것으로 교체하는 간단한 작업입니다. 색상과 연락처 정보 교체 상단의 Navbar 와 마찬기지로 색상을 교체하였습니다. Primary를 Dark로 교체합니다. 스킨 편집 창에서 footer로 검색합니다. 검색 결과 중 bg-primary를 bg-dark 로 수정하였습니다. 다음은 하단의 copyright 문구를 저의 메일 주소로 변경하였습니다. 앞선 과정과 동일한 요령으로 스킨 편집 창의 html 편집창에서 mailto로 검색합니다. 기초 템플릿 제작자의 메일 주소가 기입되어 있습니다. 이를 저의 메일 주소로 수정하였습니다. 이상입니다.

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

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