본문 바로가기

티스토리스킨/반응형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행까지 삭제해줘야 하고...