본문 바로가기

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

티스토리 스킨 - 반응형 그리드1 티스토리 스킨 배포합니다.

스킨명 : 반응형 그리드1 티스토리 스킨




그리드 형으로 제작한 티스토리 스킨입니다.

브라우저 너비에 따라 이미지가 자동으로 변경되며, 브라우저 크기가 줄어들면 한줄에 표시되는 포스트 갯수도 자동으로 줄어듭니다.

모바일 대응 잘 됩니다.


목록 보기 화면에 표시되는 글 갯수는 6개의 배수로 지정하는 것을 추천합니다.

예를 들어 6개, 12개, 18개 이런식으로...


컨텐츠 보기의 이미지 최대 너비는 800px입니다.


컨텐츠 너비를 변경하려면 CSS(style.css) 파일을 열어 

800px -> [원하는 컨텐츠 너비]px 로

변경하면 됩니다.


목록보기의 미리보기 이미지는 최대 크기인 600px로 설정되어 있습니다.

반응형 레이아웃 구성은 600px x 600px 나 600px x 400px 에 최적화 되어 있습니다.


이미지 로딩이 무겁거나 모바일 최적화 환경을 원하시면 skin.html 파일을 열어

"C600x600" 문자열을 찾아 작은 크기로 변경하면 됩니다.

예를 들어 미리보기 이미지 크기를 450px로 변경하려면 

"C450x450"으로 변경하면 됩니다.


가로로 좀 더 넓은 3:2 이미지를 사용하려면

skin.html 파일을 열어 "C600x600" 부분을 찾아

"C600x400"과 같은 식으로 썸네일 가로 세로 비율을 변경해서 입력하면 됩니다.

3:2 비율로 이미지썸네임 이미지 크기를 지정하면 정삭가형 썸네일 이미지 높이가 줄어들어 목록 한 페이지에 많은 내용을 표시하기에 좀더 좋아 보이게 됩니다.


모바일 화면 메인 포스트 목록 사이 구분줄 대신 박스로 테두리를 치려면

