본문 바로가기

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

티스토리 스킨 - 반응형 스탠다드2단 티스토리 스킨 배포합니다.

스킨명: 반응형 스탠다드 2단


오른쪽에 사이드바가 위치하는 표준 형태의 티스토리 스킨입니다.

레이아웃 전체 너비는 960px, 컨텐츠 내용 너비는 630px 입니다.



스킨 주요 특징


1. 티스토리 커버 기능 전체 지원

2. 사이드바 기능 지원

3. 반응형 스킨으로 모바일 완벽 지원

4. 2가지 컬러 테마(오렌지, 네이비) 지원

5. 벡터 스킨 아이콘 사용으로 화면 해상도와 무관하게 고화질 아이콘 표시. 아이콘 이미지 업로드 불필요

6. 메인 커버 슬라이더 자동 스크롤 지원

7. 스킨에 사용한 글꼴은 구글 오픈 글꼴인 노토산스KR 입니다.







컬러 테마를 변경하려면 커버 설정에서 컬러 메타 항목의 색상을 선택하면 됩니다.












설치 주의사항


1. index.xml 파일을 반드시 업로드해야 합니다. 티스토리 신스킨은 스킨 옵션 설정을 위해 반드시 이 파일이 필요합니다.


2. script.js 파일 업로드 후에는 웹브라우저 캐시 소거를 한번 해주시기 바랍니다. 브라우저 환경에 따라 구 사용 스킨의 자바스크립트 파일이 캐시에 남아 자바스크립트가 정상 동작하지 않는 경우가 있습니다.

사이드바 메뉴가 펼쳐지지 않는다거나 할 경우 캐시 소거를 하면 됩니다.


3. 스킨 레이아웃 전체 너비를 변경하려면 style.css 파일에서 960을 검색하면 5개가 나오는데 이 값을 원하는 전체 너비로 수정한 후, 본문영역(632행), 사이드바영역(430행) 너비를 변경해주면 됩니다.

사이드바 영역은 기본 설정이 300px 이며 가능하면 변경하지 않는 것을 추천합니다.

본문영역은 전체너비 - 사이드바영역 을 해서 나머지 값을 입력하면 됩니다.




025_standard2layer.zip


