본문 바로가기

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

티스토리스킨 097 - 반응형 2단 모던스토리 스킨 배포합니다.

반응형

스킨 097 : 반응형 2단 모던스토리


- 사진 중심의 다이어리 메모장 느낌을 살린 반응형 2단 스킨입니다.

- 여백을 다소 크게 준 스킨으로 차분하고 단정한 느낌을 원하는 블로그에 좋습니다.

- 컨텐츠 영역 너비를 860px(기본), 760px(좁게) 중에서 선택할 수 있습니다.

- 커버 기능은 글목록과 동일한 디자인으로 구성된 커버리스트만 지원하며, 메인에 표시하고 싶은 글들을 편집해 노출할 수 있습니다.

- 사이드바는 왼쪽, 또는 오른쪽에 배치할 수 있습니다.

- 헤더 영역을 좁게 넓게 지정할 수 있습니다.

- 카테고리 표시 위치를 헤더 상단, 하단, 또는 사이드바에 배치할 수 있습니다.

- 스킨에 포함된 index.xml 파일과 images 폴더 안의 script.js 파일 및 이미지 파일을 모두 업로드해야 스킨 레이아웃이 정상 동작합니다.

 

 






스킨 옵션 설정

 

1단 전용 스킨이며, 사이드바 메뉴는 펼침 메뉴로 감추어져 있습니다.

스킨 옵션 설정에 대한 상세한 설명은 ->스킨 옵션설정 글을 보시기 바랍니다.(일부 옵션 항목은 제외되어 있습니다.)





* 이미지를 클릭하면 옵션 항목들을 자세히 볼 수 있습니다.



A. 카테고리 위치를 헤더 상단, 하단, 또는 사이드바에 배치할 수 있습니다.




B. 사이드바를 왼쪽, 또는 오른쪽에 배치할 수 있습니다.





C. 컨텐츠 영역 너비를 기본(860px), 또는 좁게(760px) 중 한가지를 선택할 수 있습니다.





 

패치 내역

 

  • 2019-12-01 1.0.1 Patch - 서브메뉴 애니메이션 효과 추가. 커버리스트 css 개선.



설치 주의사항

 

  • 스킨 적용시 index.xml, script.js 파일을 반드시 업로드해야 스킨이 정상 적용됩니다.
  • 파일 업로드 후에는 웹브라우저 캐시를 한번 소거해야 바로 스킨이 정상 반영됩니다.


