본문 바로가기
ddPack

ddPack은..

by A.d.m.i.n 2022. 6. 1. 2

 

홈, 카테고리 인덱스 썸네일

북클럽 스킨의 기본값인 세로형, 가로형, 원본 비율로 보여주는 그리드형 등 세 가지 타입을 지원합니다.

 

 

 

 

 

폰트 및 폰트 크기

스킨 설정에서 선택 할 수 있습니다.

영문 - Poppins, Noto Sherif, Lora Italic

한글 - 나눔 고딕, 이롭게 바탕, Komacon

영문은 블로그 전체 일괄 적용이며, 한글은 '블로그 기본'과 '본문만 적용'으로 각각 다른 폰트를 적용 할 수 있습니다.

폰트 크기는 포스트 내용만 적용됩니다.

 

 

 

 

 

포토 뷰어

기존의 티스토리 플러그인을 사용하지 않고 사진을 볼 수 있습니다.

뷰어는 꽉찬 화면이며, 해상도가 큰 사진은 화면에 꽉 차게 나오고 작은 사진은 원래 크기대로 보여줍니다.

키보드의 좌우 방향키로도 사진을 넘길 수 있으며, '슬라이드쇼 블럭' 및 '그리드 블럭'의 사진에도 대응합니다.

 

그리드 블럭 만들기

 

티스토리 사진 여러장 나란히 배열하는 방법

티스토리에 글을 쓰다 보면 사진 여러장을 올릴 때 각각의 사진이 따로 보여지는 것도 괜찮지만, 여러장을 나란히 배열하여 배치하는 것도 효율적입니다. 의외로(?) 모르시는 분들이 있어서 간

gracenmose.tistory.com

 

 

 

 

 

전체화면

포토 뷰어를 전체화면으로 볼 수 있습니다.

 

 

 

 

 

갤러리 모드

사진이 3장 이상인 포스트일 경우, 갤러리 모드 런처 아이콘이 생성됩니다.

런처 버튼을 클릭하면 갤러리 레이어가 활성화되고 썸네일을 클릭하면 포토 뷰어로 연결됩니다.

 

 

 

 

 

세로 사진 사이즈

포스트 내의 세로 사진의 경우, 사이즈를 조금 줄여서 화면에 넘치지 않게 출력할 수 있습니다.

 

 

 

 

 

본문 너비 보다 작은 사이즈의 사진

1000px 미만의 사진은 강제로 늘이지 않고 원본 크기대로 출력됩니다.

 

 

 

 

 

EXIF 뷰어

'이미지 블럭'과 '슬라이드쇼 블럭'의 사진에 대응합니다. '그리드 블럭'은 미지원.

사진 아래에 인라인 형태로 출력되는 Basic과 마우스 호버시에 팝업 되는 Popup 두 가지 타입을 지원합니다.

 

스킨 설정에서 뷰어 타입, 컬러셋, 항목별 출력 유무를 선택할 수 있으며,

항목 제목 바꾸기, 항목을 아이콘 폰트로 바꾸기 등등 스크립트 사용자 설정에서 다양한 설정값을 변경할 수 있습니다.

 

TISTORY ISSUE

대표 이미지로 설정된 사진만 CORS policy 에러나서 EXIF 데이터를 불러올 수 없음.

CORS Unblock 확장앱을 사용하면 정상적으로 사용할 수 있습니다.

 

 

CORS Unblock

No more CORS error by appending 'Access-Control-Allow-Origin: *' header to local and remote web requests when enabled

chrome.google.com

 

 

CORS Unblock – 🦊 Firefox용 확장 기능 (ko)

Firefox용 CORS Unblock 부가 기능을 다운로드하세요. No more CORS error by appending 'Access-Control-Allow-Origin: *' header to local and remote web requests when enabled

addons.mozilla.org

 

 

 

 

 

댓글

댓글에 카카오 이모티콘을 넣을 수 있습니다.

각 댓글마다, 댓글 주소를 복사하는 아이콘답글 아이콘이 생성됩니다.

유튜브 링크, 이미지 링크 및 A 링크를 넣으면 각각에 맞는 태그를 자동으로 감싸줍니다. - Designed by Marshall K.

 

[티스토리] 댓글에 링크 및 이미지 추가하기

업데이트 2020.07.03 - innerHTML을 사용하지 않고 댓글 내용을 업데이트합니다. 단순히 텍스트밖에 적을 수 없는 티스토리 댓글에 링크, 이미지, 비디오, 유튜브 등을 추가해 화려하게 꾸미는 스크립

marshallku.com

 

 

 

 

 

새 글 표시

블로그 관리 - 카테고리 관리 - 카테고리 설정 - 카테고리에 새 글 발행 여부를 '표시합니다'로 설정하면,

헤더 메뉴에 등록된 카테고리에 새 글이 있음을 표시합니다. (★ 표시).

홈 화면 및 카테고리 화면일 경우 새 글 썸네일의 외곽선은 포인트 컬러로, 밝기는 100%로 고정됩니다. (기본값은 70%)

