본문 바로가기

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

티스토리 스킨 114 - 반응형 1단 에디션 스킨 배포합니다.

반응형

티스토리 스킨 114 : 반응형 1단 에디션

 

 

 

* 메이슨리 자바스크립트 라이브러리 기반으로 만들어진 반응형 스킨입니다. 브라우저 창 크기에 따라 썸네일 갯수가 자동으로 애니메이션 되며 조절됩니다.

* 헤더 영역이 좁게 만들어 컨텐츠에 집중할 수 있게 한 포토블로그 스킨입니다.

* 사이드바를 왼쪽에 고정한 사이드바 스킨입니다.

* 미리보기 화면에서 창크기를 조절하면 애니메이션 되면서 썸네일 목록 갯수가 변경되는 것을 볼 수 있습니다.

 

  • 글보기 컨텐츠 영역 너비를 레이아웃 너비와 구분해 별도로 설정할 수 있으며, 전체 너비 100%, 1282px, 968px, 800px, 700px 중에서 선택할 수 있습니다.
  • 스킨 레이아웃 너비를 브라우저 전체 너비(100%), 한행에 4개(1282px), 한행에 3개(968px) 중에서 선택할 수 있습니다.
  • 커버 기능은 커버 리스트 기능만 제공합니다.
  • 카테고리 메뉴를 헤더, 또는 사이드바에 배치할 수 있습니다. 블로그 타이틀이 너무 길거나, 헤더에 위치한 카테고리 갯수가 많으면 타이틀과 카테고리가 겹칠 수 있습니다. 이런 경우 카테고리를 사이드바에 배치해야 합니다.
  • 글꼴을 바탕체(Noto Serif KR), 돋움체(Noto Sans KR) 중에서 선택할 수 있습니다.
  • 글자 간격을 기본, 좁게 중 선택할 수 있습니다.
  • 스킨에 포함된 index.xml 파일과 images 폴더 안의 script.js 파일 및 이미지 파일을 모두 업로드해야 스킨 레이아웃이 정상 동작합니다.

 

 

 

 

 

 

스킨 옵션 설정

 

스킨 옵션 설정은 티스토리 관리자 왼쪽 메뉴의 "스킨편집" 을 클릭하면 됩니다.

 

 

 

 

 

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

 

 

 

 

패치 내역

 

  • 없음

 

설치 주의사항

 

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

 

 

반응형

