본문 바로가기

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

티스토리 스킨 - 반응형 2단 그린라인2 스킨 배포합니다.

스킨명 : 반응형 2단 그린라인2

 

 





스킨 주요 특징

 

40가지 이상의 스킨 옵션 설정 항목을 사용해 원하는 모든 블로그 레이아웃을 만들 수 있습니다.

스킨 옵션 설정에 대한 상세 설명은 ->스킨 옵션설정 글을 보시기 바랍니다.


  • 1단, 2단 레이아웃 설정 가능
  • 사이드바를 왼쪽, 오른쪽 배치 가능
  • 카테고리를 탑메뉴에 배치 가능
  • 다양한 커버 슬라이드 애니메이션 효과
  • 커버 슬라이드 교체 시간 설정 가능
  • 블로그 전체 배경 및 헤더 배경 이미지 설정 가능 
  • 리스트와 썸네일 방식 글 목록 보기 선택
  • 모바일용 컴팩트 레이아웃 설정 지원




그린라인2에서 새롭게 추가/변경된 스킨 옵션 항목



  • 레이아웃 - 카테고리 위치 : 헤더 영역이 2개로 구분되어 헤더 상단과 헤더 하단에 위치시킬 수 있는 옵션 추가
  • 공통/페이지 - 모서리 둥글게 : 전체 스킨에 거쳐서 각 섹션 및 개별 항목들 전체 요소에 둥근 모서리가 적용됩니다.
  • 공통/페이지 - 테두리 라인 표시 : 각 섹션별로 테두리 라인을 표시합니다.




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


 

패치 내역

 

  • 2019-07-29 1.0.1 - 검색폼 버그 패치




