본문 바로가기

티스토리스킨/심플형 스킨

티스토리 스킨 - 반응형 그리드 1단 스킨2 배포합니다.(Masonry 기반 스킨)

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




메이슨리(Masonry) 기반으로 반들어진 반응형 티스토리 스킨입니다.

브라우저 너비가 바뀌면 목록의 썸네일들이 애니메이션 되면서 레이아웃이 변경됩니다.


썸네일 이미지 가로 너비는 300px 입니다.

포스트 원본 이미지의 가로/세로 비율이 유지된 채로 썸네일 이미지가 생성되기 때문에 

세로로 긴 이미지를 타이틀 이미지로 자주 사용하는 경우 보기좋은 메인 화면을 만들 수 있습니다.


스마트폰 세로 보기로 촬영한 사진을 포스팅하기 좋은 스킨입니다.


썸네일 이미지 크기는 300px 고정이며, 브라우저 너비가 넓어지면 한줄에 표시되는 썸네일 갯수가 늘어납니다.


배경 색상을 다른 톤으로 변경하려면 

CSS파일(style.css)을 열어

20번째행의 


background:#f7f7f7;


속성을 다른 색상으로 변경하면 됩니다.


알림1

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

메이슨리 자바스크립트 라이브러리가 사용된 스킨입니다.

제대로 적용되면 아래 미리보기 화면처럼 세로로 긴 가변 썸네일이 레이아웃에 맞춰져 보입니다.

script.js 파일 업로드 등 스킨 적용을 모두 했는데 메이슨리가 정상적으로 적용되지 않는 분은 웹브라우저 캐시를 한번 소거하시기 바랍니다.

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


알림2

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

메이슨리 기반의 포토갤러리 스킨은 글에 첨부된 이미지가 없을 경우 해당 글의 미리보기가 메인 목록에 출력되지 않습니다.

일반 반응형 스킨은 이미지가 없을 경우 해당 영역에 텍스트 본문 내용이 출력되어 자리를 차지하는데, 

메이슨리 기반 포토갤러리 스킨은 해당 글이 제외되고 나머지만 출력됩니다.

사진형 블로그를 운영하거나 포스트에 이미지가 첨부되는 글만 작성하는 경우에 적용하시기 바랍니다.

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


스킨 미리보기


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


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

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

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


reactive_grid_single_masonry.zip




  • 비밀댓글입니다

    • https://fr45.tistory.com
      가보시면 데모 적용되어 있습니다.
      스킨 세팅만 제대로 되면 데모사이트처럼 설정됩니다.(다운로드 받으신 스킨 소스 그대로 세팅된 것입니다.)
      메이슨리 스크립트가 적용되기 때문에
      script.js 파일 반드시 업로드 하셔야 하고
      웹브라우저 캐시 소거 한번 하시기 바랍니다.
      간혹 브라우저 캐시에 자바스크립트 이전 스킨용이 남아서 스크립트가 적용이 안되는 것일 수 있습니다. 썸네일 포스트 높이가 동일하게 길어진다는 걸로 봐서는 이것일 가능성이 커보입니다.

    • 2018.10.16 02:46 댓글주소 수정/삭제

      비밀댓글입니다

  • 비밀댓글입니다

    • 질문하신 내용이 이해가 안되는데
      800px 이 안된다는게 어떤게 800px가 안되게 나온다는건지?

      이미지 태그 자체에 크기값이 640으로 정해져 있는걸로 봐서는 컨텐츠 에디터 설정을 변경하셔야 하는게 아닌가 싶은데?

  • 비밀댓글입니다

    • 혹시 컨텐츠 에디터 너비를 확인해보셨나요?
      관리자 페이지
      왼쪽 콘텐츠 >설정 메뉴 선택하시면
      글쓰기 가로폭 설정하는 항목이 있습니다.
      이 값이 1200 으로 되어있나요?

  • 비밀댓글입니다

  • 비밀댓글입니다

    • 관리자화면 > 꾸미기메뉴>스킨편집 들어가면
      우측 기본 화면 설정에서
      홈화면글수와
      목록 글수를
      지정할 수 있습니다.

      홈화면 글수는 메인 화면이고
      목록글수는 카테고리 들어가면 표시되는 글 갯수입니다.

  • 득달 같은 답변.. 너무 감사합니다. 잘 사용하겠습니다.

  • 비밀댓글입니다

  • 비밀댓글입니다

    • 대부분 스킨은 skin.html, style.css 를 붙여넣고 script.js, index.xml 파일을 반드시 업로드해야 정상 동작합니다.
      script.js 파일 업로드 후에는 웹브라우저 캐시 소거를 한번 해주셔야 바로 반영된 내용 확인이 가능하빈다.

  • 비밀댓글입니다

    • 블로그에 들어가봤는데 저는 사진들이 정상적으로 잘 보입니다만...

      그리고 초창기 제작 스킨이라 ie 호환성 문제가 조금 있습니다.
      ie에서 글목록 볼때 글내용 미리보기 내용이 과다하게 많이 나오는 현상이 있습니다.

      스킨 패치가 되어 있으므로 새로 받아서 style.css 만 덮어쓰셔도 되고,

      아니면 style.css의

      273행에
      max-height: 90px;
      추가

      440행에
      max-height: 45px;
      속성 추가

      해주셔도 됩니다.

  • 비밀댓글입니다

    • 스킨 css 를 수정하신걸로 보입니다.

      style.css 181행에

      .area_view .imageblock{width:100% !important;max-width:800px !important;}

      부분이 있습니다.

      이행이 글보기의 이미지 가로 너비를 강제로 제한하는 행입니다.
      이때 당시에 만든 구버전 스킨들은 이런식으로 이미지 가로 너비를 강제로 제한을 했습니다.

      알려주신 블로그는 이걸 1200px 로 설정하신 걸로 나옵니다.
      이걸 800px나 683px 등 원하는 크기로 변경을 해보시기 바랍니다.

      블로그 글보기 전역으로 강제 적용되는 내용이빈다.


닫기