본문 바로가기

티스토리스킨/심플형 스킨

티스토리 반응형 스킨 116 - 반응형 2단 미니멀3 버전 3.0 배포합니다.

반응형

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

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

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

 

 

 

미니멀3 버전1의 기능 개선판 스킨입니다.

사이드바가 감추어진 형태의 미니멀한 1단 스킨이며, 레이아웃 너비를 자유롭게 조정할 수 있습니다.

 

 

 

반응형 2단 미니멀3 버전 3.0 다운로드

 

 

 

 

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

 

 

1. 레이아웃 너비를 768px, 860px, 960px, 1060px, 1160px 로 설정할 수 있습니다.

 

 

2. 글 목록 한 행에 최대 4개까지 썸네일을 표시할 수 있습니다.

3. 레이아웃 모서리를 둥글게 표시할 수 있습니다.

4. 레이아웃 위/아래에 15px 씩 여백을 추가해 블로그가 떠 있는 효과를 줄 수 있습니다.

 


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

 


- 구글 웹폰트 미사용(옵션 선택으로 사용 가능)

 



6. 검색엔진 최적화(SEO) 지원
- 구글, 네이버, 빙 검색 메타 태그 설정 지원
- 오프스크린 이미지 지연 로딩(Lazyloading) 지원(인터넷 익스플로러는 미지원)

 



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

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

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

 


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

 

구글 번역

 

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

 

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

 

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

 

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

 

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

 

14. 글목록 타입으로 목록형 타입 2가지(한 행에 1, 2개)와 썸네일 타입 3가지(한 행에 2, 3, 4개) 표시를 지원합니다.

 

5가지 글목록 타입

 

글록목 타입 5종 지원

 

15. 모바일 글목록 타입으로 리스트 타입과 한 행에 썸네일 2개 표시를 지원합니다.

 

모바일 글목록 썸네일 2개 표시

 

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

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

 



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

 

스킨 설정 옵션들

 

 

스킨 적용 예

 

 

반응형
  • 레이아웃 너비에 따라 작성한글 너비도 변경되나요?

    • 감사합니다. 혹시 블로그 글쓰기 폰트에 나눔스퀘어를 추가하고 싶은데 방법이 있을까요

    • 글쓰기 폰트라는게 티스토리 에디터의 서체 글꼴을 말하는거 같은데, 에디터에 글꼴을 추가하는 것은 불가능합니다.

      티스토리 시스템에서 지원하는 범위를 넘어서는 것은 스킨의 영역이 아닙니다.

      그리고 티스토리가 추가 글꼴을 지원해줄 가능성도 거의 없습니다.

      글보기 화면 전체에 나눔스퀘어가 적용되어 보이도록 하고 싶으면 다음 링크를 참조해서 적용할 수 있습니다.

      https://github.com/moonspam/NanumSquare

      다만 위 링크의 웹폰트로 다운로드 가능한 나눔 스퀘어는 폰트 크기가 크기 때문에 2350자만 추린 것이기 때문에 경우에 따라서는 안나오는 글자가 있을 수 있습니다.

      가능하면 시스템에서 제공하는 범위 안에서 블로그를 운영하는 것을 추천합니다.

      특히 디자인 한글 글꼴은 파일 크기가 커서 블로그가 무거워지기 때문에 검색최적화에 많이 안좋습니다.

    • 헉..그렇군요... 폰트 변경 안해야겠네요 감사합니다!

  • 스킨이 매우 마음에 듭니다. 이런 좋은 스킨을 만들어주셔서 감사합니다!

    개인적으로 다크 모드를 선호하는데, 색상 설정 옵션만으로는 블로그를 다크 모드처럼 변경할 수가 없네요. 일단 자체적으로 색상 설정만으로 변경이 안되는 항목들은 CSS 설정을 통해서 색상을 변환하려고 합니다.
    다음 버전에서는 스킨 자체의 옵션을 통해 다크 모드를 볼 수 있었으면 합니다.

  • 안녕하세요 ^^ 스킨이 굉장히 마음에 들어서 다운받았는데요~
    적용해놓으니 상단에 아이콘들이 하나도 뜨지 않고 네모로만 표시 되는데 방법이 있을까요? ^^;

    • 다운로드받은 스킨에 포함된 images 폴더 안의 파일들을 하나도 업로드하지 않으셨습니다.
      스킨 편집기 화면에서 파일들을 모두 업로드해야 합니다.

      스킨에 포함된 index.xml 파일도 마찬가지로 업로드 해야 합니다.
      다음글을 참고하시면 스킨 적용에 도움이 됩니다.

      https://blogpack.tistory.com/930

    • 감사합니다! 해결되었습니다 ^^
      꼼꼼히 살펴본다고 읽어보았는데도
      이렇게 놓치네요.. 정말 감사드립니다 :)

  • 익명 2022.04.16 12:06 댓글주소 수정/삭제 댓글쓰기

    비밀댓글입니다

    • 1.

      먼저 구글 웹폰트를 적용하는 방법을 확인하시고...
      https://blogpack.tistory.com/1107
      스킨 skin.html 상단의 헤더 영역에 추가로 사용할 구글 웹폰트를 추가합니다.

      제목과 본문이라는 건 글 보기 화면 제목과 본문을 말하시는게 아닌가 싶은데 그걸 기준으로 하면...

      스킨의 style.css 에서

      .post-header h1 {
      .hgroup h1 {

      두개의 클래스를 찾아서
      font-family: 원하는글꼴이름;
      속성을 추가해주면 됩니다.
      .hgroup은 글보기 화면 제목
      .post-header는 나머지 페이지들의 제목입니다.

      2.
      style.css 에서
      @media screen and (max-width:767px)

      행을 검색한 후
      그 밑에 행을 추가해서 다음 클래스를 추가로 정의해주면 모바일 화면에서
      여백을 조정해줄 수 있습니다.
      아래 클래스는 상하좌우 모두 15px로 여백을 설정하는 것이고

      .container {
      padding: 15px;
      }

      상하와 좌우를 다르게 하려면 다음과 같이 해주면 됩니다.
      상하 30px 좌우 15px 가 됩니다.

      .container {
      padding: 30px 15px;
      }

    • 자세한 답변 정말감사합니다! :)

  • 안녕하세요. 만들어주신 스킨 잘 사용하고 있습니다. 감사드립니다. 다소 염치 없는 것 같긴 하지만, 궁금한 점(한편으로 요청드리거 싶은 사항)이 있어서요.. 본문 내용 중에 링크를 걸 경우 보통은 링크된 부분이 다른 색상으로 구분 표시되는 경우가 많은데 이 스킨은 그냥 검정색으로 동일하게 표시되는 것 같은데 이게 변경가능한 부분일까요? ^^

    • 제작 당시에 의도했던건 아닌데 살짝 꼬인듯 싶습니다.
      사용에 불편함이 있을 듯 해서 스킨을 패치했습니다.(다시 다운로드해서 skin.html 만 재적용)

      본문 내용의 하이퍼링크는 하이라이트 스킨 옵션 설정 값으로 보이게 되고, 마우스 호버를 하면 밑줄로 표시되도록 개선을 했습니다.

      스킨 원본 기준 skin.html 의 192행과 193행 사이에 다음 내용을 붙여넣으도 됩니다.(스킨 패치 내용입니다.)
      (샵샵 -> ##)

      .entry-content a, .entry-content a:visited {
      color: [샵샵_var_highlight-color_샵샵];
      }
      .entry-content a:hover {
      text-decoration: underline;
      }


닫기