Material Design
썸네일 이미지

스킨 디자인 - 접은글

티스토리에는 접은글 기능이 있습니다. 이 스킨에서 디자인은 아래와 같습니다. 더보기 테스트용 접은글 입니다. 여기에 접은글 내용을 작성할 수 있습니다. 접고 열리는 메뉴 디자인을 채택하였습니다.
썸네일 이미지

스킨 적용 방법

다운로드 받으셨나요? 먼저 다운받기(결제)를 통해 파일을 다운로드 받습니다. 티스토리 스킨 등록방법 스킨 변경 -> 스킨 등록에 접속합니다. 다운받은 파일을 모두 업로드해주시면됩니다. 저장 버튼을 누르시면 완료
썸네일 이미지

스킨 기능 - 특징/장점

최적화 구글 검색 최적화를 위해 최대한 페이지 로딩 속도 빠르게 제작하였습니다. JS사용을 최대한 줄이고 디자인은 CSS로 구현이 되어있어 구형 브라우저에서도 빠른 로딩이 가능합니다. Javascript남용은 IE와 구형 휴대폰에서 렉을 유발합니다. 로딩속도를 위해 댓글의 프로필 이미지는 Lazy load로 로딩됩니다. 모바일 친화적 모바일 사용성도 높여 모바일 친화적인 스킨입니다. 모바일에서 볼 때 깔끔하며 속도 느려지게 만드는 요소를 최대한 배제하여 이용에 불편함이 업도록 제작하였습니다. 처음 봤더라도 둘러보는 데 어려움이 없을 것입니다. 모바일(안드로이드)에서 메뉴를 누른 후 뒤로가기로 메뉴만 닫을 수 있습니다. (광고를 막기위해 자바스크립트 뒤로가기 기능을 제거한 브라우저의 경우 제외) 접근성을 ..

스킨 기능 - 카테고리 주소 제거

티스토리를 사용하면 https://hi098123-google-skin.tistory.com/4?category=906350 같이 ?category= 가 추가됩니다. 이 때문에 검색엔진이 추가 색인을 하기도 하는데 이 주소를 깔끔하게 제거합니다. 다만, html 파싱방식의 검색엔진의 경우 카테고리 주소가 색인될 수 있습니다.
썸네일 이미지

스킨 설정 - 커버

커버의 위치는 아래와 같습니다. 커버에는 3가지 아이템이 쓰입니다. content_list content_detail_list content_list_thumnail 이 뒤로도 menu4, menu5 ... 이 있지만 실제로 사용되지는 않으며, 사용자가 스킨 편집을 하는경우 사용할 수 있습니다. (커버를 늘리려면 스킨설정값들이 모두 초기화 되기 때문에 한번에 많이 만들어 둡니다.) 1. content_list 스타일 간단한 텍스트로 제목만 표시합니다. 2. content_detail_list 스타일 기본 디자인입니다. 3. content_list_thumnail 스타일 아래사진은 테스트용 이미지를 사용해서 별 볼품없어 보이지만.. 유튜브 썸네일과 비슷한 디자인입니다. 16 : 9 사이즈를 권장드립니다.
썸네일 이미지

스킨 설정 - 코드 블럭

Prism.js 코드블럭을 사용할 수 있습니다. 코드블럭 스타일 : 기본 값 aa 참조 : https://hi098123.tistory.com/90 만약 사용 할 경우 "코드블럭 사용 (기본 언어 포함)" 기능이 있어야 아래의 설정을 켤수있습니다. cmake 코드블럭 사용 C#(csharp) 코드블럭 사용 django 코드블럭 사용 ... 기본언어에는 HTML, CSS, Javasvript, Python, Java, C++, Kotlin, Swift, PHP, GO가 있습니다. (티스토리 기본 코드블럭 목록) 마지막으로, 코드 스킨은 아래의 주소 우측의 Themes 부분을 눌러 확인해보실 수 있습니다. 기본값은 default로 설정되어있으며, Mozila MDN 에서도 사용중인 코드블럭입니다. https..
썸네일 이미지

스킨 설정 - 세부 설정

댓글기능 사용여부 댓글기능 사용여부를 설정할 수 있습니다. 키워드 제목(ON), 브랜드 제목(OFF) 키워드 제목 : 글 제목 - 티스토리 제목 브랜드 제목 : 티스토리 제목 - 글 제목 만약 티스토리 제목이 브랜드명이라면 브랜드 제목 사용시 검색에 더 좋을 수 있습니다. 보통은 키워드 제목이 좋습니다.
썸네일 이미지

스킨 설정 - 레이아웃

레이아웃 - 타이틀 색상 타이틀 배경 색상 기본색상 Blue-grey 위와 같은 기본 색상(Blue-grey)이 기본값이며 다른값을 설정가능합니다. Blue-grey-Dark Red Deep-purple Light-blue Indigo 타이틀 색상에는 위의 목록의 색깔이 있습니다. 직접지정을 통해 직접 지정하실수도 있습니다. 직접지정의 기본 값은 없습니다. (빈 값) 직접지정 설정시 "타이틀 배경색상" 목록 값은 무시됩니다. 타이틀 글자 색상 기본색상 White (#FFF, #ffffff) 기본 값은 흰색입니다. 경계 색상 기본 값은 없습니다. (빈 값) 만약 빨간색으로 선택시 아래와 같이 빨간 경계색이 생깁니다. 다시 없애고 싶으시다면, 값을지우세요 아래 사진처럼 지우고 적용하시면 됩니다. 레이아웃 메..