본문 바로가기

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

티스토리 스킨 086 - 반응형 3단 트리플 스킨 배포합니다.

반응형

스킨 086 : 반응형 3단 트리플


- 반응형 3단 스킨으로 사이드바에 많은 위젯을 표시할 필요가 있을 경우 추천하는 스킨입니다.

- 30가지 이상의 스킨 옵션을 이용해 다양한 디자인으로 변경할 수 있습니다.

- 컨텐츠 표시 영역을 좁게(640px) , 기본(740px) , 넓게(840px) 설정할 수 있습니다.

- 카테고리를 사이드바, 또는 탑메뉴에 위치시킬 수 있습니다.

- 왼쪽 사이드바와 오른쪽 사이드바 위치를 서로 바꿀 수 있습니다.

- 다양한 커버 타입을 지원하는 커버 페이지를 만들 수 있습니다.

- 스킨에 포함된 index.xml 파일과 images 폴더 안의 script.js 파일을 업로드해야 스킨 레이아웃이 정상 동작합니다.

 

 








스킨 옵션 설정

 

스킨 옵션 설정에 대한 상세한 설명은 ->스킨 옵션설정 글을 보시기 바랍니다.(일부 옵션 항목은 제외되어 있습니다.)






A. 사이드바 좌우 위치 반전





B. 카테고리 위치 변경





C. 컨텐츠 영역 너비 설정





 

패치 내역

 

  • 2020-02-18 ver 1.0.1 Patch - 카테고리를 사이드바에 위치하고 SNS아이콘 표시를 켤 경우 카테고리 메뉴가 사라지는 버그 해결












설치 주의사항

 

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