새 글 기준 - 글 발행 후 3일

 

 

 

 

 

'내 링크'에 새 글 표시

CORS Unblock 확장앱 필수.

 

 

 

 

 

TOC 목차

포스트 내용이 길어질 때 각 문단에 북마크 기능을 넣어주는 기능입니다.

페이지가 스크롤되면 화면 우측에 TOC 인덱스 레이어가 출력됩니다.

인용문 서식들 중에서 하나를 선택해서 클래스명에 toc 클래스를 하나 추가하고, 각 문단의 머리에 아래처럼 서식을 삽입하면 됩니다.

서식으로 따로 만들어서 사용하시길 권장합니다.

 

<blockquote class="myQuote st6 toc" cite="URL">
    <div class="qt">&nbsp;</div>
    <p>문단제목</p>
    <div class="qb">&nbsp;</div>
</blockquote>

 

 

 

 

 

태그 검색

제대로 된 태그 검색이 가능합니다.

단축키 T

 

 

 

 

 

달력 및 달력 검색

기존 달력의 버그와 미래를 보는 능력을 제거하였습니다.

달력 검색은 아래와 같은 형식으로 검색이 가능합니다.

YYYY - 티스토리 몰래패치로 작동 안 됨

YYYYMM

YYYYMMDD

이 검색 기능이 있어 티스토리에서 제공하는 Archive 기능은 넣지 않았습니다.

 

 

 

 

 

사진이 많을 경우 번호 붙이기

두 가지 옵션이 있습니다.

옵션 1 - x장 이상이면 일괄 붙이기

옵션 2 - <div id="big_img"></div> 태그로 둘러싼 사진들만 붙이기

 

'이미지 블럭', '그리드 블럭', '슬라이드쇼 블럭' 등 모든 사진 블럭을 지원합니다.

 

 

 

 

 

오디오 파일

글 작성 시 파일 첨부로 오디오 파일을 그냥 첨부하시면 됩니다.

다운로드 링크가 나오는 것이 아닌 브라우저 내장 오디오 플레이어로 출력합니다.

 

 

 

 

포스트 내에 첨부된 이미지에 alt 속성 붙이기

이미지의 원본 파일명으로 넣을지 포스트 제목으로 넣을지는 스크립트의 사용자 설정에서 선택할 수 있습니다.

기본값은 포스트 제목입니다.

 

 

 

 

 

사이드바의 프로필

QR code에 마우스를 올리면 모바일용 QR code가 팝업 됩니다.

이메일 아이콘을 클릭하면 이메일 주소가 클립보드로 복사됩니다.

 

 

 

 

 

블로그 나이 출력

하단 Footer의 Copyright에 마우스를 올리면 요일로 환산한 수치가 툴팁으로 출력됩니다.

 

 

 

 

 

포스트의 상단 배너의 글 제목을 클릭하면

해당 카테고리로 이동합니다.

 

 

 

 

 

이미지가 없으며 저장할 때 대표이미지를 첨부하지 않은 포스트일 경우

목록화면 및 사이드바에 출력되는 썸네일은 한 개의 이미지 고정이며,

포스트의 상단 배너에 출력되는 이미지는 다수의 이미지에서 랜덤으로 출력됩니다.

해당 링크들은 스크립트의 사용자 설정에서 확인 및 변경 가능합니다.

 

 

 

 

 

모바일에서 좌우 스와이프

화면을 왼쪽으로 밀면 사이드바가 보이고,

화면을 오른쪽으로 다시 밀면 사이드바가 사라집니다.

 

 

 

 

 

인사말

블로그에 접속 시 인사말이 출력됩니다.

최초 한 번만 출력되며 6초 후에 사라집니다.

 

 

 

 

 

스크롤 시 헤더 고정

데스크탑 - 포스트 화면일 때만 글 제목을 가지고 헤더 고정, 클릭하면 해당 카테고리로 이동

모바일 - 위와 동일하며 카테고리일 때는 카테고리명을 가지고 고정, 클릭하면 홈화면으로 이동

 

 

 

 

 

표 (Table)

두 가지의 표 스타일을 미리 정의해 놓았습니다.

포스트마다 스타일 추가할 필요 없이 테이블 내용만 채우시면 됩니다.

1번 스타일을 선택하시면 아래처럼 스타일링 됩니다.

헤드라인은 헤드라인 밑줄은 나머지 셀 정렬
중앙 정렬, 글씨 굵기는 Bold 적용 파란색 3px 왼쪽

 

 

15번 스타일을 선택하시면 아래처럼 스타일링 됩니다.

  1 2 3 4 5
헤드라인은 중앙 정렬
헤드라인 글씨 굵기 Bold
첫번째 행은 오른쪽 정렬
나머지 셀은 왼쪽 정렬

 

 

 

 

 

CCL

관리페이지에서 CCL 표시함으로 설정했을 때 발행된 글은, CCL 표시 안 함으로 설정하여도 CCL이 표시됩니다.

불펌이 원칙인 블로거에게는 오히려 오해의 소지만 가지는 CCL은 일괄 삭제되도록 하였습니다.

 

 

 

 

 

