본문 바로가기

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

반응형 티스토리 스킨 119 메트로 스킨 배포합니다.

반응형
--------------------------------------
2022-05-22 1.1 패치 안내
모바일 화면에서 블로그 메뉴 항목과 소셜 아이콘 개수가 많아지면 소셜 아이콘이 블로그 제목에 가려져 안보이던 현상 개선
모바일 화면에서 검색어 입력 필드를 활성화 하면 사이드바 메뉴가 사라지던 현상 개선

 

레트로 풍의 컬러감을 살린 반응형 티스토리 스킨입니다.

왼쪽에 카테고리 표시 영역, 오른쪽에 사이드바 영역이 고정으로 배치되는 포트폴리오 타입의 스킨입니다.

개인 포트폴리오 블로그나 개인 작품 소개용 블로그로 사용하기 좋습니다.

 


 

스킨 주요 특징

 

1. 반응형 스킨으로 웹 브라우저 너비에 따라 레이아웃이 자동으로 변경됩니다.

 

웹 브라우저 너비에 따라 반응형으로 달라지는 레이아웃

 

2. 데스크탑과 모바일 기기 목록 타입을 스킨 옵션 설정에서 개별 설정할 수 있습니다.

 

데스크탑과 모바일 글목록 타입 설정

 

3. 컨텐츠 세로 길이와 무관하게 웹 브라우저 화면 안에 레이아웃이 고정되도록 할 수 있습니다.

 

컨텐츠 영역과 사이드바가 영역 안에서 개별적으로 스크롤 됩니다.

 

4. 모바일 화면 보기에서 배경 테두리를 없애고 기기 전체화면에 레이아웃을 표시할 수 있습니다.

 

배경이 보이는 여백이 있는 레이아웃(좌)과 여백 없는 레이아웃(우)

 

5. 모바일 기기에 맞는 최적화된 반응형 모바일 화면을 제공합니다.

 

 

 


 

미리보기/다운로드

 

미리보기를 할 때 웹 브라우저 너비를 줄이면 반응형으로 변하는 레이아웃을 확인할 수 있습니다.

 

 

미리보기1

 

미리보기2

 

다운로드

 


 

스킨 주요 옵션

  1. 인터넷 익스플로러 11 지원 - 레이지로드, 구글 번역 기능을 제외하고 인터넷 익스플로러11 지원합니다. 레이지로드와 구글 번역 기능은 옵션을 켜도 인터넷익스플로러에서는 동작하지 않습니다.

    인터넷 익스플로러 11 지원
  2. 반응형 모바일 레이아웃 옵션 - "목록", "썸네일 한행에 1개", "썸네일 한행에 2개" 3가지 모드중 한가지를 선택해서 모바일 글 목록을 출력할 수 있습니다.
    모바일 글목록 타입 옵션


    데스크탑과 타블렛 레이아웃은 목록, 썸네일 한행에 2개, 썸네일 한행에 3개 지원.



  3. 검색 최적화 추가 지원 - 글목록의 이미지에 alt 속성에 글 제목이 표시되도록 개선되었습니다.
    글 목록 썸네일 alt 속성 값 표시



  4. 자동 목차 생성 기능 추가 - 글 안의 제목 스타일을 수집해 자동으로 다단 목차를 글 맨 위에 생성합니다.

    자동목차 생성 옵션

    자동 목차



  5. 사이드바 표시 구글 번역 기능 추가 - 다국어 번역 기능 지원. 인터넷 익스플로러와 구형 엣지 브라우저 자체의 문제로 지원되지 않습니다.
    사이드바 구글 번역 사용 옵션

    기본 구글 번역 기능
    깃발 아이콘으로 표시되는 구글 번역 기능(주요 9개 언어만 지원)


  6. 글링크, 내용 복사 기능 - 글의 하이퍼링크 태그를 자동으로 복사해주는 기능 및 글 내용을 복사해 갈 수 있는 기능 버튼 표시. 퍼가기를 허용하는 글 내용을 HTML, 또는 텍스트로 바로 퍼갈 수 있도록 기능 버튼을 표시할 수 있는 옵션입니다.

    기능 버튼 옵션
    글 제목 옆에 HTML복사, 텍스트복사, 하이퍼링크복사 3가지 기능 버튼을 선택적으로 표시


  7. 스무스스크롤 - 화면 스클롤을 할 때 우측 하단에 표시되는 페이지 탑으로 가기 버튼을 클릭하면 부드럽게 스크롤 되면서 페이지 탑으로 이동합니다. 인터넷 익스플로러는 미지원합니다.


  8. 스크롤 인디케이터 지원 - 화면을 스크롤 할 때 어느 정도 스크롤 했는지 알 수 있도록 블로그 최상단에 스크롤 프로그레스바가 표시됩니다. 옵션으로 켜거나 끌 수 있습니다.

 


 

설정 옵션들

 

반응형