Comments

  • 질문 2020.04.02 18:49 댓글주소 수정/삭제 댓글쓰기

    안녕하세요 배포해 주신 스킨을 잘 사용하고 있습니다. 먼저 감사드립니다.

    다름이 아니라 스킨에 소셜 아이콘을 다른 걸로 바꾸고 싶은데 아이콘 관련을 찾지 못해서 댓글 남기게 됐습니다.
    만약에 수정을 마음대로 하지 못한다면 어쩔 수 없지만 본인 수정이 가능하다면 아이콘 변경 방법을 알 수 있는지 궁금합니다.

    • 배포하는 스킨은 기본적으로 폰트어썸을 사용합니다.

      https://fontawesome.com/icons

      여기서 원하는 sns 키워드로 검색해보셔서 있으면 그걸 사용하면 됩니다.

      검색결과에서 사용할 아이콘을 클릭해서 들어가면
      아이콘 이미지 상단에
      4자리 코드와(f1e8 같은 식으로..)
      <i class="...">?</i>
      형태의 태그가 보입니다.
      기존 설정한 sns설정을 그대로 사용하고 아이콘만 바꾸려면
      4자리 숫자를

      style.css
      248~272행 사이에 정의한 스킨 sns 아이콘 설정값을 바꿔주면 됩니다.
      sns 클래스의 속성중

      content: "\4자리코드";

      포맷이므로 4자리 코드값만 바꿔주면 됩니다. (앞에 역슬래시는 남겨야 합니다.)

      수동으로 sns 아이콘을 추가해주려면
      skin.html 646~653행 안의 sns 아이콘 링크행에 새 행으로 다음과 같이 sns 아이콘을 추가해주면 됩니다.
      <i></i> 태그는 폰트어썸 사이트에서 복사온 것을 붙여넣어야 합니다.

      <a href="내sns주소" target="_blank"><i class="...">?</i></a>

  • 스킨이 참 예쁜것 같네요. 잘 사용하겠습니다

  • 알 수 없는 사용자 2020.04.16 22:05 댓글주소 수정/삭제 댓글쓰기

    티스토리 블로그를 처음 만들었는데 스킨이 너무 예쁘네요. 배포 감사합니다!

  • 안녕하세요 스킨 너무 예뻐서 적용중인데

    index.xml 파일 업로드가 느린건지 적용이 된건지 계속 로딩돌아가는 듯한 화면만보여서요
    스킨편집창에서 어포스트님이 설정한 것들이 다 보이면 적용된건가요?

    • 티스토리 시스템 버그입니다. 모래시계 돌면 업로드 완료된 것입니다. 스킨 편집 옵션 설정 들어가보면 옵션 항목들이 보일겁니다.

  • apost님, 안녕하세요? 코로나에 항상 건강하시고, 연이은 태풍에도 늘 안전하시기 바랍니다. ㅎㅎ
    예전부터 저의 블로그 스킨에 대한 질문에 친절하게 가이드 해 주신 점들, 지금도 잘 기억하고 있습니다. 항상 고맙게 여깁니다.

    한 가지 또 궁금한 점이 있는데요.. ㅎㅎ
    티스토리는 아마 근본적으로 사진을 누르면 컴퓨터 화면 크기에 맞게 창이 뜨면서 좀 더 큰 사진이 보이잖아요.
    근데, 그거보다, slr클럽처럼 사진을 누르면, 그 사진만.. 사진을 올린 원래 사이즈대로 커지게 하는 방법을 적용할 수는 없을까요?

    잘은 몰라도, 이건 아마 힘들 것 같아 보이긴 합니다만.. 그래도 한 번 여쭈어 봅니다. ^^
    안 되면 어쩔 수 없고요 ㅎㅎ

    제 블로그 - https://bsuday.tistory.com/
    slr클럽 - http://www.slrclub.com/

    항상 감사합니다. 꾸벅~ ^^

    • 티스토리도 사진을 클릭하면 원본 크기 이미지가 슬라이드로 보입니다만...
      질문하신 의미를 잘 모르겠습니다.
      기본적으로 slrclub이나 티스토리나 구조는 내나 비슷하구요, 원본 이미지 보이는 구조도 같습니다.
      기능적으로는 티스토리의 것이 훨씬 더 좋습니다.
      이미지 뷰어 기능은 티스토리 시스템 단에서 라이브러리로 뿌리는 것이어서 스킨단에서 조정할 수 있는 방법은 없습니다.
      slrclub은 다른 서비스와 달리 글 본문에 표시되는 이미지가 원본 자체입니다.(큰 이미지를 그냥 줄여서 보이도록함) 클릭하면 그냥 화면 최대 크기로 띄워서 보여주는 것일 뿐입니다.
      티스토리처럼 글 목록에는 작은 썸네일 이미지가 보이고(실제로 작은 이미지) 클릭하면 원본을 로딩해서 보여주는 구조가 아닙니다.
      구조적으로 리소스를 굉장히 많이 먹는 방식입니다. 비요율적인 방식이어서 대부분 서비스가 이런 방식을 쓰지 않습니다.

    • 항상 친절하신 가르침에 감사를 전합니다.
      제 질문을 잘 이해하셨습니다.
      제가 현재 원하는 게,
      티스토리처럼 사진이 뜨는 게 아니고
      slr클럽 같이 게시판 글에 올라온 내용 중 사진을 클릭하면 그 사진만 원본 크기대로 나오는 방식요.
      그리고 다시 사진을 클릭하면 게시판 내용이 원래대로 다 나오는 방식.. ㅎㅎ
      항상 구체적인 안내에 감사를 다시 드립니다. ^^

  • 정민호 2020.10.10 17:06 댓글주소 수정/삭제 댓글쓰기

    안녕하세요ㅠ 혹시 카테고리를 사이드바에 어떻게 넣나요? 사이드바 메뉴에 카테고리 모듈이 안 보이네요 ㅠ

    • 이 스킨은 사이드바에 카테고리가 고정되어 있는 스킨인데, 질문하신 내용의 의미를 모르겠습니다.
      블로그 주소를 알려주시거나 질문을 다시 해주시면 감사하겠습니다.

  • 안녕하세요. 어제 스킨 적용해봤습니다. 이쁘게 만들어주셔서 감사합니다.
    질문이 좀 있는데요. 플러그인 중에 EXIF 를 사용하도록 했는데, 해당 스킨을 적용하니 보이질 않네요. 따로 수정이 필요할까요?

  • 익명 2021.03.17 09:22 댓글주소 수정/삭제 댓글쓰기

    비밀댓글입니다

    • 옛날 제로보드인데...
      블로그에는 이런 방식의 게시판 구조를 사용하지 않습니다.
      리소스와 트래픽을 많이 먹기 때문에 모바일 환경에도 전혀 맞지 않습니다.

      배포하는 스킨중에 대충 컨셉이 비슷한 - 목록에 글 내용이 보이는... - 스킨은

      https://blogpack.tistory.com/525

      정도입니다.

      이렇게 저렇게 손을 보면 대충 엇비슷하게 만들 수는 있어 보이기는 합니다.
      다만 새스킨 만드는 거랑 별로 다를거 같지는 않습니다.

    • 답변 감사합니다.
      제가 무식한 질문을 올린 것 같군요....^^;;;

  • 안녕하세요 어포스트님! 우선 너무나 예쁜 스킨 정말 감사합니다..개발자의 감성을 마구 자극하는...암튼 너무 예쁩니다ㅠ!

    그런데 제 블로그에 해당 스킨을 설정해보니, 사이드바가 뜨질 않습니다. 카테고리 위치를 헤더하단에 하게 되면 뜨는데, 사이드바로 설정하면 안뜹니다. 현재 사이드바 위치를 우측으로 해둔 상태인데요, 제 컴퓨터에서만 그런건지 새로고침 할때마다 한번 깜빡 하고 잠시 떠있다가 바로 사라집니다. 그리고 그 깜빡했을때 봤는데 사이드바에 카테고리는 포함이 안돼있더라구요. 얘 말고 '티스토리 스킨 114 - 반응형 1단 에디션 스킨'(https://blogpack.tistory.com/582?category=823230) 도 마음에 들어 적용해봤는데 옆에 사이드바에 카테고리가 포함되지 않더라구요. 저만의 문제인가요? 혹시 해결방안이 있을까요? 답변 주시면 감사하겠습니다!

    (스킨 정말 너무 예뻐요..ㅠㅜ)

    • 제 블로그 주소입니다!
      https://bba-jin.tistory.com/

      현재 설정은
      '레이아웃>사이드바 표시/위치' - 오른쪽(2단스킨)
      레이아>카테고리 위치 - 사이드바

      이렇게 되어있는 상태입니다!

    • 엇 방금 시크릿모드로 한번 접속해봤는데 사이드바가 잘 나오네요... 그런데 제 컴퓨터에서 일반 크롬으로 들어가면 계속 뜨지 않는 상태입니다ㅠ

    • 사이드바 잘 보입니다.

      웹브라우저 캐시를 한번 소거하시기 바랍니다. 블로그의 자바스크립트 캐시가 남아서 안보이는 것일 수 있습니다.

      티스토리 캐시는 주기가 20분 내외여서 대략 이시간이 지나면 캐시가 갱신되면서 자연스럽게 보이게 됩니다.

      안보이는건 캐시로 인해 본인한테만 나타나는 현상입니다.





❌ 닫기