티스토리 반응형 스킨 112 - 반응형 플러리 스킨 버전 3.1 배포합니다. 메이슨리 반응형 레이아웃 스킨

--------------------------------------------------------------------

2022-06-15 버전 3.2 업데이트

티스토리 스킨 편집기의 HTML 편집기가 업데이트 되면서 스킨 소스를 파싱해서 임의로 스킨 원본을 변경합니다.

수동으로 스킨을 적용할 경우 일부 치환자가 깨지는 현상이 발생해 스킨이 정상 적용되지 않는 경우가 생겨서 이 문제가 생가지 않도록 스킨을 패치했습니다.

스킨 일부만 적용할 수 없으며 스킨 전체를 재적용 해야 합니다.(index.xml, skin.html 필수)

--------------------------------------------------------------------

2022-03-13 버전 3.1 업데이트

사용하는 분들의 반복 요청이 있어 글 내용 보기 화면의 타이틀, 본문 내용, 댓글 영역, 페이징 영역 너비를 본문 너비 제한 옵션 선택과 연동되도록 개선했습니다.

기존에 사용하던 분들은 스킨을 다시 다운로드 받아서 style.css 만 업데이트 하면 됩니다.

글 본문 내용 너비 제한 설정

그리고 기본 스킨 옵션 선택 상태의 글꼴이 구글 웹폰트가 선택되도록 해서 기본 상태에서 가독성이 조금 더 좋은 상태로 보이도록 옵션 기본 선택 값을 변경했습니다.

--------------------------------------------------------------------

2021-09-02. 목차 기능 사용시 공감 버튼과 충돌하는 현상 패치 (스킨을 다시 다운로드 받아 script.js 파일만 재업로드)

--------------------------------------------------------------------

메이슨리 자바스크립트 라이브러리를 사용해서 웹 브라우저 너비에 따라 한 행에 표시되는 썸네일 개수가 자동으로 변경되는 동적 레이아웃을 가진 스킨입니다.

112 플러리 버전1의 기능 개선판 스킨입니다.

헤더, 바디, 컨텐츠, 푸터 영역의 너비를 개별적으로 설정할 수 있습니다.

사진 중심의 블로그를 꾸미는데 추천합니다.

v3 버전에서 추가된 주요 기능들은 다음과 같습니다.

1. 헤더, 바디, 푸터 너비를 임의로 설정할 수 있습니다.

헤더, 푸터, 바디 너비 설정 옵션
헤더 바디 너비를 설정한 화면

2. 썸네일 너비와 컬럼 여백을 직접 설정할 수 있습니다. 다양한 너비와 여백을 가진 글 목록을 만들 수 있습니다.

썸네일 너비와 컬럼 여백 설정 옵션

3. 썸네일 비율을 3:2, 1:1 비율로 고정할 수 있습니다.

메이슨리 라이브러리를 사용해 제작된 스킨이기 때문에 세로로 긴 이미지는 세로로 긴 모양 그대로 표시됩니다. 스마트폰으로 세로로 찍은 사진을 사용하기에 좋습니다.

썸네일 비율 조정 옵션
썸네일 옵션 설정 화면 왼쪽부터, 기본, 1:1 비율(정사각 썸네일 사용), 3:2 비율
썸네일 옵션 설정 화면 왼쪽부터, 기본, 1:1 비율(정사각 썸네일 사용), 3:2 비율
썸네일 옵션 설정 화면 왼쪽부터, 기본, 1:1 비율(정사각 썸네일 사용), 3:2 비율

4. 레이아웃 바디 너비와 별도로 글 내용 본문의 내용 영역만 너비를 구분해서 제한 할 수 있습니다.

글 본문 내용 너비 제한 옵션


5. 외부 라이브러리 최소화로 블로그 페이지 로딩 속도가 빠릅니다.
- jQuery 자바스크립트 라이브러리 미사용(바닐라 자바스크립트 사용으로 빠른 자바스크립트 실행)
- Fontawesome 아이콘 폰트 미사용(최소 크기의 스킨 내장 폰트 아이콘 사용)


- 구글 웹폰트 미사용, 또는 옵션으로 선택 사용 가능



6. 검색엔진 최적화(SEO) 지원
- 구글, 네이버, 빙 검색 메타 태그 설정 지원



7. 티스토리 애드센스 광고 기능 지원. 티스토리가 제공하는 애드센스 기능을 기본으로 지원합니다.
- 글 목록, 커버페이지에 애드센스 목록 광고 표시 지원
- 사이드바 상 하단 애드센스 광고 표시 지원


8. 반응형 레이아웃 및 반응형 글자 크기 적용으로 레티나 디스플레이를 완벽 지원합니다.


9. 자동 목차 표시 기능을 지원합니다. 작성한 글에서 제목1, 2, 3을 가져와 글 본문 최상단에 트리형 목차를 생성해줍니다.


10. 다국어 구글 번역 기능을 지원합니다.

사이드바 영역에 구글 번역 기능을 스킨 옵션을 켜는 것만으로 사용할 수 있습니다.

구글 번역 옵션
깃발 모양 구글 번역 기능이 추가된 사이드바

11. 글 링크 및 글 내용 복사 기능. 공유형 글을 편리하게 퍼갈 수 있도록 글 제목에 링크 복사 및 글 내용 복사 버튼을 추가할 수 있습니다.

글 링크 및 복사 기능 버튼 표시

12. 스무스 스크롤 지원. 페이지 탑 이동 버튼으로 스크롤을 할 때 부드럽게 페이지가 스크롤되서 이동합니다.

13. 프로그래스바 기능. 페이지를 얼마나 스크롤했는지 상단에 표시해주는 인디케이터 표시가 지원됩니다.

페이지 최상단에 스크롤 인디케이터 표시

14. 모바일 글목록 타입으로 총 4가지의 타입을 지원합니다. 리스트 타입과 한 행에 썸네일 1개, 2개 표시, 그리고 메이슨리로 한행에 2개의 아이템을 표시하는 레이아웃(네이버 쇼핑 모바일)을 지원합니다.

메이슨리 모바일 레이아웃(썸네일 한행에 2개)

15. 인터넷 익스플로러11을 지원합니다.(구글 번역 기능은 제외)


16. SNS 아이콘을 SNS 고유컬러로 표시할 수 있습니다.


그밖에 80여개 이상의 스킨 설정 옵션을 제공해 다양한 레이아웃 설정 및 기능 추가가 가능합니다.