Comments

  • 익명 2021.11.30 10:42 댓글주소 수정/삭제 댓글쓰기

    비밀댓글입니다

    • 운영하시는 블로그의 모바일 기기 화면에서 광고 내용이 일부 보이지 않는 것은 확인됩니다.

      배포하는 티스토리 스킨은 티스토리에서 제공하는 애드센스 광고 표시 기능을 기준으로 제작됩니다.
      티스토리 제공 애드센스 광고를 부착하면 정상적으로 잘 나오는 것으로 확인됩니다.

      개별적으로 직접 붙인 애드센스 광고는 광고 설정값에 따라 스킨 레이아웃과 맞지 않거나 모바일 기기 브라우저를 애드센스가 정상인식하지 못해 올바른 크기의 광고를 표시할 수 없을 수 있습니다.

      또는 표시하고 있는 애드센스 광고가 모바일 기기와는 호환되지 않는 광고일 수도 있습니다.

      개별적으로 내용에 애드센스 광고를 붙일 경우 모바일 기기용, 또는 더 작은 크기의 애드센스 광고를 부착하는 것을 추천합니다.

  • 아하.. 그런거군요. 답변 감사합니다. 새롭게 배웠네요^^

  • 배포해주셔서 정말 감사드립니다, 스킨 문제 때문에 여러모러 머리를 꽁꽁싸매고 고민하고 있었는데 이 스킨 하나로 모든게 해결되었습니다. 이렇게 많은 사람에게 도움이 되는 스킨 만들어주셔서 너무 감사드립니다. 복받으실겁니다~~

  • 익명 2021.12.20 09:02 댓글주소 수정/삭제 댓글쓰기

    비밀댓글입니다

  • 안녕하세요
    지금 적용되어있는 스킨은 어떤 디자인인가요?

    • 지금 적용되어 있는 스킨이란건 제 블로그를 말하는건가요?
      제 블로그 스킨은 초창기에 배포하던 오래된 스킨입니다. 스킨에서 불필요한 부분을 다 떼어내고 쓰는 상태입니다.

      기반으로 해서 최신 스킨으로 배포하고 있는 것이 117 심플리트 스킨입니다.
      다음 글을 참고하시면 됩니다.

      https://blogpack.tistory.com/1106
      https://blogpack.tistory.com/963

  • 안녕하세요 잘쓰겠습니다.

  • 안녕하세요?
    혹시 배포하신 스킨의 본문 폭이 얼마나 되는지 알 수 있을까요?
    반응형 스킨을 처음 적용해볼까 생각중인데... 오래 쓰던 스킨의 본문 폭(630px)과 차이가
    많으면 어쩌나, 하는 것이 신경이 쓰이네요...

    • 기본설정에서는 640px입니다.
      오른쪽 사이드바 너비를 50px 줄이는 옵션을 켜면 690px로 넓어집니다.

      새로운 티스토리 에디터는 너비 개념이 없습니다.
      이전에 작성하신 글들이 630px에 맞춰서 특별히 너비를 제한해서 작성한게 아니면 본문 너비에 대한 고려는 크게 하지 않아도 됩니다.

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

    비밀댓글입니다

    • 스킨의 style.css 파일에서
      위에서부터

      .post-item .title 을 검색해서 처음 나오는 클래스에서

      .post-item .title {
      display: block;
      display:-webkit-box;
      -webkit-line-clamp: 1;
      text-overflow: ellipsis;
      -webkit-box-orient:vertical;
      overflow:hidden;
      max-height: 1.7em;
      font-family: 'Noto Serif KR', serif;
      font-size: 1.1875em;
      font-weight: 600;
      line-height: 1.475;
      color: #101010;
      margin-bottom: 18px;
      }

      세번째
      -webkit-line-clamp: 1;
      "2"로 변경

      일곱번째
      max-height: 1.7em;
      "3.4em" 으로 변경

      하면 2줄 제목에서 잘립니다.

      커버 페이지를 사용하는 경우

      .cover-list ul li .title

      클래스를 위에서부터 찾아서 처음 나오는 클래스를 동일하게 수정해주면 됩니다.

  • 익명 2022.06.15 13:54 댓글주소 수정/삭제 댓글쓰기

    비밀댓글입니다

  • 안녕하세요
    119 메트로 스킨을 사용하려고 하는데
    혹시 본문 너비를 730px정도로는 할 수 없을까요?

    고맙습니다

    좋은 하루 보내세요

    • 스킨 원본 기준 style.css
      211행
      #wrap 클래스에서
      너비를 1260px 에서
      1300px로 바꾸면 됩니다. (좁은 사이드바 250px 기준)
      넓은 사이드바(300px)를 사용하는 경우 1350px로 변경해주면

      본문 영역의 여백을 제외한 컨텐츠 영역 너비가 730px가 됩니다.

  • 감사합니다 적용했는데 맘에 드네요





❌ 닫기