본문 바로가기

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

티스토리/블로그스킨

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

티스토리스킨 웨일더스트 2018.10.09 04:09

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

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

모바일 대응 잘 됩니다.


목록 보기 화면에 표시되는 글 갯수는 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.6 Patch

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

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

1.0.5 Patch

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

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

1.0.4 Patch

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

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

1.0.3 Patch

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

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

1.0.2 Patch

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

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

1.0.1 Patch

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

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



정사각형 1:1 썸네일 이미지 버전



6 Comments
  • 프로필사진 물내음水香 2018.10.10 21:32 신고 좋은 스킨 감사합니다.
    모바일 화면에서 리스트 그리드 구분이 좀 어려운 것 같아 블럭을 할려면 어떻게 해야 하나요?
  • 프로필사진 티스토리스킨 웨일더스트 2018.10.10 21:35 신고 그리드 구분이 안되서 블럭을 한다는게 어떤 말씀이신지? 목록 아이템간에 구분이 안되신다는건지? 맞는거면 포스트간에 줄을 넣어서 구분이 좀 더 되게 하는 방법이 있을 것 같은데?
    답글 달아주시면 CSS 추가할 코드를 달아드리거나 소스패치를 해드리겠습니다.
  • 프로필사진 티스토리스킨 웨일더스트 2018.10.10 21:44 신고 모바일 화면에서만 포스트사이에 줄을 넣으려면
    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" 만 추가한 것입니다.
    이렇게 줄을 넣는게 더 나아보여서 소스패치는 별도로 해놓겠습니다.
  • 프로필사진 티스토리스킨 웨일더스트 2018.10.10 21:50 신고 보고 계신 블로그에도 적용이 되어있으니까 모바일 보기로 확인해보시기 바랍니다.
  • 프로필사진 물내음水香 2018.10.10 22:02 신고 예...확인했습니다. 감사합니다.
    전 border로 하지 않고 box를 의미했었는데 여튼 훨씬 가독성이 나아졌네요.
  • 프로필사진 티스토리스킨 웨일더스트 2018.10.10 22:11 신고 박스를 쳐도 괜찮아 보이기는 하는데 조금 갑갑해 보이고, 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줄로 바꾸시면 박스를 칠 수 있습니다.
    아래 추가된 줄은 기존 레이아웃의 썸네일 이미지에 위쪽 여백이 없어서 박스가 이미지에 달라붙기 때문에 여백을 준 것입니다.
댓글쓰기 폼

티스토리 툴바