스킨 소개
JQ minimal skin은 디바이스 설정에 따른 테마 설정과 라이트테마, 다크테마, 반응형, 코드 하이라이팅, 커버, 스크롤 인디케이터, 이전 글 다음 글 보기 등 주요 기능을 담고 있습니다.
@wisdomstar94/torytis 프레임워크를 사용하여 제작되었으며 hELLO 스킨 과 Berry 스킨을 참고하여 제작되었습니다.
처음에는 서비스 개발 기록을 남기기 위해 블로그를 시작했지만, 스킨 커스터마이징이 반복되다 보니 결국 직접 제작하게 되었습니다.
IT 종사자로서 디자인, 퍼블리싱, 개발까지 욕심을 부리다 보니 이 모든 걸 직접 하게 되었고, 처음 만들어본 스킨이라 예상치 못한 오류가 발생할 수 있습니다.
스킨 제작 스토리는 스킨 제작 후기 – JQ minimal skin에서 보실 수 있습니다.
주요 기능
레이아웃
- 반응형 레이아웃 PC 태블릿 모바일 해상도 대응
- 해상도 ~ 767px부터 모바일 해상도로 변경. 해상도 767px부터 사이드바가 접힙니다.
- 헤더 블로그 메뉴 모바일 버전시 사이드바로 이동됩니다.
- 이하 설명글에서 모바일/태블릿/PC로 표기합니다.
- 스크롤 인디케이터 제공
- 테마설정, 하단 탑버튼 기능구현
- 사용자 디바이스 설정과 다크모드 라이트 모드 지원
헤더
- 헤더 프로필 사진 노출
- 로고 이미지 지원(높이 24px/최대 가로 160px)
- 티스토리 메뉴바/구독 (스킨과 별개로 티스토리 설정필요 설정방법 링크)
리스트(카테고리)
- 리스트 목록 썸네일 형태 3종 ( 사각형/원형/둥근 사각형)
- 리스트 목록타입 (리스트/카드/썸네일)
- 리스트타입은 모바일에선 칼럼으로 배치됩니다.
- 카드와 썸네일 타입은 그리드 디자인으로 PC 3 열, 태블릿 2 열, 모바일 1 열로 배치됩니다.
커버
커버 기능 배너 타입
- 와이드 배너형태로 제목과 설명을 포함하며 세로로 쌓이며 텍스트가 교차노출됩니다.
본문(글)
대표이미지 타입 (default/wide)
포스트 내 TOC(목차 자동 생성)
- 목차는 플로팅 버튼으로 우측 펼침/닫힘
- 목차는 19개까지 노출됩니다. 이후 스크롤로 보입니다.
- 소개 카드 설정
- 코드 하이라이팅 다크테마 적용 및 복사(티스토리 플러그인 "Syntax Highlight" 설정 후 코드블록사용)
- 본문에 광고영역 추가
- 본문 끝에 스크롤이 도달하면 이전글/다음 글 링크가 자동으로 표시됩니다.
푸터/SNS
- 외부링크 4개
- 푸터 문구 2개
- SNS 링크 설정
본문 에디터 스타일
- 적용된 스타일은 아래 링크 참고해 주세요!
https://jeeqong.tistory.com/28
Editor 스타일 미리보기
지금 보고계신 글은 JQ:minimal skin에 적용된 스타일 안내 글입니다.JQ: minimal skin 소개 제목 1 태그 = h2.size26제목 2 태그 = h3.size23제목 3 태그 = h4.size20본문 1 = pTagsize18본문 2 = pTagsize16본문 3 = pTagsize14
jeeqong.tistory.com
디자인 특징
JQ.minimal 스킨은 모노톤 기반의 미니멀 스타일을 추구합니다.
기본 레이아웃과 본문 구성은 모두 흑백 기반의 차분한 톤으로 구성되어 있으며,
딱 두 가지 요소에만 컬러 포인트가 들어갑니다:
- 본문 링크 언더라인: #93C5FD (밝은 하늘색)
- 코드 하이라이팅: #EC4899 (핑크 계열)
폰트는 Pretendard Variable을 사용하였고,
line-height와 가독성을 고려해 디바이스별 폰트 크기도 다르게 설정하였습니다:
- PC/태블릿: 15px
- 모바일: 약 16px
단정하고 심플한 감성에 집중하고 싶었던 분들께 잘 맞는 디자인입니다.
스킨 설정(스킨 편집)
커버
- 커버 아이템은 배너/리스트/카드리스트/썸네일리스트 형태 설정 가능합니다.
- 리스트 타입은 아래 리스트 타입 참고해 주세요.
- 카드/썸네일 리스트는 디바이스해상도에 따라 컬럼 개수가 다르므로 6개를 추천합니다.
- 커버 아이템 > 콘텐츠 > 직접 입력 기능은 미구현되었습니다.
헤더
- 프로필사진 토글로 설정가능합니다
- 로고 :
- 블로그 제목을 이미지로 설정 가능합니다.
- 투명바탕에 검은색 로고로 작성하시면 테마에 따라 색상이 변경됩니다.
리스트
- 리스트 타입/카드 타입/썸네일 타입
- 목록타입 썸네일 사각형/원형/둥근 사각형
본문(글)
- 대표이미지 설정과 소개카드 설정이 가능합니다.
- 대표이미지 높이 192px 고정입니다.
푸터
- Footer 링크/문구 와 Footer SNS 링크 설정이 가능합니다.
라이선스 및 주의사항
- 해당스킨은 무료로 배포합니다 개인이 수정하여 사용하는 것은 허용 하나 재배포 및 상업적 사용을 불허합니다.
- 푸터에 있는 저작권표시 “Designed by Jeeqong” 수정/삭제하지 말아 주세요.
- jeeqong@gmail.com
사용 방법
- 아래 링크를 통해 스킨 파일을 다운로드할 수 있습니다.
스킨 적용 방법 안내
- 스킨 적용 방법은 아래에서 확인
Tistory 스킨 적용 방법
본글에서는 Tistory 스킨 등록 방법과 메뉴바/구독 버튼 설정을 안내합니다.JQ minimal skin은 아래 링크에서 다운로드할 수 있습니다. JQ: minimal skin 소개스킨 소개JQ minimal 스킨은 디바이스설정에 따른
jeeqong.tistory.com
버전 정보 및 변경사항 기록 (Changelog)
- v1.0 최초 배포 (2024.04.25)
- v1.1 수정 반영 (2024.04.26)
- header scroll-progress 사이드메뉴 위로 올라오던 문제 수정
- 검색결과 리스트 스타일 적용
- 접근성 추가 - 사이드메뉴토글(mobile)/theme 버튼
- 코드 태그 bg-red 삭제
마무리
처음 만든 스킨이라 부족한 점이 많을 수 있지만,
제가 필요해서 만든 만큼 실사용자 입장에서 최대한 편리하게 구성하려고 노력했습니다.
스킨을 사용하시다가 불편한 점이나 오류가 있다면 댓글이나 메일로 편하게 알려주세요.
피드백은 최대한 다음 버전에 반영되도록 하겠습니다.
또한, 스킨은 지속적으로 개선 가능성이 있으며,
공지 없이 오류 수정이나 소소한 디자인 업데이트가 이루어질 수 있습니다.
버전 업데이트는 가능한 changelog에 기록하겠습니다.
감사합니다 :)
– Jeeqong
'Blog > Tistory Skin' 카테고리의 다른 글
| 티스토리 스킨 제작 후기 – JQ minimal skin (3) | 2025.04.25 |
|---|---|
| Tistory 스킨 적용 방법 (5) | 2025.04.25 |
| JQ minimal skin 본문 서식 스타일 미리보기 (0) | 2025.03.18 |