우클릭 방지

이미지 위에서우클릭 시, Copyright 출력.

문구는 블로그 이름입니다.

 

 

 

 

 

홈 화면이 최신글 설정일 때, 첫 화면의 썸네일 인덱스 헤드라인 문구

스킨 기본값은 최근 글이며, 스킨 설정에서 대체할 문구를 입력하면 그 값으로 출력됩니다.

 

 

 

 

 

사이드바 카테고리의 첫 번째 카테고리

https://블로그주소.tistory.com/category URL을 가지는 최상위 카테고리를 ON | OFF 할 수 있습니다.

 

 

 

 

 

포스트 헤더의 댓글 아이콘

댓글이 있는 포스트일 경우 헤더의 수정 | 삭제 링크 옆에 댓글 아이콘이 출력됩니다.

댓글 아이콘을 클릭하면 댓글창으로 이동합니다.

 

 

 

 

 

프로필의 소개글

스킨 편집 - ddPack 설정 - 프로필 소개글공란으로 두면 랜덤하게 격언을 출력합니다.

격언은 스크립트의 사용자 설정에서 변경할 수 있습니다.

 

 

 

 

 

헤더의 메뉴에 카테고리 썸네일 출력

각 카테고리에 마우스 올리면 카테고리 별로 최근 글 6개를 보여줍니다.

서브 카테고리는 지원하지 않습니다.

 

 

 

 

 

촬영정보 표시 #1

서식을 포스트에 삽입 - 내용 작성.

Shooting Data - 카메라 이름, 렌즈 이름, 플래시 이름, 필름 이름, 현상소 이름, 촬영일자, 날씨.

런처 버튼은, 공감 버튼 우상단에 출력됩니다.

 

 

 

 

 

촬영정보 표시 #2

서식을 포스트에 삽입 - 내용 작성.

Shooting Data - 카메라 이름, 렌즈 이름, 플래시 이름, 필름 이름, 현상소 이름, 촬영일자, 촬영장소.

촬영장소는 쉼표로 구분을 해주어야 하며 5개까지 입력 가능. 네이버 지도 검색을 할 수 있도록 자동 링크 생성.

 

 

 

 

 

포스트 하단의 이전 | 다음 글 링크

글 제목, 썸네일.

 

 

 

 

 

티스토리 페이지

페이지 작성하기로 만든 포스트를 메뉴에 링크하고,

브라우저에서 페이지에 들어가면 대표이미지를 가져와서 포스트 헤더에 출력합니다.

 

 

 

 

 

각주

제대로 된 각주 기능을 지원합니다.

예전 티스토리의 각주도 새로운 스타일의 각주로 리빌드하여 출력할 수 있습니다.

 

 

 

 

 

더보기 | 접기

추가된 서식을 이용하여 더보기 | 접기 기능을 사용할 수 있습니다.

 

 

 

 

 

물방울 효과

스크롤 헤더의 글 제목에 물방울 효과를 줄 수 있습니다.

 

 

 

 

 

랜덤 포스트

3일 동안 포스팅이 없으면 이전 포스트를 랜덤하게 출력합니다.

블로그 최초 접속 시에만 한 번 작동하며,

관리 페이지 - 관리 - 블로그 - 주소 설정 - 포스트 주소가 숫자로 설정되어야 정상 작동합니다.

스킨 설정에서 ON | OFF 가능합니다.

 

 

 

 

 

Book Club 스킨에서 수정된 부분

레이아웃 변경.

Light TT EX포토 뷰어 사용 중지.

사이드바 숨김.

포인트 컬러 강조.

아이콘 폰트 적용.

커서 변경.

 

 

 

 

 

CORS Unblock 설정

확장앱 설치 후 아래처럼 설정을 해줘야 타 사이트 방문 시 문제가 생기지 않습니다.

확장앱 클릭 - 클릭으로 체크 해제.

 

 

 

 

 

 

 

'ddPack' 카테고리의 다른 글

서식 - 촬영정보  (0) 2023.02.26
아이콘 폰트에 대해서..  (0) 2022.06.01
ddPack 서식 및 특징 보기..  (3) 2022.06.01
서식 활용하기, 그리고 티스토리에서 새로 추가된 기능..  (0) 2022.06.01
추가된 서식 및 견본..  (0) 2022.06.01
스킨 설치 및 설정  (13) 2022.06.01

Comment


, Key  →  Previous / Next Photo

R Key  →  Search

T Key  →  Search Tag

G Key  →  Gallery (optional)

. Key  →  Toggle SideBar

 

 

, Swipe  →  Toggle SideBar

 

 

  For EXIF Viewer & My Link

 

CORS Unblock

No more CORS error by appending 'Access-Control-Allow-Origin: *' header to local and remote web requests when enabled

chrome.google.com

 

CORS Unblock – 🦊 Firefox용 확장 기능 (ko)

Firefox용 CORS Unblock 부가 기능을 다운로드하세요. No more CORS error by appending 'Access-Control-Allow-Origin: *' header to local and remote web requests when enabled

addons.mozilla.org