본문 바로가기

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

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

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



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

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



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


 





스킨 옵션 설정

 

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



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



 

패치 내역

 

  • 2020-05-15 1.0.1 패치 - 반응형 모바일 화면 스크롤시 블로그 타이틀이 2줄 이상일 경우 타이틀이 밀려 내려가는 현상 개선


설치 주의사항

 

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


  • 이전 댓글 더보기
  • 먼저 좋은 스킨 자료 감사 드립니다.
    정말정말 마음에 듭니다.
    모바일에서 보여지는 부분에 대해 궁금한게 있는데요..
    홈에서 글과 글 사이에 공간에 저는 왜 엄청 벌어질까요...?
    아시면 답변 부탁 드립니다. 꾸벅

    • 확인해봤는데 벌어지는 현상은 없습니다.

      실기기에서도 별 문제는 없어 보이고...

      모바일 브라우저를 크롬이나 애플, 삼성 내장 브라우저 계열이 아닌 것으로 볼 경우 약간씩 호환성 문제가 있을 수는 있습니다.
      다만, 글 사이에 간격이 벌어지는 현상은 없을 것으로 생각됩니다.

  • 답변 감사 드립니다. 무튼 넘 맘에 들어요^^

  • 비밀댓글입니다

    • 광고 이미지가 잘리는 것 때문에 정책 위반에 걸리지는 않습니다.
      다만 노티스나 경고가 올 수는 있습니다.
      경험상 인접한 클릭 영역과 너무 가깝거나 중복된다는 경고가 옵니다.
      알아서 수정해라 뭐 그런 정도일 겁니다.

      모바일 사이드바 전체 영역이 308px이고
      좌우로 10px씩 패딩이 있는데
      애드센스 300px 너비인걸 카테고리 영역 안에 붙이면서 카테고리 영역 안에 좌우 15px 패드가 더 붙으면서 총 25px가 왼쪽에서 밀려서 애드센스가 표시됩니다.
      308-25=283px가 최대 표시가능 영역인데 300px짜리가 애드센스여서 17px만큼 잘리게 되는 것입니다.

      구지 꼼수를 써서 위치를 조정해주자면
      사이드바 애드센스를 붙인 최외곽 태그에 클래스로 module_plugin 이 정의되어 있는데
      style.css 모바일 영역(타블렛 영역 포함)
      클래스 정의 위치에

      .module_plugin{
      margin-left: -21px;
      }

      를 추가해주면 애드센스가 왼쪽으로 강제로 21px만큼 이동하면서(좌우로 4px씩 여백이 붙은 애드센스로 고정) 대충 위치가 맞게 됩니다.

      현재 적용한 style.css 기준 2159행

      @media screen and (max-width:1023px) {

      밑줄에 위의 클래스를 추가해주면 될 것 같습니다.

      해보시고 원하는 결과가 안나오면 다시 문의를 해주시기 바랍니다.

    • 애드센스 정책 위반에 안걸린다니 다행 입니다. ^^

      일단 말씀하신 부분에
      .module_plugin{
      margin-left: -21px;
      }
      를 추가해 두었습니다.

      친절한 답변 감사합니다.

    • 확인해봤는데..
      여전히 잘립니다.
      반응형이라 너비가 넓어지니까 모바일 사이드바가 아니라 모바일 전체 영역 너비로 애드센스 가로 크기를 키우는 현상이 생깁니다.

      번거롭겠지만, 시행착오를 좀 해야 하지 않나 싶습니다.

      margin-left: -21px;

      밑에줄에 속성을 하나더 추가해보세요.
      width: 300px;

      를 추가해서 광고가 잘리지 않으면 되겠지만...

      안되면

      margin-left: -25px;
      width: 308px;

      로 둘다 변경해서 광고가 넘치지 않는지 확인해보시기 바랍니다.

      애드센스 광고 어떤걸 붙이신건지도 알려주시면 좋겠습니다.

      300x600광고라고 코멘트가 달려있어서 그런줄 알았는데
      실제 크기는 375x312 로 반응형으로 붙고 있어서 어떤 광고가 붙은건지 구분이 안되서 그렇습니다.

    • 제가 이 시간에 퇴근해서 답글이 늦었습니다.

      처음 알려주신 코드
      .module_plugin{
      margin-left: -21px;
      }를 입력하고 애드센스 코드를
      <style>
      .example_responsive_1 { width: 300px; height: 300px; }
      @media(min-width: 500px) { .example_responsive_1 { width: 300px; height: 300px; } }
      @media(min-width: 800px) { .example_responsive_1 { width: 300px; height: 600px; } }
      </style>
      <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
      <!-- example_responsive_1 -->
      <ins class="adsbygoogle example_responsive_1"
      style="display:inline-block"
      data-ad-client="ca-pub-9119887489704436"
      data-ad-slot="3768987230"></ins>
      <script>
      (adsbygoogle = window.adsbygoogle || []).push({});
      </script>
      로 입력해서 문제를 해결했습니다.

      크게 문제 없겠지요..?


    • 네 잘나옵니다.
      실기기에서도 문제없이 잘 나옵니다. ^^/

  • 잘 설치했어요 너무 감사합니다
    스킨을 바꿀때마다 메타 태그 같은 건 계속 추가를 해줘야 되는 거죠?

  • 이 스킨은 아니지만 제작자님 스킨 사용중입니다 너무 만족해요 감사합니다!!!!

  • 덕분에 잘 사용합니다~~ㅎㅎ
    한가지 궁금한게 있는데 댓글창 크기만 따로 조정할 수 있을까여??
    같이 묶여있는거 같아서요!

    • 댓글창이라는게 어떤걸 말하는건가요?

    • 댓글창이라고 하신걸로 봐서는 아마도 팝업으로 별도 창으로 뜨는 댓글창 크기를 말하는게 아닌가 추측.. 이 되는데, 티스토리 시스템에서 제어하는거라서 스킨단에서 어떻게 할 수 있는게 아닙니다.

      이게 아니고 댓글 목록 너비를 조정하고 싶은거면

      style.css 에서

      .comments {

      를 위에서부터 찾으면 속성으로 max-width 너비값이 설정되어 있습니다. 이걸 원하는 크기로 줄여주면 됩니다.

    • 아아~ 감사합니다!! 해볼께요 ㅎㅎ

  • 지금 쓰는 댓글창 크기요!

  • 안녕하세요?
    블로그에 적용했는데, 아이폰에서 화면이 이상하게 보입니다.
    오른쪽 사이드바가 왼쪽의 글 목록을 덮어 글목록이 하나도 보이지 않습니다. 블로그 전체화면을 다 차지합니다.
    무슨 까닭일까요?

    • 스킨 붙이고 광고들을 붙이면서 자바스크립트 코드를 잘못 붙여서 스킨에 포함된 script.js 파일이 정상적으로 로딩되지 않습니다.
      데스크탑 화면은 별 문제 없는데, 모바일 화면은 사이드바 메뉴나 기타 여러가지 것들이 자바스크립트로 제어되기 때문에 사이드바 메뉴가 표시된채로 고정되어 보이는 현상이 나타나는 겁니다.
      skin.html 에서

      <script>var tjQuery = jQuery.noConflict(true);</script>

      이걸 찾아서 지워보시기 바랍니다.
      티스토리 스킨 시스템에서 기본으로 쓰는 제이쿼리 축약어 $ 를 재정의하는 건데 이거때문에 에러가 나는 것으로 보입니다.

    • 답글 감사합니다. ^^

      그런데 찾아서 지우려해도 말씀하신 <script>var ....</script>부분이 보이지 않네요.
      제가 구글 메타 태그와 애드센스 코드를 넣기 전 원본을 봐도 찾을 수가 없습니다.

  • 애드센스 광고 코드를 지우면 괜찮아집니다.
    하지만 다시 넣기만 하면 역시 사이드바가 사라지지 않고 전면을 다 가립니다.
    자동광고나 수동으로 넣는 디스플레이 반응형 광고 모두 마찬가지입니다.

    • 스킨을 재적용해서인지는 모르겠는데, 문제가 된 자바스크립트 코드는 더 이상 보이지 않습니다.
      애드센스를 붙이거나 다른 코드를 더 붙여넣으면서 붙이면 안되는 코드가 붙었던것 으로 보입니다.
      현재는 모바일에서 메뉴도 정상적으로 보입니다.

  • 비밀댓글입니다

  • 올려주신 스킨으로 새롭게 변경해봤는데 PC에서 티스토리
    블로그 볼때 사진이 2장으로 겹쳐보입니다 해결 방법이 있을까요?

  • 이 스킨 너무 깔쌈하고 맘에 듭니다....3일동안 스킨 적용하고 뭐 한다고.눈알이 아픈데..

    어포스트님 덕분에 깔끔하게 이사완료 비스므리하게 해놨습니다.ㅋㅋ 정말 감사합니다..^^

  • Chrome에서 index.xml 파일을 업로드하면 로딩이 계속되고 업로드가 되지 않는데 저만 그런가 봅니다?ㅠ

  • 어제부터 잘사용하고 있습니다. 그런데 글 너비or 본문페이지 를 조정하고싶은데 어떻게 해야할까요?

  • 글 이전스킨에서썻던게 확대가되어 가독성이 떨어지더라구요 자동으로 넓어지는거 같은데 어떻게 수정하나용??ㅠㅠ

  • 좋은 스킨 배포해주셔서 정말 감사합니다~^^

  • 어포스트님꺼 오전까지 썼었는데 성격이 급해서 맞는걸로 바꿨어요ㅠㅠ

  • 좋은 스킨 감사드립니다.

  • 오늘 117 스킨을 적용하였는데요. 일치하는 콘텐츠 광고가 모바일에서는 나오지 않고 있는데요. (PC에서는 나오고요. 본문상단, 사이드바고정형300x300 적용되어 있습니다.) 광고는 플러그인으로 적용하였습니다. 이 부분에 대한 해결방법이 있을까요?
    매번 감사드립니다.

    • 모바일에서 광고 표시됩니다.
      실기기에서도 나옵니다.
      안나오는 경우 빈공간으로 표시는 것은 애드센스가 미표시를 하는 것입니다.(글에 컨텐츠가 없거나, 광고 표시 기준에 맞지않거나.. 기타 등등)
      스킨과는 무관한 문제입니다.
      실기기에서 리프레시 몇번 해보거나 올린지 오래된 글들을 확인해보면 어쩌다 나오는걸 확인할 수 있을 겁니다.

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


닫기