본문 바로가기

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

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

반응형

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

2022-06-15 버전 3.2 업데이트

티스토리 스킨 편집기의 HTML 편집기가 업데이트 되면서 스킨 소스를 파싱해서 임의로 스킨 원본을 변경합니다.

수동으로 스킨을 적용할 경우 일부 치환자가 깨지는 현상이 발생해 스킨이 정상 적용되지 않는 경우가 생겨서 이 문제가 생가지 않도록 스킨을 패치했습니다.

스킨 일부만 적용할 수 없으며 스킨 전체를 재적용 해야 합니다.(index.xml, skin.html 필수)

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

2022-03-13 버전 3.1 업데이트

 

사용하는 분들의 반복 요청이 있어 글 내용 보기 화면의 타이틀, 본문 내용, 댓글 영역, 페이징 영역 너비를 본문 너비 제한 옵션 선택과 연동되도록 개선했습니다.

기존에 사용하던 분들은 스킨을 다시 다운로드 받아서 style.css 만 업데이트 하면 됩니다.

 

글 본문 내용 너비 제한 설정

 

그리고 기본 스킨 옵션 선택 상태의 글꼴이 구글 웹폰트가 선택되도록 해서 기본 상태에서 가독성이 조금 더 좋은 상태로 보이도록 옵션 기본 선택 값을 변경했습니다.

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

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로 고정되어 있는거 같습니다.

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

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

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

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

  • 네~ 알겠습니다.

    현 상태로 쓸 수 밖에 없군요

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

  • 익명 2021.09.02 19:24 댓글주소 수정/삭제 댓글쓰기

    비밀댓글입니다

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

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

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

      스킨 패치를 했습니다.

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

  • 익명 2021.09.02 21:07 댓글주소 수정/삭제 댓글쓰기

    비밀댓글입니다

  • 안녕하세요 스킨 받아서 잘 사용하고 있는데요.. 전에 77번 쓰다가 112로 바꿨는데.. 카테고리로 들어가면 글 리스트가 안보이는데
    뭘 체크 해봐야 할까요 ? 미리 감사합니다 ^^;;

    • 스킨에 noiescript.js 파일이 있는데 업로드하지 않은것으로 보입니다.
      다운로드 스킨에 images 폴더에 있는 모든 파일을 업로드하셔야 합니다.

  • 11ukul.com 운영을 어포스트님 덕분에 잘 하고 있습니다. 이 스킨에는 ... 젬병이라..ㅠㅠ 너무 감사하게 생각하고 딱이다~ 하고 쓰고 있습니다.
    잠깐 아쉬운 것이 카테고리 선택시 카테고리가 왼쪽 상단이 아닌 가운데에 보이게 하고 싶은데. ㅠㅠ 어디를 손봐야 할지 몰라서 막막~ 합니다. ㅠㅠ
    전체 글, 분류전체보기, 카테고리이름을 가운데 넣는 방법은 무엇일까요? 어딜 손대면 될까요?

    • 카테고리 선택시 카테고리가 왼쪽 상단이 아닌 가운데에 보이게 한다는게 무슨 뜻인지 모르겠습니다.

  • 안녕하세요. 덕분에 멋진 스킨 잘 사용하고 있습니다 감사합니다.
    한가지 궁금한게 있어서 댓글 남깁니다.
    본문에서 사진을 클릭했을때 새로 뜨는 사진창의 사이즈를 변경하고 싶은데 어떤 부분을 건드려야 하는지 알 수 있을까요?
    문뜩 댓글로 이런 부탁 드려 죄송합니다.

    • 해당 기능은 티스토리 시스템에서 제공하는 라이트박스 기능입니다.
      사용자가 임의로 수정할 수 없고, 별도로 사용자 설정 기능를 지원하지 않습니다.

      사진창의 사이즈를 변경한다는게 어떻게 변경하는건지는 모르겠지만, 라이트박스 크기는 웹브라우저 크기에 비례해서 가변으로 자동으로 크기가 변경됩니다.

      큰 웹브라우저 화면에서는 라이트박스도 크게 표시됩니다.

    • 소중한 답변 감사합니다.
      죄송하지만 한가지만 더 여쭤보고 싶어서 글 남깁니다.

      포스팅에 업로드 시키는 사진의 사이즈는 가로폭 1280 정도가 최대로 설정되어 있는것 같습니다. 혹시 포스팅에서 보여지는 사진의 최대 사이즈도 임의로 변경할 수 없나요?

      스킨 편집 메뉴의 "글 본문 내용 너비 제한"은 100%로 설정한 상태입니다.

    • 업로드 하는 이미지는 원본 그대로 저장됩니다. 너비에 별다른 제한은 없습니다.
      티스토리 시스템에는 업로드 한 원본 그대로가 저장되어 있다는 뜻입니다.

      글 편집 화면에서도 원본 이미지 그대로가 사용됩니다.

      업로드 한 원본을 글 내용에 표시할 때는 가로 1280으로 축소한 이미지를 가져옵니다.
      임의로 변경할 수는 없습니다.

      css로 글 내용에 뿌려진 이미지 너비를 더 크게 설정할 수는 있지만, 1280인 이미지를 늘려서 보여주는게 됩니다.

  • 익명 2022.03.11 20:12 댓글주소 수정/삭제 댓글쓰기

    비밀댓글입니다

    • 스킨 옵션이 제공되지 않으므로 수동으로 적용해야 합니다.

      1. 스킨 원본 기준
      style.css 558행
      #header .category-menu .category a
      클래스가 헤더 표시 카테고리 속서입니다.
      그 밑에 다음의 새 클래스를 추가합니다.
      #header .category-menu .category a, #header .category-menu .category a > span {
      color: #a00;
      }

      color: 속성으로 적용한 컬러값을 원하는 컬러값으로 지정하면 헤더 표시 카테고리 텍스트 색상이 변경됩니다.


      2.
      스킨 원본에서는 검색 결과 화면에 잘리거나 가려지는 부분이 없습니다.
      스킨 릴리즈 당시 확인해서 배포한 내용이기 때문에 스킨 자체의 버그라고 보기는 어려워 보입니다.
      스킨을 커스터마이징하거나 추가한 css 내용이 있다면 해당 부분이 영향을 미치는 것일 수 있습니다.
      적용된 블로그를 알려주시면 확인을 해보겠습니다.

    • 익명 2022.03.11 23:37 댓글주소 수정/삭제

      비밀댓글입니다

    • color: 속성 뒤의 "#a00" 이 어두운 빨강색상입니다.
      색상은 웹컬러 인터넷 검색해서 색상 선택하는 사이트나 그래픽 프로그램에서 원하는 색상으로 선택하시는 겁니다.

    • 익명 2022.03.12 00:32 댓글주소 수정/삭제

      비밀댓글입니다

  • 익명 2022.03.12 16:44 댓글주소 수정/삭제 댓글쓰기

    비밀댓글입니다

    • 사용하는 분들이 불편해하는 것 같아서 스킨을 3.1 버전으로 패치했습니다.
      패치 내용은 글 맨위의 내용을 읽어보시면 됩니다.
      글보기 화면의 제목, 글 내용, 댓글 영역, 페이징 영역이 글보기 너비 제한에 맞춰 연동되도록 개선했습니다.
      기존 사용하는 분은 style.css 파일만 재적용해도 됩니다.

    • 익명 2022.03.13 22:54 댓글주소 수정/삭제

      비밀댓글입니다

  • 익명 2022.04.10 11:53 댓글주소 수정/삭제 댓글쓰기

    비밀댓글입니다

    • 1번은 티스토리 관리자 기능으로 설정하는 것입니다. 이미 찾아서 수정하신 듯 하고..


      2번은 개인 취향일텐데, 구지 바꾸고 싶으시면

      style.css 를 위에서부터 다음 문자열을 검색하면

      /* Content */

      컨텐츠영역 css 설정 섹션입니다.
      데스크탑 css 아무 위치에나 붙여도 되기는 하지만 관리 편의상...

      모바일 화면에 영향이 안가도록 다음 클래스를 추가해주면 방명록 내용의 너비와 센터링을 직접 설정해줄 수 있습니다.

      #tt-body-guestbook #content > .inner{
      max-width: 700px; /* 데스크탑 최대 너비 제한 */
      margin: 0 auto; /* 센터링 */
      }

      블로그가 예쁘네요.
      기본적인 커스터마이징은 하실줄 아는 분인듯 해서 기본적인 것만 알려드려도 될 것 같습니다.

  • 스킨잘적용하였어요. ^^ 질문이 있는데요. 글제목이 끝까지 다나오게 하려면 어떻게해야하나요?

    • 글 목록의 제목인 경우

      style.css 에서

      .cover-list ul li .title
      .post-item .title

      2개 클래스를 찾아서

      -webkit-line-clamp: 1;
      max-height: 1.7em;

      2개 속성을 삭제해주면 됩니다.

  • 안녕하세요. 혹시 사이드바에서 있는 인기글과 최신글을 본문 하단으로 옴기고 싶은데 이건 어떻게 해야 할까요? 태그만 옴기니 출력이 안되네요..;;;

    • 태그만 옮겨서 사이드바 일부 위치를 변경할 수 없습니다.
      사이드바에 표시되고 있는 아이템을 본문 영역으로 옮기면 거기에 맞는 css를 작성해서 추가해야 블로그 전체의 레이아웃이 깨지지 않습니다.
      반응형 스킨이기 때문에 마찬가지로 모바일 화면에 대응하는 css도 추가해야 합니다.

      스킨 일부 패치정도로 바꿀 수 있는 내용이 아닙니다.

      스킨 커스터마이징을 하실 수 있으시면...

      <s_sidebar_element></s_sidebar_element>

      한쌍이 사이드바의 아이템 1개입니다.
      그리고 이 태그는 반드시

      <s_sidebar> </s_sidebar>

      태그쌍 안에 있어야 합니다.

      사용하시는 스킨에는
      <s_sidebar> </s_sidebar>
      태그쌍이 2개 있습니다. 사이드바1, 사이드바2로

      블로그 관리자 화면 왼쪽 메뉴의 "꾸미기 > 사이드바" 화면에서 표시 아이템 위치를 사이드바1과 2중에서 선택할 수 있습니다.

      현재 스킨은 사이드바1과 2가 모두 펼쳐지는 사이드바 영역에 배치되어 있습니다.

      1.
      <s_sidebar> </s_sidebar>
      태그쌍 한개와 그 안의 모든 것을 원하는 본문 위치로 옮기고

      2. css로 반응형 레이아웃을 맞추고

      3. 관리자 화면에서 표시할 사이드바 아이템 위치를 변경해주면 됩니다.

      구조상 사이드바1과 사이드바2로 구분해서 배치를 하고 그 안에 표시할 아이템들을 관리자 기능으로 이동시켜주거나 표시/미표시를 개념이라고 이해하시고 작업을 해야 합니다.

  • 아.....큰 공사군요...;;;; 그냥 써야 겠어요...혹시라도 다음에 만드실때는 최근에는 반응형 스킨의 유입률이 모바일이 높다보니 사이드바 활용도가 크게 떨어지고 있습니다. 그래서 모바일에서 접속을 할 경우 사이드바를 숨기기 보다는 그냥 하단으로 보이게 하는 방법으로 스킨을 제작해주시면 어떨까요? 그냥 받아서 쓰는 주제이기는 하지만 향후 모바일 스킨의 쓰임새가 이런 추세이기때문에 지나가는 사람으로 그냥 말씀을 올려봅니다.


✖️닫기