본문 바로가기

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

티스토리 스킨 117 - 반응형 2단 심플리트3

티스토리 스킨 117 : 반응형 2단 심플리트3



* 썸네일 이미지를 크게 적용한 모던한 디자인의 2단 반응형 스킨입니다.

* 썸네일 이미지 크기를 크게 설정해 인라인 스킨처럼 사용할 수 있습니다.



  • 커버 기능은 커버 리스트 기능만 제공합니다.
  • 글 목록 썸네일 위치를 왼쪽, 오른쪽 중에 선택할 수 있습니다.
  • 헤더 배경 이미지를 적용할 수 있습니다.
  • 헤더 텍스트 정렬을 왼쪽, 가운데로 설정할 수 있습니다.
  • 카테고리 메뉴를 헤더 하단, 또는 사이드바에 배치할 수 있습니다.
  • 레이아웃 전체 너비를 1240px(기본), 1140px(좁게) 설정할 수 있습니다.
  • 스킨에 포함된 index.xml 파일과 images 폴더 안의 script.js 파일 및 이미지 파일을 모두 업로드해야 스킨 레이아웃이 정상 동작합니다.


 





스킨 옵션 설정

 

스킨 옵션 설정은 티스토리 관리자 왼쪽 메뉴의 "스킨편집" 을 클릭하면 됩니다.



* 이미지를 클릭하면 옵션 항목들을 자세히 볼 수 있습니다.



 

패치 내역

 

  • 2020-05-15 1.0.1 패치 - 반응형 모바일 화면 스크롤시 블로그 타이틀이 2줄 이상일 경우 타이틀이 밀려 내려가는 현상 개선
  • 2020-06-04 1.0.2 패치 - 모바일 화면에서 초기 로딩시 사이드바 메뉴가 순간적으로 나타났다 사라지는 현상 개선


