본문 바로가기

티스토리스킨/포토블로그 스킨

티스토리 반응형 스킨 112 - 반응형 플러리 스킨 버전 3.0 배포합니다. 메이슨리 반응형 레이아웃 스킨

반응형

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

2021-09-02. 목차 기능 사용시 공감 버튼과 충돌하는 현상 패치 (스킨을 다시 다운로드 받아 script.js 파일만 재업로드)

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

 

 

메이슨리 자바스크립트 라이브러리를 사용해서 웹 브라우저 너비에 따라 한 행에 표시되는 썸네일 개수가 자동으로 변경되는 동적 레이아웃을 가진 스킨입니다.

 

112 플러리 버전1의 기능 개선판 스킨입니다.

 

헤더, 바디, 컨텐츠, 푸터 영역의 너비를 개별적으로 설정할 수 있습니다.

 

사진 중심의 블로그를 꾸미는데 추천합니다.

 

 

 

 

반응형 플러리 버전 3.0 다운로드

 

 

 

 

 

v3 버전에서 추가된 주요 기능들은 다음과 같습니다.

 

 

1. 헤더, 바디, 푸터 너비를 임의로 설정할 수 있습니다.

 

헤더, 푸터, 바디 너비 설정 옵션

 

헤더 바디 너비를 설정한 화면

 

 

2. 썸네일 너비와 컬럼 여백을 직접 설정할 수 있습니다. 다양한 너비와 여백을 가진 글 목록을 만들 수 있습니다.

 

썸네일 너비와 컬럼 여백 설정 옵션

 

 

 

3. 썸네일 비율을 3:2, 1:1 비율로 고정할 수 있습니다.

메이슨리 라이브러리를 사용해 제작된 스킨이기 때문에 세로로 긴 이미지는 세로로 긴 모양 그대로 표시됩니다. 스마트폰으로 세로로 찍은 사진을 사용하기에 좋습니다.

 

썸네일 비율 조정 옵션

 

썸네일 옵션 설정 화면 왼쪽부터, 기본, 1:1 비율(정사각 썸네일 사용), 3:2 비율

 

 

4. 레이아웃 바디 너비와 별도로 글 내용 본문의 내용 영역만 너비를 구분해서 제한 할 수 있습니다.

 

글 본문 내용 너비 제한 옵션

 


5. 외부 라이브러리 최소화로 블로그 페이지 로딩 속도가 빠릅니다.
- jQuery 자바스크립트 라이브러리 미사용(바닐라 자바스크립트 사용으로 빠른 자바스크립트 실행)
- Fontawesome 아이콘 폰트 미사용(최소 크기의 스킨 내장 폰트 아이콘 사용)

 


- 구글 웹폰트 미사용, 또는 옵션으로 선택 사용 가능

 



6. 검색엔진 최적화(SEO) 지원
- 구글, 네이버, 빙 검색 메타 태그 설정 지원

 



7. 티스토리 애드센스 광고 기능 지원. 티스토리가 제공하는 애드센스 기능을 기본으로 지원합니다.
- 글 목록, 커버페이지에 애드센스 목록 광고 표시 지원
- 사이드바 상 하단 애드센스 광고 표시 지원

 


8. 반응형 레이아웃 및 반응형 글자 크기 적용으로 레티나 디스플레이를 완벽 지원합니다.

 


9. 자동 목차 표시 기능을 지원합니다. 작성한 글에서 제목1, 2, 3을 가져와 글 본문 최상단에 트리형 목차를 생성해줍니다.

 


10. 다국어 구글 번역 기능을 지원합니다.

사이드바 영역에 구글 번역 기능을 스킨 옵션을 켜는 것만으로 사용할 수 있습니다.

 

구글 번역 옵션

 

깃발 모양 구글 번역 기능이 추가된 사이드바

 

 

11. 글 링크 및 글 내용 복사 기능. 공유형 글을 편리하게 퍼갈 수 있도록 글 제목에 링크 복사 및 글 내용 복사 버튼을 추가할 수 있습니다.

 

글 링크 및 복사 기능 버튼 표시

 

 

12. 스무스 스크롤 지원. 페이지 탑 이동 버튼으로 스크롤을 할 때 부드럽게 페이지가 스크롤되서 이동합니다.

 

 