반응형
  • 감사합니다~잘쓸게여

    갖다가 쓰신분들 많을텐데

    댓글 좀 다세여 ㅋ

    돈 안드는뎅 흠 -ㅅ-

  • 김필맛 2019.12.14 13:24 댓글주소 수정/삭제 댓글쓰기

    안녕하세요! 티스토리 스킨으로 고민하다가 이 곳까지 흘러 오게 되었습니다. 주인장님 처럼 운영하고 싶은데 어떤 스킨을 활용하면 좋을까요?_? 스킨 종류가 많아서 판단이 어려워 질문 드립니다! 감사해요!

    • https://feelmat.tistory.com/
      이 블로그를 주인장님처럼 멋지게 운영하고 싶네요! :-)

    • 제 블로그 스킨은
      민트페이퍼2단 스킨을 조금 손봐서 쓰고 있습니다. 기본적으로는 거의 동일합니다.
      https://apost.kr/299
      배포하는 스킨중에서는 좀 오래된 스킨입니다.

      가능하면 최근 올라간 스킨을 추천합니다.
      구조적으로 좀더 안정되어있고, 코드 수정 없이 스킨 옵션 설정만으로 레이아웃 조정이 가능합니다.

      50번대 이후 스킨들은 스킨 옵션 설정값이 공통적으로 들어가 있습니다.
      배포 스킨명에 번호가 붙은 것은 비교적 최근 스킨이라고 보면 됩니다.
      현재 마지막 스킨은 99번입니다.

  • 깔끔한 스킨 감사합니다! 잘 쓸게요!!

  • 선생님 폰트변경은 어떻게 하죠 ㅠㅠ? 요 스킨 사용중인데..

    • 제 스킨들은 모두 구글 폰트 사용을 기본으로 합니다.
      업로드해서 사용하는 폰트를 사용하려면 사용법이 복잡해지므로 구글 폰트 기준으로 설명을 해드립니다.

      먼저

      https://https://fonts.google.com/
      로 가서 원하는 폰트를 찾습니다.
      Language를 Korean으로 선택하면 한글 폰트만 선택해서 볼 수 있습니다.

      스킨 원본 기준
      skin.html 8행이
      구글 폰트 링크 행입니다.

      <link href="https://fonts.googleapis.com/css?family=Noto+Sans+KR:100,300,400,500,700,900&display=swap" rel="stylesheet">

      Noto Sans KR 폰트를
      100,200,300,400,500,700,900 두께를 쓰겠다
      라고 선언한 것입니다.

      구글 폰트 리스트에서
      원하는 폰트의 + 아이콘을 클릭하면 사용할 글꼴이 선택되고 우측 하단에 선택한 글꼴 갯수가 표시됩니다.
      이걸 클릭해서 펼치면

      skin.html 8행에 있는 것과 같은
      <link ...
      코드가 보입니다.
      이거 복사해서
      8행 전체를 대체하면 사용하는 글꼴이 바뀌게 됩니다.

      아니면 8행 아래에 추가로 붙여넣어도 됩니다.
      그렇게 되면 기존 글꼴과 새로 추가한 글꼴을 같이 사용할 수 있게 됩니다.

      그리고...
      style.css 파일을 열어서
      추가할 글꼴을 사용할 css에
      font-family: 추가한 폰트 영문명;
      으로 정의해서 사용하면 됩니다.

      기존 정의한 Noto Sans KR을 전부 대체하려면

      style.css
      에서
      "Noto Sans KR" 을 검색해서 전체 변경을 해주면 됩니다.
      해당 스킨 기준으로는 34행, 74행에 정의되어 있습니다.

    • 감사합니다 :) 덕분에 수정했습니다~!!!

  • 혹시 헤더 이미지 변경 사이즈가 어떻게 되나요...?

  • 네 감사합니다ㅎㅎ

  • 헤더에 사이즈에 맞는 이미지를 삽입했는데 이미지의 위아래가 다 잘려서 보여요ㅜ

    • 헤더 이미지라는게 헤더 배경 이미지를 말하는건가요?
      아니면 타이틀을 대체하는 이미지를 말하는 건가요?

      블로그 상으로 보기에는 타이틀 대체 이미지로 헤더 배경 이미지 크기의 이미지를 올린 것으로 보입니다.

      헤더 배경 이미지로 까는 게 목적이면, 옵션 설정에서 타이틀 이미지를 대체하는 이미지를 올리는게 아니라 스킨 편집기의 파일 업로드 탭에서 header-bg.jpg 이미지 파일을 업로드 해서 기존 헤더 배경 이미지를 대체하고, 헤더 배경 표시 옵션(헤더 배경 이미지 사용)을 켜야 합니다.

  • 비밀댓글입니다

  • 항상 좋은 스킨 무료로 배포해주시는 오늘도 잘사용할게용 감사합니당 ♥

  • 블로그 복귀하는데 너무 도움이 된 스킨입니다. 티스토리2.0 업데이트 이전에 하다가 접었기에 오히려 기능이나 편의성 추가된 게 제게는 너무 큰 허들이 되었는데 덕분에 좋은 스킨으로 블로그 복귀하게 됏습니다. 아직 만져보는 중입니다만 폰트도 noto 구글 폰트로 정말 제 취향저격이네요.

    감사합니다! 건강하시고 행복하세요

  • 쥬쥬 2020.10.15 14:26 댓글주소 수정/삭제 댓글쓰기

    감사합니다! 잘쓸게요 ㅎㅎ
    혹시 상단에 산 사진을 다른 사진으로 바꾸려면 어떻게 하면 될까요? ㅎㅎ

    • 다운로드 받은 스킨 images 폴더에 보면 header-bg.jpg 이미지가 있습니다. 이게 헤더 배경 이미지입니다.
      같은 파일명으로 다른 이미지 만들어서 스킨 편집 화면에서 업로드하면 변경됩니다.


닫기