CSS(style.css) 파일의 441행을 


  .list_content {width:90%;padding: 0 5% 4.5% 5%;margin-top:20px;border:1px solid #dfdfdf}
  .list_content .thumbnail_post img{margin-top:20px}


이 2줄로 대체를 하면 됩니다.



1:1 이미지 스킨 미리보기



3:2 이미지 스킨 미리보기


* 미리보기시 브라우저 창 크기를 줄이면 모바일 반응형 화면을 확인할 수 있습니다.


-----------------------------------------------------

1.0.7 Patch - 이웃추가 링크에 버그가 있어 패치되었습니다.

1.0.6 Patch - 컨텐츠 내용보기 화면에서 타이틀 언더바가 100% 채워지지 않는 현상을 개선했습니다.

1.0.5 Patch - 모바일 목록 보기에서 포스트 사이에 줄이 추가되어 좀더 구분이 잘되게 조정했습니다.

1.0.4 Patch - 레이아웃에 여백을 조금씩 더 줘서 약간 갑갑해던 부분을 개선 했습니다.

1.0.3 Patch - javascript 오류가 발생하던 부분이 패치되었습니다.

1.0.2 Patch - 댓글달기 폼이 왼쪽으로 쏠려 보이던 문제가 패치되었습니다.

1.0.1 Patch - 카테고리 타이틀이 왼쪽으로 쏠려 보이던 문제가 패치되었습니다.

-----------------------------------------------------


스킨 압축파일에 포함된 images/script.js 파일을 반드시 업로드 해야 합니다.
업로드 후웹브라우저 캐시 소거를 한번 하는 것을 추천합니다.

스킨 압축을 풀면 나오는 스킨 구성 파일들중 skin.html은 3:2 썸네일(600px * 400px) 스킨이고, skin_b.html은 1:1 썸네일(600px * 600px) 스킨입니다. 둘중 하나를 사용하면 됩니다.


스킨 다운로드
스킨 설치 방법



썸네일 이미지를 3:2로 조정한 버전




  • 좋은 스킨 감사합니다.
    모바일 화면에서 리스트 그리드 구분이 좀 어려운 것 같아 블럭을 할려면 어떻게 해야 하나요?

    • 그리드 구분이 안되서 블럭을 한다는게 어떤 말씀이신지? 목록 아이템간에 구분이 안되신다는건지? 맞는거면 포스트간에 줄을 넣어서 구분이 좀 더 되게 하는 방법이 있을 것 같은데?
      답글 달아주시면 CSS 추가할 코드를 달아드리거나 소스패치를 해드리겠습니다.

    • 모바일 화면에서만 포스트사이에 줄을 넣으려면
      style.css 의
      441라인을
      .list_content {width:90%;padding: 0 5% 4.5% 5%;margin-top:20px;border-bottom:1px solid #dfdfdf}
      로 변경하시면 됩니다.
      뒤에 "border-bottom:1px solid #dfdfdf" 만 추가한 것입니다.
      이렇게 줄을 넣는게 더 나아보여서 소스패치는 별도로 해놓겠습니다.

    • 보고 계신 블로그에도 적용이 되어있으니까 모바일 보기로 확인해보시기 바랍니다.

  • 예...확인했습니다. 감사합니다.
    전 border로 하지 않고 box를 의미했었는데 여튼 훨씬 가독성이 나아졌네요.

    • 박스를 쳐도 괜찮아 보이기는 하는데 조금 갑갑해 보이고, css 수정을 2줄을 해야해서 좀더 간편한 쪽으로 알려드렸습니다.

      style.css 파일의 441행을

      .list_content {width:90%;padding: 0 5% 4.5% 5%;margin-top:20px;border:1px solid #dfdfdf}
      .list_content .thumbnail_post img{margin-top:20px}

      이렇게 2줄로 바꾸시면 박스를 칠 수 있습니다.
      아래 추가된 줄은 기존 레이아웃의 썸네일 이미지에 위쪽 여백이 없어서 박스가 이미지에 달라붙기 때문에 여백을 준 것입니다.

  • 스킨 잘 사용하겠습니다^^감사합니다.

  • 안녕하세요
    먼저 멋진스킨감사드립니다
    적용후에 한가지 문제가 생겨서 댓글남깁니다
    이것저것 알아봤는데 제 능력으로 해결이 안되서..

    왼쪽 상단의 메뉴가 모바일이나PC에서 반응을 하지 않아서
    혹시 어떤 문제가 있나해서요..(몇번 클릭을해도 나오지 않습니다ㅠㅠ)

    시간이 되신다면 답변 부탁드리겠습니다



    • 스킨 압축파일에 포함된
      images/script.js 파일을 업로드를 하지 않으셨거나, 웹브라우저에 구버전 스킨의 script.js 캐시가 남아서 그렇습니다.

      블로그 확인해본 결과 script.js 파일이 없다고 에러가 나고 있습니다.
      스킨 압축파일 열면 images 폴더 안에 script.js 파일이 있습니다.
      스킨에디터/파일업로드에서 이 파일을 업로드하면 됩니다.

    • 아!! 감사합니다
      압축파일안에 데이터를 전체선택해서 추가하는과정에 이미지 폴더가 선택이 안됐었나봐요!! 해결 되었습니다 감사합니다!!

  • 안녕하세요 좋은 스킨 공유해주셔서 감사합니다. 그런데 오른쪽에 약간 회색처럼 보이는 배경색을 다른색으로 바꾸려면 어떻게해야하는지 알려주실 수 있을까요? 흰색으로 바꾸고싶어서요!!

    • 스킨 원본 기준
      style.css 를 보시면
      19행

      background:#f2f5f8;
      요 내용을 지우시면 됩니다.
      행 전체를 지우면 안됩니다. 위에 내용만...

      색상을 다른걸로 바꾸려면

      #f2f5f8

      요걸 다른 웹컬러값으로 변경해주면 됩니다.
      흰색으로 하려면 #ffffff
      검정색으로 하려면 #000000

      이런식으로 인터넷에서 웹컬러 선택하난 사이트 들어가서 적당한 컬러 선택하셔서 입력해주면 됩니다.


닫기