설치 주의사항

 

  • 스킨 적용시 index.xml, 그리고 images 폴더 안의 script.js 파일을 반드시 업로드해야 스킨이 정상 적용됩니다.
  • 파일 업로드 후에는 웹브라우저 캐시를 한번 소거해야 바로 스킨이 정상 반영됩니다.


  • 이전 댓글 더보기
  • 이런 스킨을 무료로 제공해주시다니 감사드니다~ 구독 공감은 항상 필수!

  • 제작자님~ 현재 이 스킨을 사용하고 있는 유저입니다. 먼저 좋은 스킨 제공해주셔서 감사합니다!
    5월 15일에 패치내역이 있다고 말씀하셨는데, 해당 패치는 제가 어떻게 적용을 해야 하나요?
    티스토리에 대해 아직 모르는게 많아 질문 드립니다. ㅠㅠ

  • 스킨 완전 깔끔하고 이뻐요.
    모바일에서 새 창 열 때 순간적으로 PC 버전의 사이드바가 오른쪽 화면에 나왔다가 없어지는데(약 0.2초 정도?) 해결 방법이 없을까요?
    그냥 써도 무방하긴 한데...

    • 증상 확인이 안되서 답변이 늦었습니다.

      스킨은 이미 바꾸셔서 의미는 없는듯한데...
      어쨋든 패치가 되었습니다.

      버그입니다.

      가벼운 블로그에 테스트를 하다보니 사이드바가 붙는게 보이지 않아서 증상 확인이 안되었습니다.

      스킨이 패치되었습니다.
      다시 다운로드받아
      style.css 만 다시 적용하셔도 되고

      style.css
      2270행
      2389행

      display: block; -> display: none;

      으로 변경하셔도 됩니다.

  • 저도 위에 분과 같은 질문입니다. 모바일로 접속하면 화면 왼쪽으로 글이 잠깐 몰려있다가 정상적으로 로딩됩니다.

    • 증상은 확인됩니다.
      스킨 디폴트 상태에서는 나타나지 않는 현상입니다.
      다른 원인이 있는거 같은데 확인을 해봐야 할 것 같습니다.
      원인지 확인되면 답글을 추가로 달아드리겠습니다.

    • 버그입니다.

      가벼운 블로그에 테스트를 하다보니 사이드바가 붙는게 보이지 않아서 증상 확인이 안되었습니다.

      스킨이 패치되었습니다.
      다시 다운로드받아
      style.css 만 다시 적용하셔도 되고

      style.css
      2270행
      2389행

      display: block; -> display: none;

      으로 변경하셔도 됩니다.

  • 블로그 처음 해볼려고 하는데 너무 막막했습니다. 좋은 스킨 공유해주셔서 감사합니다~!

  • 비밀댓글입니다

    • 링크를 시키는게 뭔가요?
      끄는거겠져?

      스킨 옵션설정 들어가서 그룹에 보면
      "sns아이콘 보기" 가 있습니다.
      이걸 끄면 sns 아이콘이 표시되지 않습니다.

  • 좋은 스킨 감사합니다. 오늘 적용해봤는데 모바일 첫화면 보니 간격이 떨어져 나오더라고요... 별도 설정이 필요한지요?

    • 간격이 떨어져 나온다는게 어떤걸 말하는 건가요?

    • 모바일 첫화면보면 컨텐츠 리스트가 쭉 나오는데 컨텐츠와 컨텐츠 사이가 이어지지 않고, 빈공간이 발생합니다.



      썸네일 등이 위처럼 나와야하는데


      = <- 빈공간

      = <- 빈공간

      이런식으로 나오네요

  • 어포스트님 117 스킨 관련 질문 드립니다. 쿠팡 파트너스 다이나믹 배너를 넣었는데요. html 배너출력 플러그인 써서 사이드 바에 넣어도 계속 풋터 밑에 들어가네요 ㅜㅜ html 편집기 들어가서 태그랑 관련글 사이에 script 넣어서 삽입해봐도 잠깐 됐다가 풋터 밑으로 빠져 버리는데 이럴땐 어떻게 만져줘야 될까요?

    • <div class="box_aside">
      //여기에 쿠팡 광고 삽입
      </div>

      사이드바는 각 섹션마다 위 태그로 감싸져서 순서에 따라 뿌려집니다.

      위 태그 밖에 있는건 레이아웃상 최상단에 겹쳐서 나오게 됩니다.

  • html 배너 출력 플러그인을 통해 알려주신 div class 로 해봤는데 동일한데 알려주신 방법은 스킨 편집의 html 편집에서 s_sidebar 부분에 입력하라는 말씀이신가요?

    • <s_sidebar_element>
      <!-- 쿠팡 다이내믹 -->
      <div class="box_aside">
      (쿠팡광고)
      </div>
      </s_sidebar_element>

      이런식으로 스킨 html에 편집해도 동일하게 풋터 밑으로 빠져버립니다 ㅜㅜ

    • <div class="box_aside">

      이걸로 skin.html 을 검색해보세요.

      다른 사이드바 엘리먼트들 어떻게 구성되어있는지 알 수 있습니다.

      <s_sidebar_element></s_sidebar_element>

      하나가 사이드바 섹션 1개입니다.

      <s_sidebar>
      <s_sidebar_element>
      <div class="box_aside">
      </div>
      </s_sidebar_element>
      <div class="box_aside">
      //쿠팡광고
      </div>
      </s_sidebar>

      이런 구조이고.. 쿠팡 광고를 붙일 위치를 찾아서 엘리먼트 태그 끝 태그와 시작 태그사이에

      <div class="box_aside">
      </div>

      를 추가해주면 됩니다.

      쿠팡광고는 티스토리 사이드바 섹션이 아니니까 엘리먼트 태그를 필요가 없습니다.

  • 어포스트님 어제 문의드린 사이드 바 계속 테스트 중에 있습니다. 이와 더불어 모든 글의 하단의 태그나 관련글 사이에 광고를 넣기 위해 아래 소스 처럼 삽입 해봤는데요. html 편집 미리보기에서는 잘나오는데 실제 사이트를 들어가면 이렇게 넣은 것도 풋터 밑으로 빠져 버리는 현상이 나타 납니다 ㅜㅜ
    <s_tag_label>안에 넣어도 그런데 이건 어떻게 넣어야 해결될까요 ㅜㅜ

    <s_tag_label>
    <div class="tags">
    <h2>태그</h2>
    <div class="items">

    </div>
    <!-- 쿠팡 파트너스 -->
    (광고 script)
    </div>
    </s_tag_label>

    • 조정을 하신건지 현재는 쿠팡광고가 제대로 보이고 있습니다.
      제대로 붙이신걸로 보입니다.
      다른 블로그에 테스트해봤는데, 쿠팡광고 코드 자체에는 별 문제는 없어보입니다.
      알려드린대로 붙이면 배치하는데 별 문제 없이 잘 붙습니다.

  • 어포스트님 봐주셨을땐 정상이 었던것 같은데요.
    정말 이상한게 새로고침하거나 페이지를 옮길 때마다 잘돼어있는 경우도 있고 풋터 밑으로 사이드만 빠지는경우 혹은 둘다 빠지는 경우 정말 다양하게 발생하는 것 같습니다 ㅜㅜ
    제 가장 최근글인 아래 주소글만 해도 새로고침 하거나 관련글을 통해 다른 페이지를 갔다오면 다시 빠져있습니다 ㅜㅜ
    https://06012014.tistory.com/77

    그리고 아래 글은 과거 글인데 풋터 밑에도 광고가 안빠져있는데도 태그 부분에 광고가 안나오고 있습니다. 글마다도 다르고 정확한 원인을 제 수준에선 알 수가 없네요 ㅜㅜ
    https://06012014.tistory.com/70

  • 좋은 스킨 감사합니다!

  • 좋은 스킨 공유해주셔서 감사합니다.
    이 스킨을 사용한 블로그에 댓글 기능을 완전히 없애고 싶은데 어떤 코드를 삭제하면 될까요?

  • 웬만한 유료 스킨보다 훨씬 좋네요. 좋은 스킨 사용하게 해주셔서 감사합니다.^^

  • 비밀댓글입니다

    • 보이지 않는다는게 상단으로 이동했다는 뜻인가요? 아니면 카테고리가 아얘 안보인다는 건가요?

      웹브라우저 캐시를 소거하고 확인을 한번 해보시기 바랍니다.

      카테고리가 보였다 안보였다하는 버그는 현재까지는 없는 것으로 알고 있습니다.

      보통은 다른 스킨에서 변경한 후 초기에 자바스크립트 캐시가 남아서 잠깐 이상 동작을 하는 것처럼 보일 수 있습니다.

    • 2020.07.01 08:13 댓글주소 수정/삭제

      비밀댓글입니다

  • 비밀댓글입니다

    • style.css
      1808행부터가 본문 스타일 영역입니다.
      1986행까지 있는 클래스의
      font-size: ...em;
      으로 정의한 속성들이 글 영역에 사용하는 각종 html 태그 요소들의 글자 크기입니다.
      개별적으로 조정해주면 됩니다.
      잘 모르겠으면 .entry-content p{
      font-size: 0.9375em;
      }
      으로 정의한 글자 크기값을 키워서 어느 부분이 커지는지 확인해보면 됩니다.

      em 단위에 대해서는
      https://apost.kr/320
      이 글을 보시면 되고..

      일일이 조정하기 번거로우면
      1808행
      .entry-content{
      }
      클래스에 글자크기 속성을 추가해주면 글내용 영역 전역으로 전체 요소들이 상대적으로 배율이 조정됩니다.



      em 단위는 상위에 지정된 글자크기에 상대적으로 배율로 크기를 지정하는 단위입니다.
      .entry-content{
      }
      는 기본 크기인 1em 이고 이 크기가 16px 입니다.
      .entry-content p{
      font-size: 0.9375em;
      }
      으로 정의한 문단 기본 크기는 15px가 되는 구조입니다.

      .entry-content{
      font-size: 1.0667em;
      }
      으로 글자 크기 속성을 지정해주면
      그 하위에 있는 글자 크기들이 약 1px씩 모두 커집니다.

      그래도 작으면 1.067em;
      을 조금씩 크게해서 적당한 크기를 맞춰서 사용하면 됩니다.

      em 단위 사용이불편하면
      1808행 ~ 1986행 까지 정의한 font-size 속성을 px 단위로 모두 변경해서 원하는 크기로 커스터마이징을 해주면 됩니다.

  • 감사합니다^^ 요즘 수익이 안나서 너무 고민이 됩니다.. ㅜㅜ

    • 코로나 때문에 애드센스 광고 수익이 전반적으로 다들 줄어든 것으로 알고 있습니다.
      최근 들어서 서서히 회복 되는 것으로 보여서 조금씩 나아지지 않을까 싶습니다.

  • 네 ㅜㅜ 위로 그리고 현실 감사드립니다.. 혹이 지금 이 스킨 말고 어포스트 스킨중에 추천 하실만한게 있을까요??

  • 비밀댓글입니다

    • 1. 국내 사파리 사용자가 극소수이고, 맥os기종 외에는 현재는 사파리 브러우저는 테스트도 불가능합니다.(윈도우용이 더이상 배포되지 않습니다.)
      다만, 사파리라고 특별히 다르게 보이지는 않을것으로 예상됩니다.
      상단의 메뉴를 클릭하면 나오는 썸네일 리스트(메뉴에는 카테고리만 나오는걸로 보이는데...)가 어떤걸 말하는 건지 모르겠습니다.
      질문을 다시 해주시면 확인해드리겠습니다.

      2.
      버그입니다.
      이전에 스킨패치를 하면서 안쓰는 옵션을 삭제했는데, html 파일에 해당 내용이 적용되지 않으면서 사이드 이펙트가 발생했습니다.
      기본옵션 상태에서만 테스트를 해보고 그냥 올린게 아닌가 싶습니다.

      skin.html 파일 11행

      <s_if_var_color-type>[샵샵_var_color-type_샵샵]</s_if_var_color-type>

      이걸 삭제하면 됩니다.


      스킨 파일이 패치되서 재업로드되었습니다.
      다운로드 받아서 재적용해도 됩니다.

    • 2020.07.27 11:20 댓글주소 수정/삭제

      비밀댓글입니다

    • 스킨 자체는 웹표준을 준수하기 때문에 특별히 윈도우용이라고 다르게 보일건 없습니니다.
      구브라우저인 인터넷익스프로러에서도 목록 사이가 벌어진다거나 화면 레이아웃이 안맞는 현상은 없습니다.

      윈도우용으로는 상당히 구버전인 사파리 5.1.7까지만 설치가 가능한데, 말씀한 증상은 나타나지 않습니다.

      아마도 최근버전 사파리에서만 나타나는 증상으로 보이고, 사파리의 호환성 문제가 아닌가 추측됩니다.

      화면 캡쳐를 해서 올리셔도 맥에서 직접 디버깅을 해보지 않는 이상은 문제 해결은 어렵습니다.

      좀 많이 번거롭겠지만, 적용하신 제 스킨 문제인지 확인하려면, 현재 적용한 스킨을 백업하시고, 현재 댓글을 달고 있는 117 반응형 2단 심플리트3 를 적용해서 마찬가지로 목록 사이가 맥os 사파리에서 벌어지는지 확인해보는 방법이 있습니다.

      같은 현상이면, 맥용 사파리의 호환성 문제라고 봐야하고...

      아니면 현재 적용하신 스킨의 css 레이아웃이 맥용 사파리에서 사용하면 안되는 방식으로 높이나 레이아웃 속성을 사용해서 나타나는 것입니다.

      전자이면, 아마도 다른 제작자분들의 스킨도 대부분 같은 증상을 보일겁니다. 대부분 비슷한 구조를 쓰기 때문에...

      후자이면, 다른 스킨 제작자분의 스킨이나, 또는 티스토리에서 배포하는 공식 레퍼런스 스킨을 사용해볼 것을 권합니다.

      테스트를 해볼 수 있으면 좋겠는데, 여건이 안되서 도움을 더 드리지 못해서 아쉽습니다.

    • 스킨 백업은 반드시 하셔야 합니다. 그냥 새스킨 적용하면 현재 스킨에 커스터마징한 것들이 모두 날라갑니다.

    • 2020.07.27 14:45 댓글주소 수정/삭제

      비밀댓글입니다

    • 블로그에 가봤는데 두번째 패치는 저는 잘 적용되어 보입니다.
      목록에 글이 10개단위로 뿌려지기 때문에 10개가 초과되어야 더보기 버튼이 보입니다.

      카테고리 선택에서 "전체글보기" 를 선택하면 더보기가 보입니다.

    • 2020.07.27 19:27 댓글주소 수정/삭제

      비밀댓글입니다

    • 문제가 없는 공식 레퍼런스 스킨이 어떤건가요?
      비교 확인을 해서 원인을 찾아보겠습니다.

    • 2020.07.28 08:39 댓글주소 수정/삭제

      비밀댓글입니다

    • 스킨을 재패치 했습니다.
      번거롭겠지만, 스킨을 다시 다운로드 받아 테스트 해보시기 바랍니다.
      실제 사파리 테스트가 안되기 때문에 문제가 없다고 하신 레퍼런스 스킨을 기준으로 몇몇가지 부분을 조정했습니다.

      글 목록 부분만 패치되었고, 커버페이지리스트 쪽은 그대로이므로, 카테고리 글목록에서 확인하셔야 합니다

      여전히 같은 상태이면, 실제 디버깅이 가능한 맥이 있기 전에는 원인을 알기 어려울 것 같습니다.

    • 2020.07.29 07:16 댓글주소 수정/삭제

      비밀댓글입니다

    • 2020.07.29 09:16 댓글주소 수정/삭제

      비밀댓글입니다

    • 버그입니다.
      스킨 패치를 했습니다.
      스킨 파일 다운로드받으신 후
      스킨편집기 화면에서 html 과 css 파일만 새로 적용하면 됩니다.
      xml은 업로드 하지 마시기 바랍니다. 스킨 설정한게 초기화됩니다.

    • 2020.07.29 10:34 댓글주소 수정/삭제

      비밀댓글입니다

    • 블로그 가봤는데 정상 적용된걸로 보입니다.
      슬라이드에 거는 링크 url은 슬라이더 옵션 설정에 들어가서 링크걸 url을 본인이 직접 입력해줘야 합니다.

      스킨편집 들어가서
      슬라이더 이미지 수정한 폼으로 들어가면 URL 필드가 별도로 있습니다.
      링크 입력하고 확인/저장/적용 해서 반영하면 클릭 링크가 동작할 겁니다.

    • 2020.07.29 11:10 댓글주소 수정/삭제

      비밀댓글입니다

    • 2020.07.30 11:10 댓글주소 수정/삭제

      비밀댓글입니다

    • 스킨 커스터마이징은 해드리지 않습니다.
      스킨 배포 초기에 잠깐 지원을 했었던 것이고 현재는 하고 있지 않습니다.

      편의상 댓글로 문의하는 간단간단한 스킨 조정 정도만 예외적으로 지원해드리고 있습니다.

    • 2020.07.31 09:57 댓글주소 수정/삭제

      비밀댓글입니다

    • 해당스킨은 카카오 블로그와 같은 구조를 본떠 만든 스킨으로 카테고리 외 사이드바 항목들이 애초에 표시되지 않는 스킨입니다.

      사이드바 항목들이 표시되는게 별 문제는 되지 않을 것 같아 사이드바 항목들이 카테고리 밑에 표시되도록 패치를 했습니다.
      skin.html, style.css 파일만 재적용 하면 됩니다.

      재적용 후 꾸미기-사이드바에 들어가면 사이드바 항목들이 표시될 겁니다.

      다만 오래된 구 스킨이기 때문에 최근글/인기글에 썸네일 이미지를 표시하는 기능등은 지원이 되지 않습니다.
      해당 기능들을 추가하게되면 스킨 레이아웃과 구조가 바뀌어야 해서 기본적인 패치로는 해결이 되지 않습니다.

    • 2020.07.31 22:39 댓글주소 수정/삭제

      비밀댓글입니다

  • apost님 안녕하세요 스킨 잘 사용중입니다. 정말 감사드립니다!!!! 복받으실거에요 ㅋㅋ

    아래는 제가 작성한 [apost 블로그] 추천 포스팅 입니다. ㅋㅋㅋ
    https://mad-i.tistory.com/572?category=919702


닫기