스킨 설치
다운로드한 파일을 압축 해제하면 세 개의 폴더가 있습니다.
Skin for Upload 폴더가 스킨 설치용.
Other Images 폴더는 블로그 프로필 이미지와 브라우저 탭 메뉴에 나오는 아이콘 파일이 있는 폴더입니다.
Icon Font Demo 폴더는 아이콘 폰트의 폰트 모양들 보시라고 넣었습니다.
아이콘 폰트에 대한 내용은 다른 글에서 설명드리겠습니다.
1. 티스토리 관리자 페이지 - 꾸미기의 스킨 변경 - 스킨 등록 버튼 클릭.
2. 추가 버튼을 클릭하고 Skin for Upload 폴더의 파일들만 업로드합니다.
3. 다시 추가 버튼을 클릭하고 images 폴더의 파일들을 업로드합니다.
4. 저장 - 스킨 이름 지정 - 확인
5. 스킨 보관함으로 가서 방금 저장된 스킨을 적용시켜 줍니다.
사이드바, 모바일, 메뉴바 설정
사이드바
아래처럼 설정하여 주세요. 필요 없는 항목은 삭제하셔도 됩니다.
각 그룹 항목들의 순서는 상관이 없습니다만, 항목들이 아래 그림처럼 각각의 그룹에 속해야 됩니다.
모바일 설정
꾸미기 - 모바일 설정 클릭하시고,
티스토리 모바일웹 자동 연결을 사용하지 않습니다로 설정하여 주세요.
메뉴바
아래처럼 설정하여 주세요.
플러그인 설정
꼭 필요한 것이 아니라면 모두 해제하셔도 스킨에는 아무런 지장이 없습니다.
모바일 접속자를 위해서 반응형웹스킨 이미지 최적화 플러그인을 적용하시길 권장하고,
이모티콘 표시 플러그인은 반드시 해제하여 주세요.
스킨 설정
홈 설정을 최신 글로 설정하면 카테고리 가리지 않고 최근 글을 아래의 개수만큼 출력합니다.
리스트는 북리뷰 고정입니다.
다른 타입 선택시 레이아웃이 깨집니다.
홈 설정을 커버로 설정하면 카테고리별로 글을 정렬할 수 있습니다.
각 커버 별 설정은 우측의 수정 버튼 클릭하시면 되고,
커버의 순서는 좌측의 빨간 사각형 부분 클릭한 채로 위아래로 움직이면 됩니다.
홈 설정이 커버일 때,
블로그의 첫 화면에서 각 커버의 헤드라인 문구 앞의
깃털 아이콘과 마지막의 마침표 3개는 자동 적용 입니다.
삭제 및 수정법은 본 글의 마지막 단락의 코드 수정에 기술되어 있습니다.
홈 설정이 최신 글이거나 커버이거나 리스트 설정은 똑같이 적용됩니다.
현재, 카테고리 클릭해서 나오는 썸네일들이 북리뷰입니다.
글 개수는 아래처럼..
커버
최신 글
ddPack
블로그 생일은 반드시 입력하셔야 합니다.
ddPack - 사이드바
E-Mail 주소는 반드시 입력하셔야 합니다.
포인터 컬러의 색상 원을 클릭하시면 아래처럼 컬러 인덱스가 나옵니다.
헤더 및 푸터 기타 등등 블로그 대표 컬러셋으로 사용할 색상값을 입력해주세요.
* 초기값은 #FC6545 입니다.
폰트
스킨의 기본 폰트는,
영문은 Lora italic 이며 한글은 이롭게바탕체 입니다.
Google Fonts
Making the web more beautiful, fast, and open through great typography
fonts.google.com
ddPack 스킨 다운로드
UPDATE - 2023. 2. 10.
- ddPack.min.js 파일을 스킨 편집 - 파일업로드에 업로드 후,
- skin.html, style.css 파일은 스킨 편집에서 각각 덮어쓰기 하시면 됩니다.
UPDATE - 2023. 2. 25.
- 홈, 카테고리 등 인덱스의 썸네일 종류를 선택하는 부분이 바뀌었습니다.
스킨 설정에서 북클럽 스킨의 기본값인 세로형 고정, 가로형 고정, 원본 이미지의 비율로 보여주는 그리드형
세가지 중에 하나를 선택할 수 있으며 기본값은 세로형입니다.
- Cursor 링크 오류 수정
- 몇 가지 최적화가 있었고, 티스토리 몰래패치로 인한 버그 픽스가 포함됩니다.
UPDATE - 2023. 2. 26.
- 포스트 내의 세로 사진 사이즈 변경 | 스킨 설정에서 선택 | 기본값은 변경함
- 인사말 선택 옵션 추가 | 스킨 설정에서 선택 | 기본값은 3
옵션1 - 화면 하단의 한 줄 텍스트
옵션2 - 화면 중앙의 이미지 박스 | 꽃 그림 from Pixabay
옵션3 - 화면 중앙의 이미지 박스 | GIF 이모티콘 from 카카오
옵션4 - OFF
- 포스트 내의 세로 사진 사이즈 수정된 버전입니다.
UPDATE - 2023. 2. 27.
- 내부적으로 크게 바뀐 것은 없고, 스킨 설정을 강화한 버전입니다.
- 스킨 설정 구성을 보기 좋게 다듬었습니다.
- 스킨 설정에서 폰트 선택 및 본문의 글자 크기를 조정할 수 있게 하였습니다.
영문 - Poppins, Noto Sherif, Lora Italic
한글 - Komacon, 이롭게 바탕, 나눔 고딕
- 스킨 설정에서 EXIF 뷰어의 디테일한 설정이 가능합니다.
EXIF 뷰어 타입 선택 ( Basic or Popup )
EXIF 뷰어 타입에 따라 컬러셋 선택
EXIF 데이터 항목별 출력 유무 (렌즈명 ~ 촬영날짜 ON OFF)
- 스킨 프리뷰 이미지 교체.
- 불필요한 파일들을 삭제하여 스킨 전체 용량이 조금 내려갔습니다.
UPDATE - 2023. 5. 30.
- 티스토리의 새로운 댓글 치환자가 생기면서 몇 가지 문제가 생겼습니다.
- 프로필 레이어가 일괄적으로 생성되는 버그 픽스.
- ddPack의 댓글 관련 기능들이 초기화 되는 버그 픽스.
UPDATE - 2024. 6. 11.
- 티스토리 네임카드 위치 수정.
- 스크립트 최적화.
- CSS 수정.
- 포스트 상단 헤더의 이미지를 클릭하면 블로그 메인으로 이동하도록 하였습니다.
- ddPack.min.js 파일을 스킨 편집 - 파일업로드에 업로드 후,
- skin.html, style.css 파일은 스킨 편집에서 각각 덮어쓰기 하시면 됩니다.
UPDATE - 2024. 6. 25.
- 티스토리 포토뷰어 강제 로딩 막기
- ddPack.min.js 파일을 스킨 편집 - 파일업로드에 업로드 후,
- skin.html, style.css 파일은 스킨 편집에서 각각 덮어쓰기 하시면 됩니다.
코드 수정
헤더의 헤드라인 (블로그 이름 & 글 제목) 앞의 아이콘
스킨 편집 - CSS에서,
line 1485, 1490의 content의 값을 수정하거나 따옴표 안의 내용을 지우시면 됩니다.
커버 설정시, 첫 화면 각 커버 헤드라인의 앞뒤에 붙는 아이콘 폰트와 마침표 3개
스킨 편집 - CSS에서,
line 1634, 1637의 content의 값을 수정하거나 따옴표 안의 내용을 지우시면 됩니다.
스크립트 사용자 설정
ddPack.min.js 파일을 메모장에서 열어보시면,
몇 가지 기능들을 On | Off 하실 수 있습니다.
ddPack.min.js 파일을 수정했다면..
스킨 저장소에 수정된 파일을 업로드.
스킨 편집 - HTML에서, line 782을 아래처럼 수정하시면 됩니다.
<script src="./images/ddPack.min.js?ver=220610"></script>
<script src="./images/ddPack.min.js?ver=220610.1"></script>
사이드바의 프로필 이미지..
Skin for Upload/images/profile_photo.jpg 파일입니다.
이미지를 변경하실 때는 가로 260px 이하의 사이즈로 리사이즈 한 다음 스킨저장소에 업로드하여 주세요.
참고할만한 사이트
HTML Symbols, Entities and Codes — Toptal Designers
Easily find HTML symbols, entities, characters and codes with ASCII, HEX, CSS and Unicode values; including copyright sign, trademark sign and at symbol.
www.toptal.com
HTML Color Codes
Easily find HTML color codes for your website using our color picker, color chart and HTML color names with Hex color codes, RGB and HSL values.
htmlcolorcodes.com
span { color: red } - color name
span.class { color: #ff0000 } - HEX
div#id { color: rgb(255, 0, 0) } - RGB
span.test::before { content: '※'; color: rgba(255, 0, 0, 0.5) } - RGBA (투명도 조절)
'ddPack' 카테고리의 다른 글
| 서식 - 촬영정보 (0) | 2023.02.26 |
|---|---|
| 아이콘 폰트에 대해서.. (0) | 2022.06.01 |
| ddPack 서식 및 특징 보기.. (3) | 2022.06.01 |
| 서식 활용하기, 그리고 티스토리에서 새로 추가된 기능.. (0) | 2022.06.01 |
| 추가된 서식 및 견본.. (0) | 2022.06.01 |
| ddPack은.. (2) | 2022.06.01 |
Comment