본문 바로가기

티스토리스킨/반응형2단 스킨

티스토리 반응형 스킨 121 디모드(Dmode) 스킨 배포합니다.

반응형
-----------------------------------
2022-05-22 1.10 패치 안내
모바일 보기 화면에서 글목록 아이템 하단에 불필요한 여백이 발생해서 균형이 안맞아 보이는 현상 개선
모바일 보기 화면에서 검색 입력 필드 활성화를 하면 검색바가 사라지는 버그 패치

-----------------------------------
2022-03-30 1.01 패치 안내
헤더 표시 카테고리를 사이드바로 옮기면 검색바가 표시되지 않던 버그 패치.
기존 사용자는 style.css script.js 재적용 해야 합니다.

 

 

배포 스킨 하단의 저작권 표시와 스킨 소스의 저작권 표시 삭제를 금지합니다.

임의로 저작권 표시를 삭제하는 경우가 자주 눈에 띄어서 명시적으로 공지를 합니다.

 

하단 저작권 표시

 

2022년 배포 스킨부터는 인터넷 익스플로러에 대한 공식 지원을 중단합니다.
인터넷 익스플로러에서 사용하는데 문제는 없지만, 최신 웹 브라우저와 동일한 동작을 보장하지 못하며, 인터넷 익스플로러와 관련된 문의 또한 지원을 하지 않습니다.
옵션 설정으로 따로 켜는 부가 기능 중 몇가지는 인터넷 익스플로러에서 동작하지 않습니다. ("IE미지원"으로 별도 표시)

 

 

121 반응형 디모드 스킨의 주요 특징은 다음과 같습니다.

 

  • 다크모드가 지원됩니다. 토글 버튼으로 방문자가 직접 다크모드를 켜서 사용할 수 있습니다.
  • 블로그 하단에 고정 표시되는 사이드바 영역이 있는 스킨입니다.
  • 하단 사이드바 영역에 표시할 모듈은 자유롭게 설정할 수 있고, 사이드바 또한 왼쪽, 오른쪽으로 배치할 수 있습니다.
  • 사이드바를 감춰서 전체 너비를 모두 사용하는 1단 스킨으로 변경할 수 있습니다.
  • 검색최적화(SEO) 된 스킨으로 빠른 페이지 로딩 속도를 보장합니다.
  • 티스토리 내장 애드센스를 완벽하게 지원합니다.
  • 스킨을 커스터마이징 할 수 있는 90개 이상의 스킨 옵션 설정 항목을 제공합니다.
  • 스킨 수정이 용이하도록 스킨 소스에 풀 코멘트가 작성되어 있습니다.
  • 반응형 레이아웃으로 타블렛과 모바일 기기를 완벽하게 지원합니다.
  • 기본 아이콘으로 CDN 기반의 폰트어썸(FontAwesome) 아이콘 무료버전을 사용합니다.

 


- 웹브라우저 너비를 줄여서 반응형 레이아웃을 확인해볼 수 있습니다.

- 다크모드 버튼을 눌러서 다크모드를 확인해볼 수 있습니다.

 

 

미리보기1

 

미리보기2

 

스킨 다운로드

 


 

 

1. 다크 모드 사용

스킨 기본 설정으로 켜져있기 때문에 스킨을 설치하면 블로그 하단에 다크모드 옵션 항목이 표시됩니다. 해와 달 아이콘으로 표시되는 다크모드 토글 아이콘을 클릭하면 라이트모드 <-> 다크모드가 변경됩니다.

다크모드는 정해진 어두운 단일톤의 색상으로 고정되어 표시됩니다.

다크모드는 반응형 모바일 화면에서도 그대로 적용됩니다.

 

다크모드 토글 아이콘

 

다크모드 사용 옵션은 스킨 옵션 설정 "푸터" 그룹에 있습니다.

 

다크모드 설정 옵션

 

다크모드 사용 여부를 켜거나 끌 수 있고, 기본 푸터 영역에 표시되는 다크모드 토글 아이콘을 오른쪽 하단에 고정시켜서 표시할 수도 있습니다.

 

우측 하단에 고정된 다크모드 아이콘

 

 