스킨 다운로드
스킨 설치 방법



  • 감사합니다^^ 혹시 컨텐츠 내용 너비는 조절이 안되나요?

    • 되기는 하지만 스킨 초보시면 수정이 조금 까다로울 수 있습니다.
      이 스킨은 구조가 복잡해서 잘못 만지면 레이아웃이 깨질 수 있습니다.
      손봐야하는 부분을 확인해서 알려드리겠습니다.
      조금만 기달려 주삼.

    • 감사합니다!! 스킨 초보입니다. 지금 다른 스킨 적용해서 쓰고 있는데 마음엔 안들어요 ㅜㅜ 알려주시면 감사히 쓰겠습니다~!!

    • 스킨 style.css 기준으로

      960을 검색하면 5개가 나옵니다.
      이 값을 원하는 최종 너비로 변경합니다.

      기본스킨은
      컨텐츠 영역 너비는 660px
      사이드바는 300px
      로 설정되어 있습니다.

      사이드바는 가능하면 변경안하는게 좋고,
      컨텐츠 너비만 조정하는 걸 추천합니다.

      컨첸츠 영역 및 사이드바는 너비값에 좌우 15px 씩 여백이 있습니다.

      따라서 기본스킨 기준 660px 너비에는 좌우 15px씩 해서 30px가 여백으로 포함되어 있기 때문에 실제 컨텐츠 영역은 630px 가 됩니다.

      컨텐츠 영역을 100px 넓혀 760px로 넓히려면(실제 컨텐츠 너비는 730px) 최종 전체 스킨 너비는 + 100 해서 1060px 가 됩니다.

      검색한 960 5개를 1060으로 변경
      사이드바와 컨텐츠 영역 너비는 퍼센트값으로 설정되어 있습니다.
      style.css 기준
      컨텐츠 영역은 632행
      사이드바는 430행의
      퍼센트 값을 변경하면 됩니다.

      퍼센트값은 760 / 1060 과 같이 해당 영역 나누기 전체 너비로 해서 구하고, 정확하게 픽셀로 떨어뜨릴려면 소숫점 6자리까지는 입력을 해주는게 좋습니다.

      예를들어
      전체 너비가 1060이면
      71.875% -> 71.698113% 632행 - 본문영역
      28.125% -> 28.301886% 430행 - 사이드바

      이런식으로 변경해주면 됩니다.

      픽셀단위로 값을 입력해도 되지만, 모바일 레이아웃이 깨지게 되기 때문에, 반드시 퍼센트값으로 나누기 값을 구해서 입려하는 것을 추천합니다.

      이렇게 하면 레이아웃 최종 너비가 1060으로 넓어지게 됩니다.
      컨텐츠 영역은 760px(실제 내용 영역은 730px) 이 되고, 에디터 너비를 변경해야 하므로
      관리자 화면 컨텐츠-설정에서
      "글 영역과 이미지 크기 등에 영향을 주는 글쓰기 가로폭" 을 730으로 변경해주면 완료됩니다.

    • 비슷한 느낌에 레이아웃이 다른 새 스킨이 올라가 있습니다.
      "반응형 프레스 베이직 2단)"
      마음에 드는 걸로 쓰세요.

    • 감사합니다^^ 수정해서 적용했습니다!!
      잘 사용할게요~!!

  • 카테고리 다른글 보기 적용중인데 문제는 다른글 링크 클릭이 안되요 클릭가능한상태면 손가락 모양으로 커서가 바껴야하는데 안바뀌네요 왜이런거죠?

    • 이 스킨을 적용하고 계신건가요?
      현재 운영중인 블로그는 다른 스킨인 것으로 보입니다.

      카테고리의 다른글 목록은 스킨에서 생성하거나해서 뿌리는 영역이 아닙니다. 티스토리 서비스에서 글 내용과 함께 시스템상에서 뿌리는 내용이고 일반적으로 스킨에서는 임의롤 조작하거나 수정을 하는 경우는 거의 없습니다.

      제 스킨에서도 이 부분은 임의로 수정하지 않습니다.

      스킨 적용과 무관하게
      카테고리의 다른글 위에 붙이신 구글 애드센스의 영역 높이가 크게 잡히면서 그 밑의 카테고리의 다른글 영역 전체와 그 밑의 태그 제목 부분까지 애드센스 랩퍼 영역으로 덮여서 카테고리의 다른글 목록이 클릭되고 있지 않는 것으로 보입니다.

      애스센스 광고를 잘못붙이신 것으로 보이고 이부분을 수정하면 정상적으로 클릭이 가능합니다.

      스킨과는 무관한 내용입니다.

  • 어떻게 광고를 수정할 수 있을까요? 그리고 글 하단에 광고가 들어가는건 일반적인건데 왜 제 경우에만 랩퍼영역으로 덮히는걸까요? 너무 답답하네요

    • 본인이 적용한 스킨이 어떤건지 설명을 상세하게 하셔야 원인을 빠르게 찾을 수 있습니다.

      현재 운영하는 블로그는 티스토리 레퍼런스 스킨인 Whatever를 적용하신 것으로 보이고, 해당 스킨과 애드센스 광고가 충돌을 한 것입니다.

      정확하게는 님이 애드센스를 붙인 그자리가 하필 카테고리 관련글 바로 위여서 해당 영역이 덮이는 문제가 나타난 것입니다.
      애드센스 위젯과 해당 스킨의 호환성 문제로 나타나는 일종의 버그 또는 충돌 현상입니다.

      Whatever 스킨 기준으로 style.css 1569행, 님이 수정하신 스킨 기준으로는 1573행에(스킨을 계속 만지고 계신거 같아서 행이 변하는 것으로 보여서 정확하지 않습니다.

      .entry-content .iframe-wrap {
      position: relative;
      height: 0;
      padding-bottom: 56.25%;
      }

      내용이 있습니다.

      그중
      padding-bottom: 56.25%;

      이 부분이 티스토리 위젯 형태로 바텀에 붙이는 애드센스와 충돌을 해서 카테고리의 다른글이 덮이고 있는 것입니다.

      이속성( padding-bottom: 56.25%; )을 리마크하거나 지우면 문제는 사라집니다.

      지워도 무방한 속성입니다.(다른 레퍼런스 스킨에서는 사용하지 않는 속성입니다.)

      티스토리 레퍼런스 스킨중 Whatever 스킨에만 있는 속성이고, 다른 레퍼런스 스킨에는 존재하지 않습니다.

      제 스킨에도 이런 속성은 사용하지 않습니다.

  • 비밀댓글입니다

  • 이 스킨 잘사용하고 있습니다. 한가지 물어 볼것이 있는데요. 모바일 화면으로 넘어가면 왼쪽 상단에 가로로 선세개 있는 아이콘이 나오게 됩니다.클릭하면 카테고리가 나오더라구요 근데 이것 위치를 블로그 이름 있는 위치까지 내리고 싶은데 ccs 는 잘몰라서 어렵네요 어떤걸 수정하면 될지 좀 알려주세요 감사합니다 ^^ 최근 이 스킨 적용하고 이것저것 세팅중에 있네요~ https://sarago.tistory.com/

    • 스킨 원본 기준 style.css
      1977행

      스킨을 커스터마이징 하신걸로 보이는데
      @media screen and (max-width:1189px) {
      #header .mobile-menu {
      display: block;
      top: 40px;
      left: 5px;
      }

      요부분을 찾으시면 됩니다.
      모바일 대응 css쪽 #header .mobile-menu 입니다.

      top: 40px;

      top: 70px;
      정도로 조정해주면 적당히 맞아 보입니다.

  • 오 감사합니다~ 덕분에 쉽게 해결했습니다.
    적용하니 딱 좋네요~ ^^

  • 오 궁금증이 풀렸습니다. 너무너무 감사드립니다~ ^^

    • 댓글로 달아놓으니 내용이 좀 이해가 안되는 부분이 생기는거 같아 별도의 글로 설명을 조금더 자세히 해서 포스팅을 붙였습니다.

      보기가 조금 더 나을겁니다.

      https://apost.kr/313

  • 슬라이더가 안넘어가고 세로 연속 이미지로 나오네용 어딜 수정해야하나요? 그리고 카테고리 보면 제목 폰트를 조금 줄이고 싶은데 알려주시면 감사하겠습니다!!

    • 1.
      스킨에 script.js 파일을 업로드 안하셨습니다. 업로드하시고 웹브라우저 캐시 한번 소거하면 반영되어 보일겁니다.
      스킨의 images 폴더를 찾아보세요.

      2.
      카테고리 제목이라는게 어떤걸 말하는건지 모르겠습니다. 우측 사이드바 카테고리 명인지, 카테고리 글 목록 제목행을 말하는건지...
      후자일거 같은 생각이 들어서 후자만 일단.
      .post-item .title
      클래스를 찾아서
      font-size: 1.4em;
      이라고 된 속성이 있습니다.
      스킨 원본기준 style.css 1266행입니다.
      값을 조금씩 줄여보면서 원하는 크기를 찾으면 됩니다.
      보기에는 1.2 정도면 별 무리 없어보입니다.

    • 와 정말 감사합니다..! 천재..!