반응형
  • 먼저 이런 스킨 배포해주셔서 감사합니다.
    그런데 궁금한 게 있는데요...
    저는 2단으로 쓰고 싶어서 오른쪽 사이드를 안보이게 했거든요.
    필요한 것만 왼쪽으로 옮기고요.
    그리고 나니 휭해서요 모니터에 맞게 내용부분을 넓히고 싶은데 어떻게 해야 하나요??
    알려주시면 감사하겠습니다~~

    • 3단 전용 스킨입니다.
      2단으로 강제 수정하면 레이아웃 손을 많이 봐야 합니다.

      082 2단 대시보드 스킨
      https://apost.kr/462

      매거진B 스킨
      https://apost.kr/391?category=798147

      정도를 추천합니다.

      그외에 2단이 유사한 스킨이 많으므로 그걸 추천합니다.

      구지 강제로 조정해 쓰겠다면
      아래 몇가지 설정 조정을 통해
      컨텐츠 영역을 강제로 넓혀줄 수는 있습니다.
      스킨 원본 style.css 기준

      1.
      1057행(#content)
      width: 100%
      속성 삭제

      2.
      스킨 원본기준 1055행 ~ 1067행의

      max-width:

      속성값 숫자에
      280을 더해주면 됩니다.
      현재 스킨 옵션 설정으로는
      .wide-content #content
      클래스가 직접 영향을 줍니다.(이 클래스의
      max-width 속성을 1100으로 조정합니다.)

      3.
      그리고 현재 좌우 사이드바를 반전해서 안보이게한 왼쪽 사이드바를 아얘 안보이게 해야합니다.

      785행
      .sidebar-left.sidebar
      클래스에
      display: none;
      속성을 추가합니다.

  • 감사합니다~~

  • 좋은 스킨을 배포해주셔서 감사합니다.

    글을 보고 따라해서 적용하였는데, 카테고리 위치를 사이드바로 변경하였는데 카테고리가 표시되지 않네요. 혹시 왜 그런지 알 수 있을까요?

  • 배포해주신 스킨 잘 쓰고 있습니다. ^^
    그런데 질문이 있습니다.
    글 목록을 보면 글 제목 있고 그 아래줄에 날짜가 나오잖아요.
    날짜를 다음 줄이 아닌 제목과 같은 줄 오른쪽 끝에 맞춰서 나오게 하려면 어떻게 해야 하나요?
    html에서 <div class="article-info"> 이 부분을 수정하면 될 것 같은데 잘 모르겠습니다..

    그리고 코드를 복사해서 올리면 일부분이 지워져서 보이는 건 왜 그런건가요??

    <div class="article-info">
    <span class="title"></span>
    <s_if_var_view-thumbnail-date>
    <span class="date">
    <s_if_var_short-date></s_if_var_short-date>
    <s_not_var_short-date></s_not_var_short-date>
    </span>
    </s_if_var_view-thumbnail-date>
    <s_if_var_view-thumbnail-excerpt>
    <span class="excerpt"></span>
    </s_if_var_view-thumbnail-excerpt>
    </div>

    위 코드에서도 [## _article_rep_date_##]은 표시가 안됩니다.

    • 1
      스킨 치환자는 티스토리 시스템 레벨에서 차단되어 있습니다.
      샵샵 으로 변경해서 올려야 합니다.


      2.
      날짜 표시 위치 조정은

      style.css

      1974행
      .post-item .title 클래스

      display: block -> inline-block; 으로 변경

      display: -webkit-box; 삭제(필수)

      max-width: 220px; 추가-이 너비는 옵션 설정에서 컨텐츠 영역으로 설정한 너비값에서 -400px 정도를 한 값이 됩니다.
      제목이 길어지면 날짜와 겹쳐지기 때문에 강제로 잘라내기 위한 것입니다.
      잘라내지 않고 제목이 줄바꿈으로 모두 표시되게 해주려면
      overflow: hidden; 을 삭제해주면 됩니다.


      2011행
      .post-item .date 클래스

      display: block; -> inline; 으로 변경
      float: right; 추가
      margin: 0 0 10px; -> margin: 3px 0 7px;로 위아래 간격 조정 변경


      하면 날짜가 오른쪽 끝으로 정렬되어 붙습니다.
      css 특성을 이용한 일종의 신박한 트릭인데 보통은 이렇게 글 흐름과 무관하게 배치하는게 그렇게 권장되지는 않습니다.

    • ie에서는 브라우저 구조적인 문제로 제목 글자(한글)가 잘려보일 수 있습니다.

  • 감사합니다~~~

  • 스킨 배포 감사합니다!!

  • 매우 깔끔하고 좋은 스킨 배포해주셔서 감사합니다! 0ㅂ0//

    그리고 스킨에 버그가 있는거 같아 댓글 남깁니다.
    [스킨편집] 에서 [레이아웃 -> 카테고리 위치 -> 탑 메뉴를 사이드바]로 바꾼 후, [사이드바 -> SNS 아이콘 보기] 를 OFF 시키니까
    SNS메뉴만 사라지지 않고 사이드바 메뉴까지 같이 사라져서 댓글 남겨둡니다.

    • 알려주셔서 감사합니다.
      버그는 패치했습니다.
      스킨 다시 다운로드 받아서
      script.js 파일만 다시 업로드하고 웹브라우저 캐시한번 소거하면 됩니다.

  • 네 카테고리를 사이드바 쪽으로 못가지고오네요;;;

    • 링크된 블로그는 제 스킨이 아닌 것으로 보입니다.
      스킨 구성 파일들이 모두 업로드 된 경우 스킨 옵션 설정으로 카테고리를 사이드바로 옮기는데 아무런 문제가 없습니다.
      스킨 구성 파일들 모두 업로드 후 웹브라우저 캐시를 한번 소거하시고 확인해보시기 바랍니다.

    • 아 지금 이거저거바꿔보고있어용...다시해볼게요

  • 스킨 잘쓰고 있습니다 ^^ 질문있습니다!
    저의 티스토리에 들어오시면 댓글다는 곳에 계정사진, 계정닉네임이랑 겹치는데 이건 무슨 문제일까요?? ㅜㅜ
    답변부탁드립니다!

    • 스킨을 커스터마이징 하셨는데
      아마도 광고를 붙이는 과정엣 태그 쌍이 잘뭇 붙으면서 하위 요소들에 사이드 이펙트가 생기는 것입니다.

      댓글이 겹치는 현상은
      .entry-content ul li {
      클래스에 text-indent: -22px
      속성을 추가했는데...

      .entry-content 클래스는 글보기 내용 영역을 정의하는 클래스입니다.
      정상적인 경우면 의도한대로 적용이 되었을 텐데...

      광고 붙이는 작업을 하면서 태그쌍이 어긋났고, 글보기 영역이 아래 댓글 영역까지 확대되면서(아마도 중간에 태그가 잘려 나가거나, 중복되면서 브라우저에서 영역 판정을 정확하게 못하고 댓글 영역까지 .entry-content 영역으로 판단을 하는 것으로 보입니다.)
      글보기에 적용한 리스트 요소(.entry-content ul li) 들여쓰기와 목록 속성이 댓글 영역 전체까지 들여쓰기 -22px가 적용되는 것입니다.

      글보기 내용 영역 밑에 붙이 광고들을 들어내고, 다시 붙이는 작업을 해보시기 바랍니다.

      판단이 안될 경우 현재 적용한 부분까지 스킨 백업을 하시고, 스킨 원복을 하신 후, 백업한 스킨에서 필요한 부분들만 하나씩 가져다 붙이면서 깨지는 부분이 없는지 확인을 해보는 방식의 작업을 추천합니다.

    • 답변감사드립니다 ^^

      스킨 백업하기까지는 조금 번거로워서

      text-indent: -22px부분을 text-indent: -0px로 수정했더니, 나름 다시 예쁘게 나오더군요( 저 티스토리 댓글다는 곳 다시 한번 확인부탁드립니다!)

      이렇게 해도 괜찮을까요?

    • text-index 수정한 윗줄에

      list-style: inherit;
      가 있습니다.
      ->

      list-style: none;

      으로 변경하면 관련글과 댓글에 붙은 동그라미 리스트 헤더 스타일이 사라질겁니다.

      다만 이렇게 하면 글내용 본문의 글 목록의 헤더 스타일도 같이 안보이게 되는 점은 알고 써야 합니다.

      근본적으로는 글본문 내용 밑에 붙이신 광고에서 태그가 남거나 부족해서 레이아웃이 깨지는게 원인이기 때문에 광고 코드 붙인걸 손을 좀 보는걸 추천합니다.

    • 붙은 동그라미 없애니까 훨씬 깔끔하네요 ^^
      답변주셔서 정말감사합니다!

  • 스킨 잘쓰고 있습니다 ^^ 질문있습니다!

    저의 티스토리에 들어오시면 오른쪽 사이드바에 광고 3개가 있는데, 광고3가 고정되지않고, 스크롤내릴 때 같이 광고가 움직이는 방법은 어떻게할까요? html편집에 들어가서 어디를 수정을 해야될지 모르겠네요 ^^;; (참고로 광고2개는 모비센스, 광고1개는 애드핏입니다)

    혹시 광고 스크립트가 필요하다면 보여드리겠습니다

    답변부탁드립니다!

    • 스크롤 내릴때 광고가 같이 움직인다는게 무슨말인이 모르겠습니다.

      사이드바 절대 위치에 고정을 시켜서 화면을 스크롤해도 해당 위치에 항상 고정되어 있는걸 원하시는건지?

      고정은 css로 속성을 줘서 할 수 있겠지만, 이렇게 하면, 작은 브라우저 화면에서는 스크롤해도 광고가 아얘 안보이는 반대의 경우가 생길 수 있습니다.

      눈에 잘띄게 하기 위해 레이아웃을 무시하고 뭔가를 끼워넣으면 반대의 부작용이 있게 됩니다.

      강제로 위치를 주는 경우를 확인해보려면
      html 소스에서
      class="module module_plugin"
      를 검색하면 우측 사이드바에 3개가 검색됩니다.

      위 클래스 정의 끝나는 쌍따옴표 뒤에
      아래 3개를 한개씩 나오는 순서대로 위에서부터 한개씩 한개씩 잘라서 붙여넣어 보세요.

      style="position:fixed; top:850px;"
      style="position:fixed; top:1050px;"
      style="position:fixed; top:1250px;"

      이렇게 강제로 위치를 주면 위치가 고정되기는 합니다.
      테스트삼아 한번 해보시기 바랍니다.

    • 아 제가 말한건 스크롤을 내려도 사이드 광고가 따라오게 되는 방법을 묻고싶었던 거였습니다 ^^;;

      https://yi514.tistory.com/159

      여기 티스토리들어가보시면 이 방식대로 하고싶은데, 옛날 버전이라 다른것같더라구요.

      방법이 있을까요??

    • 링크 블로그의 내용은 위에 알려드린 것과 같은 내용입니다. 위치를 고정하는 것이고, 다만 블로그 외곽으로 위치를 더 뺀것만 다릅니다.

      반응형 스킨이 아닌 시절에 쓰던 광고 방식이고 요즘은 쓰지 않는 옛날 방식 광고 입니다.

      반응형 스킨에서 이런 식으로 광고를 붙이면 모바일에서는 광고가 전혀 노출되지 않게됩니다.
      아니면 모바일에서 광고를 따로 뿌려주는 코드를 추가로 구현하거나 해야합니다.

      위에 알려드린 코드에서
      top: xxxㅔㅌ;
      뒤에 right:10px;
      를 공통적으로 주면 화면 오른쪽에 고정으로 붙게됩니다.
      상단 위치는 top 픽셀값을 조정해서 더위에 붙이고 싶으면 붙일 수 있습니다.

      다만, 반응형 스킨에서는 이런 광고를 쓰면 안됩니다.
      모바일 화면 대응이 전혀 안되기 때무넹 고급 커스터마이징 기법을 쓰거나, 모바일 화면을 따로 구현해서 쓰거나, 티스토리 기본 모바일 화면을 쓰거나 해야 합니다.

    • 답변감사합니다!

      html 소스에서
      class="module module_plugin"
      검색해봤는데, 나오질 않더라구요 -_-;;

      사이드바를
      블로그관리-꾸미기-사이드바-사이드바2에서 [플러그인]HTML 배너출력으로 넣었는데,
      혹시 이 부분의 스크립트에서 손을 봐야하는건가요??

    • 출력된 페이지에는 보이는데, 아마도 가져오는 광고모듈에서 동적으로 갯수를 정해서 3개를 생성을 하는 것으로 추측됩니다.

      광고 코드를 붙이는 최외곽 태그에 맨위의 style 1개만 적용하면 됩니다.

    • 광고 코드를 붙이는 최외곽 태그가 어딘가요??

    • 그건 본인이 찾으셔서 붙이셔야 합니다.

      애드센스도 아닌 처음 보는 광고 업체인데 광고를 어떤식으로 스크립트를 가져와 붙이는지 저는 알 수가 없습니다.

      기본 태그 없이 자바스크립트만으로 동적으로 태그와 코드가 생성되는 거면 해당 광고업체 가이드에 자바스크립트로 생성된 동적 태그에 스타일을 어떻게 적용하는지 도움말이나 설명서를 찾아보셔야 합니다.

    • 네! 답변감사합니다 ^^ 한번찾아보겠습니다

  • 스킨 잘쓰고 있습니다 ^^ 질문있습니다!

    애드센스 인피드 광고를 넣으려고 하는데, 구글링을 해본 결과 <s_article_rep> <s_index_article_rep>사이에 넣으라서 넣어봤더니 게시물과 광고가 겹쳐서 나오더라구요 ㅜㅜ

    <head> </head>부분은 잘넣은 상태인데 article_rep과 index_artilce_rep이게 문제네요 ㅜㅜ

    혹시 제작자로서 인피드 광고 넣는 위치가 어딘지 알수있을까요?

    답변부탁드립니다!

  • 비밀댓글입니다

    • 아마도 모바일 상단의 버튼을 스크롤에 반응하지 않고 고정을 하고 싶어하시는거 같은데...

      기본적으로 메뉴버튼이 따라오지 않으면 사용자 ui가 많이 불편해집니다.
      사이드 메뉴 열려면 다시 맨위로 스크롤업을 해야하기 때문에...

      감안해서 사용해야 합니다.

      메뉴버튼과 검색 아이콘을 상단에 고정하려면

      script.js
      455~459행 삭제

      style.css

      290행 .mobile-menu
      속성중
      position: fixed; -> positoin: absolute;
      left: 5px; -> left: 0;

      349행
      position: fixed; -> positoin: absolute;
      right: 5px; -> right: 0;

      로 변경하면 스크롤을 따라오지 않고 상단에 고정됩니다.

    • 스킨 images 폴더 안에 script.js 파일이 있습니다.
      수정한 후 업로드 해야 합니다.

  • 비밀댓글입니다

  • 좋은 스킨 제공해 주셔서.. 다소 늦었지만 감사인사드립니다.
    8월에 티스토리를 시작했는데.. 덕분에 블러그가 아주 만족스럽게 잘 안정화 된 듯 합니다 ^^..
    건승하세요!!

    [어포스트 스킨 적용 후기] https://realitreviews.tistory.com/296


닫기