2. 하단 고정 사이드바에 모듈 배치하기

하단 영역에 3개, 또는 4개의 사이드 모듈을 고정 배치할 수 있습니다.

 

 

반응형 레이아웃이기 때문에 대상 기기에 따라 4개->2개->1개로 자동으로 1행에 배치되는 모듈 갯수가 변경됩니다.

 

모듈 3개를 표시하는 하단 사이드바

 

하단 사이드바에 고정배치하는 모듈은 블로그 관리자 화면 사이드바 항목에서 "사이드바2" 그룹에 배치하면 됩니다.

 

블로그 관리자 사이드바 모듈 설정 화면

 

 

3. 사이드바 위치 변경

사이드바 표시 위치를 왼쪽/오른쪽 중에서 선택할 수 있습니다.

스킨 옵션 "레이아웃-사이드바 표시/위치" 에서 왼쪽, 또는 오른쪽을 선택하면 됩니다.

 

 

 

4. 사이드바를 감춰서 1단 스킨으로 변경하기

"레이아웃 사이드바 표시/위치" 항목을 "감춤"으로 선택하면 사이드바가 사라지고, 데스크탑 화면에서도 모바일 기기의 펼침 사이드바 메뉴처럼 동작하게 됩니다.

 

 

 

5. 커버페이지 설정하기

커버페이지는 기본으로 꺼져 있으며, 스킨 설정 화면에서 "커버"를 선택해서 켜야 합니다.

사용할 수 있는 커버 아이템 종류는 8가지입니다.

다양하게 변형을 준 데모 커버 페이지가 미리 구성되어 있으며, 취향에 맞춰 필요한 커버 아이템만 남겨서 컨텐츠를 작성하면 됩니다.

 

 

 

6. "커버 리스트" 만으로 커버 페이지 구성하기

커버 페이지 아이템중 "커버 리스트" 아이템은 조금 특별하게 일반 글목록과 같은 레이아웃을 가집니다.

스킨 옵션 설정에서 설정한 글목록 설정과 같은 모양으로 표시되기 때문에 다른 커버 아이템들을 모두 삭제하고 "커버 리스트" 커버 아이템 만으로 원하는 글을 모아서 표시하는 메인 커버 페이지를 구성할 수 있습니다.

 

 

7. 구글 번역 기능 사용하기

해외 접속자를 위한 블로그를 운영할 경우 구글 번역 기능을 블로그에 추가해서 구글 자동 번역 기능 활용할 수 있습니다.

 

 

스킨에 구현된 구글 번역 기능 화면은 기본 구글 번역 언어 선택 목록 표시 방법과 깃발 아이콘으로 주요 9개 언어를 선택하는 두가지가 가능합니다.

 

 

8. 모바일 화면 설정

반응형 모바일 화면 전용으로 설정할 수 있는 여러가지 설정 옵션을 제공합니다.

 

 

 

9. 테두리와 그림자 효과, 그리고 테마 색상 선택하기

전체 배경색, 그리고 블록 영역들의 배경색과 테두리 색상, 그리고 테두리 두께를 설정할 수 있습니다.

기본으로 켜져있는 블록 영역 그림자 효과 또한 옵션 설정에서 끌 수 있습니다.

 

 

 

10. 사용 가능한 옵션 항목들

 

 