13. 프로그래스바 기능. 페이지를 얼마나 스크롤했는지 상단에 표시해주는 인디케이터 표시가 지원됩니다.

 

페이지 최상단에 스크롤 인디케이터 표시

 

 

14. 모바일 글목록 타입으로 총 4가지의 타입을 지원합니다. 리스트 타입과 한 행에 썸네일 1개, 2개 표시, 그리고 메이슨리로 한행에 2개의 아이템을 표시하는 레이아웃(네이버 쇼핑 모바일)을 지원합니다.

 

 

메이슨리 모바일 레이아웃(썸네일 한행에 2개)

 

15. 인터넷 익스플로러11을 지원합니다.(구글 번역 기능은 제외)

 


16. SNS 아이콘을 SNS 고유컬러로 표시할 수 있습니다.

 

 


그밖에 80여개 이상의 스킨 설정 옵션을 제공해 다양한 레이아웃 설정 및 기능 추가가 가능합니다.

 

 

반응형
  • BLUE 2021.07.09 06:39 댓글주소 수정/삭제 댓글쓰기

    안녕하세요~ 모바일에서 그리드 2단으로 하게 되면 태블릿이나 PC와는 다르게 그리드 빈 공간을 채우지 않고
    2개의 썸네일이 상단 부분을 수평으로 맞추네요.

    세로 사이즈가 긴 사진이 들어갈 경우 여백이 보기가 안좋은데 네이버 쇼핑 레이아웃처럼 모바일 2단 갤러리형에서 여백 없이 교차로 채우는 옵션은 어디를 봐야할까요?

    • 모바일 화면은 동적으로 화면이 채워지는 메이슨리가 아니고 고정 레이아웃입니다.

      메이슨리는 모바일 기기에 최적화된 기능이 아니기 때문에 모바일 기기에 따라서는 레이아웃이 느리게 배치되고, 검색결과에 아주 않좋은 영향을 줍니다.

      네이버는 폐쇄형 서비스여서 자사 검색엔진에서만 검색되면 되기 때문에 메이슨리로 모바일 화면을 뿌려도 관계가 없습니다.

      현재 적용한 스킨은 데스크탑 썸네일 가로 너비가 300px로 고정된 스킨이기 때문에 모바일에서 그대로 가져가면 레이아웃을 맞추기가 쉽지 않습니다.

      퍼센트 너비로 재조정할 수 있는지 확인을 해보겠습니다.

  • BLUE 2021.07.09 14:32 댓글주소 수정/삭제 댓글쓰기

    아하 그렇군요 답변 감사합니다!

    • 모바일 목록 타입에 한행에 썸네일 2개[메이슨리] 타입이 스킨 옵션 선택항목으로 추가되었습니다.
      네이버 쇼핑 모바일처럼 메이슨리로 2개씩 여백없이 채워지는 목록으로 표시됩니다.

      다만, 앞서 답변대로 모바일 검색 최적화에 안좋은 영향을 주기 때문에 모바일에 메이슨리를 사용하는 것은 그닥 추천하지는 않습니다.

      스킨을 다시 다운로드 받아서 전체 재적용 후 웹브라우저 캐시를 한번 소거하면 바로 적용된 결과를 확인할 수 있습니다.

  • 안녕하세요.
    이렇게 좋은 스킨을 무료로 공개해 주셔서 정말 감사합니다.

    아래와 같이 적용을 해보고 싶은데 도무지 어떻게 해야될지 몰라 문의 드립니다.

    .a:link { color:#409d00; text-decoration:none;}
    a:visited { color:#409d00; text-decoration:none;}
    a:hover { color:#999; text-decoration:underline;}
    a:active { color:#999; text-decoration:none;}

    제 블로그 본문 글 작성시 위의 문구를 적용해서 링크를 표시하고 싶습니다.
    부탁드립니다.

    • style.css
      맨 위에서부터 a:hover를 검색하면

      a, a:hover, a:visited, a:active {
      text-decoration: none;
      }
      클래스가 있습니다. 스킨 원본에는 173행입니다.

      지우고

      a, a:link { color:#409d00; text-decoration:none;}
      a:visited { color:#409d00; text-decoration:none;}
      a:hover { color:#999; text-decoration:underline;}
      a:active { color:#999; text-decoration:none;}

      를 추가합니다.

      위 css를 덮어쓰는1가지를 지워야 합니다.

      skin.html에서

      a, a:visited,

      을 검색하면 1개가 나옵니다.(212행)
      "a, a:visited, " 만 지웁니다.

      이렇게 하면 스킨 전역으로 적용됩니다.

      글 내용만 적용하려면
      위에 추가한 하이퍼링크 css를 대신해서

      .entry-content a, .entry-content a:link { color:#409d00; text-decoration:none;}
      .entry-content a:visited { color:#409d00; text-decoration:none;}
      .entry-content a:hover { color:#999; text-decoration:underline;}
      .entry-content a:active { color:#999; text-decoration:none;}

      를 추가하면 됩니다.
      .entry-content 가 추가된 것 말고는 동일하고
      .entry-content css적용 영역은 스킨 원본기준 1687행부터 시작됩니다.

      1692행 밑에 새 행을 만들고 추가하면 됩니다.

      본문 내용에만 적용하려면 skin.html 수정은 필요없습니다.

  • 이렇게 일찍 답을 주시다니...
    너무 고맙습니다.

    글 내용에만 적용 완료했습니다.
    대만족입니다~

    번창하시길 바랍니다. 고맙습니다.

  • 또 귀찮게 해드려서 죄송합니다...
    이 스킨을 쓰다보니 에디터 폭 설정하는 곳을 못찾아서 여쭤봅니다.

    바디 넓이를 1160으로 하고 에디터에 글을 쓸려고 하다보니 에디터의 폭이 좁습니다.
    이걸 조정하는 부분을 못 찾겠네요...

    그리고 현재 제 블로그가 폭이 1200인데
    이 스킨의 폭을 1200(1200 이상)으로 할려면 많은 작업이 필요한지요?

    그냥 쓸려고 했는데 표 서식이 많아서 깨지는 부분이 있어서 그럽니다.

    • 신에디터로 변경되면서 너비 설정은 없어졌습니다.
      컨텐츠 영역 너비 전체를 사용하는 반응형 방식으로 글 작성이 됩니다.

      에디터 너비를 쓰는 방식은 구 에디터 방식입니다.

      이스킨은 1160보다 더 큰 너비는 스킨 옵션 설정에서 100%로 너비를 변경하면 전체 브라우저 너비를 사용합니다.

      1160보다 큰 너비로 강제 조정하려면 1160으로 너비를 설정한 후 style.css 파일에서 1160px로 검색하면 4개가 나옵니다.
      원하는 너비값으로 모두 변경하면 해당 너비로 레이아웃 너비가 변경됩니다.

      메이슨리 기반 스킨이어서 행당 출력되는 목록 아이템 개수가 레이아웃 너비에 딱 맞게 출력되지 않습니다. 목록 썸네일 너비가 고정 값이기 때문에 감안해서 너비를 설정해야 합니다.
      style

  • 답변 주셔서 고맙습니다

    말씀하신대로 너비를 100%로 설정을 해도 에디터의 넓이가 변하지를 않네요...
    아마 에디터의 넓이가 800~900로 고정되어 있는거 같습니다.

    실제의 넓이와 많이 다르니 페이지 작성이 힘드네요..
    특히 사진을 넣을 때 더 그렇습니다.

    그리고 폭 조정은 생각보다 쉽네요. 감사합니다.

    • 앞서 답변한대로 에디터 너비는 스킨단에서 설정할 수 있는 방법이 신에디터부터는 없어졌습니다. 티스토리가 제공하는걸 그대로 사용해야 합니다.

      스킨의 옵션 설정항목에 있는 것은 레이아웃 표시용 너비입니다.

  • 네~ 알겠습니다.

    현 상태로 쓸 수 밖에 없군요

    다시 한번 감사 드립니다...

  • 비밀댓글입니다

    • 증상만으로 봐서는 버그로 보입니다.
      테스트해보고 알려드리겠습니다.
      문제가 있으면 스킨 패치를 해드리겠습니다.
      잠시만 기다려주세요.

  • 답변 감사합니다ㅠㅠ 좋은 하루 보내세요~

    • 목차 기능과 공감 기능이 충돌하는 버그입니다.

      스킨 패치를 했습니다.

      스킨을 다시 다운로드 받아서 script.js 파일만 재 업로드를 하면 문제가 해결됩니다.

  • 비밀댓글입니다


닫기