설치 주의사항

 

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






  • 이런 스킨 만드시는거 보면 대단하신것 같아요 ^^

  • 골프스토리 2019.07.30 21:48 댓글주소 수정/삭제 댓글쓰기

    스킨을 잘 사용하고 있습니다. 감사합니다~~

    적용에 어려운 사항이 있어 문의 드려요.
    커버슬라이드의 이미지는 PC, 모바일 모두에 잘 보이려면
    적절한 이미지 사이즈가 궁금합니다.
    PC 적절하도록 잘라서 올렸는데 모바일에서는 좌우상하 모두 잘려서 중요 부분이 가려져서 잘 안보여서요.

    그리고 리스트형 글 목록보기를 적용했는데 이미지가 너무 커서 본문내용이 잘 안보여서요.
    리스트형 스타일을 모바일의 기본 목록형 스타일로 적용하려면 어떻게 하면 되는지 가이드 부탁드립니다.

    다시한번 편리한 스킨 만들어 주셔서 감사합니다.

    • 1.
      티스토리 시스템상 모바일용으로 따로 이미지를 붙일 수는 없고...
      배너는 공통이라 보통은 모바일 기준으로 주요 내용이 보이도록 내용이나 사진을 잘라서 붙입니다.
      커버 이미지 센터 가운데 정사각형 영역 안에 필요한게 보이도록 하고 좌우로 넚게 영역을 잡아서 이미지를 쓰는게 보통입니다.

      아니면 모바일용 배너 크기를 pc용 비율이 유지되게 해서 배너가 잘리지 않게 하는 방법도 있는데, 가로로 긴 이미지가 모바일에서는 너무 작아서 보기가 그렇게 좋지 않습니다.

      2.
      질문 의도가 정확히는 이해가 안되는데 아마도... 모바일 화면이 pc용처럼 이미지가 왼쪽에 내용이 오른쪽에 오는 목록형 레이아웃이 모바일에서도 그대로 적용되었으면 하시는거 같은데...
      이렇게 하면 신형 기기들에서야 오른쪽에 글 내용이 어느정도 이상 나오겠지만, 저해상도 모바일 기기에서는 글 내용이 거의 나오지 않게 됩니다.
      현재 모바일 레이아웃은 모바일 기기용 범용 레이아웃이라고 보면됩니다.
      모바일 웹 레이아웃 가이드에 따른 레이아웃이고, 배포하는 스킨 대부분에는 공통적으로 이 레이아웃이 사용됩니다.

  • 골프스토리 2019.08.01 06:54 댓글주소 수정/삭제 댓글쓰기

    항상 빠르고 친절한 답변 감사합니다.

    2번 질문에 대한 설명이 불충분 했던 것 같네요.
    스마트폰 브라우저에서 아래 사이트 접속하면
    상단슬라이드 다음 목록형을 적용하였고
    https://ts-golf-story.tistory.com/

    아래 모바일웹으로 연결하면 나오는 목록 스타일로 적용하고 싶거든요.
    https://ts-golf-story.tistory.com/m

    테두리 없도록 설정하고 여백을 어떻게 줄이면 될지...

    • 의도하시는게

      모바일 화면에서만 테두리를 없애고 싶으신건지
      (여백은 테두리때문에 의도적으로 더 준것이므로 테두리선이 없으면 여백도 조금 줄일 수 있는 여지가 생기므로 따라서 조정하면 될 것으로 보입니다)

      아니면 데스크탑 화면에서도 일괄로 없애고 싶으신건지 모르겠습니다.

    • 모바일만 없애자면

      style.css
      2942행 - 2943행 사이에

      .content-area-padding #content > .inner{
      padding: 0;
      }
      .border-line #content > .inner {
      border: 0;
      }

      이걸 붙여넣으면 여백과 테두리를 지울 수 있습니다.

  • 비밀댓글입니다

    • 이 스킨은 기본 레이아웃이
      전체 너비가 1260px
      컨텐츠 영역이 980px 입니다.

      style.css 원본 기준으로
      두개의 값을 컨텐츠 영역을 줄이고 싶은 만큼 변경해주면 됩니다.
      컨텐츠 영역을 80px줄여서 900px로 바꾸려면

      텍스트 편집기 검색 바꾸기로 style.css의

      980 -> 900 (6개검색)
      1260 -> 1180 (4개검색)

      바꾼 후 적용해주면 레이아웃이 줄어듭니다.

      @media로 100px 단위로 너비를 반응형으로 줄이는 코드가 있기 때문에 100px 이상 컨텐츠 영역 너비를 줄일 경우
      2850~2860행의 @media 정의 섹션을 삭제해줘야 합니다.
      200px 이상이면 2861~2871행까지 삭제해줘야 하고...

  • 스킨 감사합니다. 사용하다가 막히는 부분이 생겨서 댓글 남깁니다.ㅎㅎ
    메인화면에서 카테고리 위치를 상단으로 변경을 하였습니다. 블로그 초기화면에서는 상단에 잘 떠있는데 카테고리를 클릭하여 들어가면 카테고리가 다시 화면 오른쪽으로 초기화(?)가 되어버립니다. 어떻게 설정을 해야 항상 카테고리가 상단에 떠 있을 수 있게 할 수 있을까요?

    • ie에서만 간헐적으로 나타나는 현상입니다.
      ie가 자바스크립트로 반응형 처리를 위해 모바일 화면 여부를 판단하는 코드를 제대로 처리하지 못해서 나타나는 현상입니다.

      대응 패치를 해야하는데 새스킨 작업에 밀려서 패치가 늦었습니다.

      패치가 올라갔습니다.
      script.js 파일만 업로드를 다시 하시고 브라우저 캐시 한번 소거하시면 해당 증상이 사라질겁니다.

  • 패치 감사드립니다 ㅎㅎ 다시 다운받아 스크립트를 다시 업로드 하고 적용을 한 뒤 브라우저 캐시를 소거 했지만 아직도 증상이 고쳐지지가 않았습니다 ㅠㅠ

    • 블로그 가봤는데 예전버전 스크립트입니다. 서버 장애로 캐시가 남아 이전버전 압축파일이 다운로드가 되는듯해서 조치를 했습니다.(다운로드해서 확인까지 했습니다.)

      번거로우시겠지만 압축파일을 다시 다운로드받아 script.js 업로드를 다시한번 해보시기 바랍니다.

      script.js 322행에
      if ( (/MSIE (\d+\.\d+);/.test(navigator.userAgent) || navigator.userAgent.indexOf("Trident/") > -1) && $(window).width() > 1023 ){

      이 코드가 있으면 패치된 스크립트입니다.

  • 와 확인했습니다. 이제 잘되네요!! 정말 감사합니다^^

  • 이슬이 2019.10.12 11:54 댓글주소 수정/삭제 댓글쓰기

    스킨 감사히 잘 쓰고 있습니다.

    스킨 적용시 애드센스에서 페이지뷰가 안잡히는 현상이 있습니다.
    애널리스틱과 티스토리에서는 잡히거든요.
    처음엔 애드센스 문제인줄 알았는데 이 스킨 적용한 블로그만 페이지뷰가 안잡혀요.
    테스트로 페이지뷰 잡히는 블로그를 이 스킨 적용했더니 똑같이 페이지뷰가 안잡히는 현상이 있어서 문의드려요

    • 음........
      처음보는 증상입니다.
      해당 증상을 제가 재현을 할 수가 없어서 뭐라고 정확히 꼬집어서 원인을 알기가 어렵습니다.
      제 스킨은 제 블로그들에 그대로 적용해서 애드센스를 붙여 쓰고 있는데, 애드센스로 인한 문제는 아직까지 보지 못했습니다.
      스킨에 특별히 애드센스와 충돌할만한게 없기 때문에 다른 라이브러리를 추가로 사용한다거나 한게 아닌지 모르겠습니다.

      아니면 자바스크립트 라이브러리인 제이쿼리를 최근 버전으로 변경을 해보시기 바랍니다.

      스킨 원본 기준 skin.html
      10행이 제이쿼리 링크이고 구버전 인터넷 익스플로러 호환성 때문에 1.12.4 로 배포가 되고 있는데

      티스토리 레퍼런스에서 링크를 하는 기준인 3.2.1로 변경해서 확인해보시기 바랍니다.

      10행을

      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

      로 대체하면 됩니다.

    • 이슬이 2019.10.15 19:23 댓글주소 수정/삭제

      바꾸고 테스트 해봤는데요. 그대로네요.

      블로그 하나 스킨 다시 바꿔봤는데 페이지뷰가 다시 잡힙니다.

      아마 파일이 제대로 안올라간건지 티스토리 버그인듯 합니다.

    • 해당 증상이 있는 블로그 주소를 알려주세요. 확인해보겠습니다.

  • 안녕하세요. 이런 스킨을 배포해 주셔서 정말 감사합니다.

    그런데 가로폭을 아래와 같이 수정하려고 하는데요.

    컨텐츠 영역: 980 -> 770

    사이드 영역: 250 -> 340

    전체 영역: 1260 -> 1140



    위에 있는 댓글을 보니, 추가로 @media 정의 섹션을 삭제해야 한다고 하셔서요.

    그럼 위와 같이 수정하려면, 어디부터~어디까지 삭제해야 하나요?

    • 전체 영역 = 컨텐츠 + 사이공백 30px + 사이드바너비

      입니다.

      컨텐츠 영역을 30 줄이거나 사이드 영역값을 30줄여서 전체가 1110px 이 되게 하거나
      아니면 전체 영역을 1140으로 해서 사이 공백값을 유지해줘야 레이아웃이 밀리지 않습니다.

      크기를 초과하는 @media 정의는 삭제해주어야 합니다.

      스킨 패치를 언제꺼를 받으신건지는 모르겠는데, 최근 스킨 css 랑 라인수가 조금 다른거 같습니다.

      @media screen and (max-width:1276px)
      @media screen and (max-width:1176px)

      요거 두개를 정의한 미디어 쿼리는 지워줘야 합니다. 위 행들을 검색해서 {}로 감싼 해당 섹션을 지워주면 됩니다.

      최근 패치 기준으로는
      2836 ~2857행 입니다.

      style.css에서
      1.
      1260px -> 전체영역너비로 모두 변경(헤더와 푸터 너비값이 있기 때문에 전체 변경을 해주어야 함)

      2.
      807행
      .sidebar 속성중
      width: 250px -> 사이드바 너비 변경

      3.
      1075행
      #content 속성중
      width: 980px -> 컨텐츠 영역 너비 변경

      정도 해주면 너비값을 맞출 수 있습니다.

      사이드바 감춤으로 기본 레이아웃을 잡을 경우 컨텐츠 영역으로 지정한 기본 너비인 980px를 style.css 에서 전체 바꾸기를 해줘야 합니다.
      마찬가지 이유로 헤더와 푸터 너비가 컨텐츠 너비 만큼인 980px 로 설정되어 있기 때문입니다.

  • 안녕하세요. 스킨 감사합니다.

    한 가지 질문이 있는데요. CSS 편집기에서,

    "줄간격"이랑 "문단 간격"을 수정하는 곳이 어디인가요?

    • 글목록 미리보기 줄간격은

      .post-item .excerpt
      을 찾으면 되고

      글보기 본문은
      .entry-content p
      를 찾아서
      font-size -> 글자크기
      line-height -> 줄간격
      margin-bottom -> 문단간격
      을 조정하면 됩니다.

      문단 간격을 조정하는
      margin-bottom
      은 24px가 지정되어있지만
      상위 티스토리 시스템 css에서 강제로 문단 간격을 0으로 막았기 때문에
      margin-bottom: 24px !important;
      와 같이 뒤에
      !important
      를 더 붙여줘서 강제로 24px가 먹도록 해줘야 합니다.


닫기