반응형
  • 이전 댓글 더보기
  • 와 너무 감사합니다 !

  • 어포스트님 이 스킨 잘 적용했습니다~!
    한가지 아쉬운 옵션이있다면 사이드바를 헤더에 적용해야 검색 버튼이 활성화 된다는 점!?
    스킨 찾다가 제일 깔끔해서 적용했습니다. 감사합니닷

  • 적용을 하면 화면이 안보이는데 혹시 어떤식으로 적용해야하나요..?ㅜ

  • 몽글몽글 하면서도 디자인과 성능을 둘다 잡은 명작

  • 스킨 적용시켰는데 온통 흰색이에요... 아무것도 없이

  • 혹시... 제가 티스토리가 완전 처음이라
    좋은 스킨 잘 적용하였습니다!
    혹시 상단에 인스타그램, 유튜브 이런 아이콘 사용안하는데 제거가 가능한가요?

    그리고 우측에 캘린더도 빼고싶은데
    html에서 수정을 해야하는지..

    • sns아이콘은 스킨 옵션 설정 화면에서 미표시로 끌 수 있습니다.

      블로그주소/manage/design/skin/edit#/


      사이드바의 모듈 항목은 블로그 관리자 화면 꾸미기 > 사이드바 메뉴에서 사용하지 않는 모듈을 빼면 화면에 표시되지 않습니다.

  • 잘사용하게습니다 ^^ 감사합니다.

  • 익명 2022.04.21 00:46 댓글주소 수정/삭제 댓글쓰기

    비밀댓글입니다

    • 자동 광고이기 때문에 광고 표시 개수나 위치는 애드센스가 컨텐츠를 기준으로 해서 판단합니다.
      본문 상단 광고가 무조건 출력되는건 아닙니다.

      고정으로 상단 광고를 표시하고 싶으면 해당 위치에 애드센스 배너 광고 코드를 추가로 넣어주면 됩니다.

      가능하면 티스토리 애드센스를 사용하는 것을 추천합니다.

      본문이나 목록 상하단에 애드센스 고정 광고를 추가로 표시할 수 있습니다.

      스킨이 변경되면 일시적으로 광고 표시가 다소 줄어드는 경우가 있을 수 있으므로 조금 더 지켜보면서 조정을 해보시기 바랍니다.

  • 익명 2022.04.21 11:03 댓글주소 수정/삭제 댓글쓰기

    비밀댓글입니다

    • 네. 애드센스만 다 켜놓고 며칠 지켜보면 어느순간 광고가 나오기도 합니다. 풀화면 광고는 잘 나오는걸로 봐서는 광고 기능 자체에 문제가 있어보이지는 않습니다. 광고 비수기 기간에는 표시할 광고가 부족해서 광고 갯수가 줄어들거나 하기도 합니다.

  • 고생해서 만드신 스킨을 무료로 배포해주시다니 정말 멋있으세요! 다크모드 정말 가지고 싶었던 기능인데 감사합니다ㅠㅠㅠ 스킨 디자인을 조금씩 수정해보면서 잘 사용하도록 하겠습니다~ 어포스트님 좋은 하루 보내세요!

  • 감사합니다 .,그리고 넘 잘만드세요..
    프론트엔드.,멋있네요..,
    저 궁금한게 있는데요. 태블릿(아이패드) 에서는 모바일 스킨이 잘 적용이 되는데
    삼성 s20 에서는 티스토리 디폴트 스킨으로 나오는데 제가 정확히 알지는 못하지만
    각 기기 마다 적용시킬려면 많은 수고스러움이 있어서 대표작들만 적용하신걸까요?

    참 넘 맘에듭니다..그리고 반응형 으로 만들기가 고급 기술(?)이라는데.,. .,.진짜 대단하세요.,..

    • 티스토리 관리자 화면의 꾸미기/모바일 기능에서 모바일웹 설정을 모바일웹 자동 연결을 "사용합니다"로 설정하신게 아닌지 확인해보시기 바랍니다.

      반응형 스킨을 사용할 때는 "사용하지 않습니다"로 설정해야 합니다.

      아이패드는 화면이 커서 데스크탑 기기로 인식되서 모바일 화면으로 보이는게 아닐 수도 있습니다.

      "사용합니다"로 설정하면 티스토리 기본 스킨으로 보이며 모바일 기기에서 접근할 때
      블로그주소/m
      경로로 자동 리다이렉트가 걸립니다.

    • 감사합니다 .ㅠㅠ 좋은 봄날 되시기를!! 거의 여름인것 같지만요!!

  • 익명 2022.05.07 00:07 댓글주소 수정/삭제 댓글쓰기

    비밀댓글입니다

    • 블로그를 검색엔진에 등록하기 위해 인증을 하는 몇가지 방법 중에 한가지 방법으로 블로그 헤더 영역 메타태그로 검색엔진에서 등록 과정중에 표시되는 문자열 키를 넣는 항목입니다.

      검색엔진 등록할 때 어떤 방식으로 인증할지 선택할 수 있는데 티스토리는 스킨 html의 헤더 영역에 메타태그를 이용해 인증키를 추가해줘야 블로그가 검색엔진에서 인증이 되고 검색엔진에서 크롤링을 해서 인덱싱을 하게 됩니다.

      초보자를 위해 직접 스킨 html에 메타태그를 추가하는 번거로움 없이 스킨 옵션 설정에서 이 메타태그 값을 입력할 수 있도록 만들어진 항목입니다.

      검색엔진에 등록하지 않을거면 사용하지 않는 항목입니다.

      검색엔진에 등록하지 않으면(특히 구글) 방문자가 거의 늘지 않는 블로그가 되므로 검색 엔진 등록은 필수 입니다.

  • 익명 2022.05.07 16:15 댓글주소 수정/삭제 댓글쓰기

    비밀댓글입니다

    • 같은겁니다. html코드로 붙여넣는걸 플러그인으로 구현하거나 스킨옵션으로 구현한것입니다.

  • 안녕하세요~ 스킨 배포 감사합니다. 잘사용하겠습니다!

  • 푸터에 다크모드 관련 체크하는부분이 안나옵니다 ㅠㅠ 또 배경색상 변경또한 안되는데 혹시 방법이 있을까요?

    • 스킨이 정상 적용되지 않은 것으로 보입니다.

      스킨이 정삭적으로 적용되고 스킨 옵션이 설정되려면 스킨에 포함된 index.xml 파일도 반드시 같이 업로드 되어야 합니다.

      스킨 설정은 다음 글을 참조해 보시기 바랍니다.
      https://blogpack.tistory.com/930

  • 안녕하세요.
    아이폰 사용중인데 실제로 아이폰에서 접속하면 오른쪽 상단 돋보기 모양이 안나옵니다.
    임의로 터치해서 검색어 쓰고 하면 검색은되는데 검색어 글자도 안보이네요..ㅠ

    • 모바일 화면에서 검색 입력바가 표시되지 않는 버그가 있어서 스킨 패치가 되었습니다.
      스킨을 패치해 보시기 바랍니다.

      스킨 패치 후에는 아이폰에서 사파리 브라우저 캐시를 소거해야 스킨 패치된 내용이 즉시 반영되어 보입니다.

      스킨에 포함된 파일들중 style.css, images/script.js 파일 2개가 패치되었습니다.

    • 안녕하세요. 댓글 감사합니다.
      댓글 확인 후 다시 다운로드 받아서 해봤는데 동일한 것 같습니다. 말씀하신대로 캐쉬 다 삭제 후 해봤는데도 마찬가지네요..ㅠ

      1.10 버전은 혹시 다운받는 경로가 다른건가요?

      스킨 다운로드를 통해 다운받은 스킨은 예전에 다운받은 스킨이랑 파일 안에 내용이 똑같아요 ㅠ

  • 안녕하세요!
    1.1 버전은 어디서 다운받으면 되나요?
    위에 스킨 다운로드해서 받으면 예전꺼랑 동일합니다...ㅠㅠ 패치되었다는 파일 두개도 내용을 비교해보니 동일하구요ㅠ

    • 스킨은 패치되어있고, 기존 다운로드 링크 버튼 누르면 새 버전이 다운로드 됩니다.

      서버 인증서 만료로 인해 어제와 오늘 오전 동안은 스킨 파일이 다운로드가 안되었습니다.
      다운로드 받았다는 파일은 아마 이전에 다운로드 받은 파일이 아닌가 싶습니다.

      새로 패치된 파일은
      script.js 129행이 다음처럼 리마크 처리가 되어 있습니다.(검색 입력필드 활성화를 할 때 키보드 활성화가 안되고 풀리는 문제 해결)

      //checkSearchBar();

  • 안녕하세요!
    패치된 버전 잘 다운 받았습니다.
    하지만 아이폰 사파리, 크롬 앱에서 접속하면 여전히 검색(돋보기 모양)이 안보이네요...ㅠㅠ

  • 다크모드 찾고 있었는데 전체적으로 넘 이쁘네요 감사합니다!

  • 감사합니다.^^/


닫기