본문 바로가기

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

티스토리 스킨 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 파일을 반드시 업로드해야 스킨이 정상 적용됩니다.
  • 파일 업로드 후에는 웹브라우저 캐시를 한번 소거해야 바로 스킨이 정상 반영됩니다.


  • 질문 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>

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

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

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

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

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

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

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

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

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

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

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

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


닫기