본문 바로가기

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

티스토리 스킨 109 - 반응형 1단 라운더 포토블로그 스킨 배포합니다.

반응형

티스토리 스킨 109 : 반응형 1단 라운더



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

* 썸네일 테두리를 둥글게 처리해 온화하고 가벼운 느낌을 살린 스킨입니다.

* 한행에 썸네일 2개, 3개, 4개의 썸네일을 배치할 수 있는 스킨으로, 사진 중심의 블로그 운영에 좋은 스킨입니다.


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


 





스킨 옵션 설정

 

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



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



 

패치 내역

 

  • 2021-01-24 - 데스크탑 화면 마우스 호버시 목록 아이템이 구분되도록 썸네일 줌인, 텍스트 테마 컬러 적용, 테두리 표시가 되어 구분되도록 개선




설치 주의사항

 

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


반응형
  • 감사합니다~~!!!

  • 캬.. 끝내줍니다. 정말 대단합니다.

  • 잘 쓰겠습니다 ^^ 멋진 스킨 감사합니다

  • 안녕하세요! 스킨 공유해주셔서 감사합니다. 유용하게 사용하겠습니다!

  • 잘 만드셨네요. 감사합니다.
    사진 섬네일 라운드를 없애려면 어디를 수정해야 하는지?

  • 감사합니다~ 잘쓰겠습니당~

  • 사용자 2020.10.09 15:48 댓글주소 수정/삭제 댓글쓰기

    헐 너무 예뻐요 잘 쓰겠습니다!

  • 너무 이뻐서 적용했는데요. 글 페이지 너비가 너무 넓어서 줄이고 싶은데 , css 중에 content 어떤걸 손봐야하나요??ㅜ

    • 글 페이지라는게 어떤걸 말하는지 모르겠습니다.
      설치하신 스킨은 기본적으로 전체 레이아웃 너비를 조정할 수 있게 만들어져 있습니다.

      레이아웃 전체 너비는 스킨 옵션 설정에서 바꿀 수 있습니다.
      스킨 옵션 설정 화면
      레이아웃 > 레이아웃너비 에서
      1260px, 1160px ,1060px 중에서 선택할 수 있습니다.

      수동으로 더 작게 조정하고 싶으면...
      1160px로 설정된 스킨 옵션 상태로 두고

      style.css 154행
      #wrap > .inner
      클래스에
      max-width: 1160px;
      속성이 있습니다.
      전체 레이아웃 너비를 설정하는 속성값입니다.
      숫자를 줄이면 전체 레이아웃 너비가 줄어듭니다.

  • 감사합니다. 전체가 줄어드는군요 ㅜ

    • 별로 권장하지는 않지만, 글 내용 보기 본문 내용만 레아아웃 너비보다 더 좁게 너비를 더 줄이려면

      style.css에서

      .entry-content
      를 검색해서(스킨원본 기준 1818행)
      속성 값으로

      max-width: 960px;

      를 추가하면 전체 레이아웃 너비 설정한 것 보다 더 작은 값을 설정해줄 수는 있습니다.

  • 안녕하세요. 스킨 정말 유용하게 쓰고 있습니다. 혹시 처음 접속했을 때 메인 페이지가 전체 글 카테고리가 아닌 특정 카테고리로 표시되게 할 수 있는 방법이 없는지 조심스럽게 여쭤 봅니다ㅠㅠ

    • 스킨 옵션 설정 화면 들어가셔서
      본인블로그/manage/design/skin/edit#/

      홈설정 오른쪽에
      최신글/커버 버튼이 있습니다.
      커버를 선택하면
      커버 타입으로 "리스트" 1개가 있습니다.
      "수정" 버튼 눌러 들어가서
      글설정 > 카테고리 항목에서 카테고리를 선택해주면, 전체글이 아니라 선택한 카테고리의 최신글만 보여집니다.

      상단의 "콘텐츠" 타입에서
      최신글 외에 인기글, 또는 노출 원하는 글을 직접 수동으로 선택해줄 수도 있습니다.

  • 저 혹시 모바일에는 적용이 안되던데..이유가 뭘까요? ㅜ기본 스킨으로 적용이 되더라구요

    • 블로그 관리자 화면
      왼쪽에
      꾸미기 > 모바일 들어가면
      티스토리 모바일웹 자동 연결을 "사용하지않습니다" 로 선택한 후
      변경사항 저장 버튼을 누르면 반응형 스킨이 데탑과 모바일에 모두 적용됩니다.

  • 비밀댓글입니다

    • 1. 스킨에 포함된 script.js 파일을 업로드하지 않으셨습니다. 업로드하면 정상 동작합니다.
      스킨 편집기 화면 들어가면 업로드탭이 별도로 있습니다.

      2. 댓글달기는 2가지 방법으로 제한할 수 있습니다.
      블로그 관리자 화면 왼쪽 메뉴
      댓글.방명록 > 설정에서 로그인한 사용자만 승인 후 표시하도록 하면 원하는 댓글만 노출할 수 있습니다.

      아얘 댓글 작성 폼과 댓글 목록을 표시안하고 싶으면
      html 편집기 화면에서
      <s_rp> ~ </s_rp> 를 찾아서 모두 지우면 됩니다.
      스킨원본기준 460~527행입니다.


      관련글은
      html 편집기 화면에서

      <s_article_related> ~ </s_article_related>
      까지를 찾아서 모두 지우면 됩니다.
      스킨원본기준 440~458행입니다.


      다른글은
      블로그 관리자 화면 왼쪽 메뉴의
      플러그인 메뉴에 들어가서 "카테고리 글 더보기" 플러그인 사용을 해제하면 표시되지 않습니다.

      관련글과 다른글은 다른 것입니다.
      관련글은 스킨에서, 다른글은 플러그인에서 관리됩니다.

    • 2020.12.14 13:30 댓글주소 수정/삭제

      비밀댓글입니다

  • 스킨 관련 검색을 몇 시간이나 한 끝에 발견하였습니다~!
    한 두개의 스킨이 아닌 이런 대량의 멋진 스킨들이 잔뜩 모여있다니...
    감사... 또 감사.. 압도적 감사를 표합니다...


    덧글 썼다가 조금 추가 합니다...

    스킨 적용하고 PC에서 마우스를 올려도
    게시물에 아무 변화가 없어서 선택을 제대로 했는지 조금 느낌이 없는데요...

    게시글 사진에 마우스를 올리면 이미지가 아주 조금 커지게 할 수 있는 방법은 없을까요?

    검색해 보니 마우스 오버라는 기능이라면서 설명이 되어 있던데 특정 이미지 하나를 그렇게 만드는 식으로 설명이 되어있어서 전체 적용은 모르겠네요 ㅠㅠ

    제 자체적으로도 검색을 통해 알아보도록 하겠습니다~!

    혹시 가능 하다면 도와주시면 감사하겠습니다.

  • 감사합니다~! 마우스 오버가 아니라 마우스 호버 였군요...

    1년 전에 티스토리 하려다가 마음에 드는 스킨은 죄다 블로그 스팟에 있어서 유료로 스킨 구입해서 시작 했으나
    이상하게 유입이 너무 없어서 다시 티스토리 하려고 하던 중 발견한 보물같은 스킨이네요...

    무료로 이런 피드백이라니..... 너무 감사드립니다.

    즐겨찾기 해놨으니 자주 들르겠습니다!

  • 비밀댓글입니다

    • 적용하신 스킨 기준으로
      style.css 의
      620행과 621행 사이에
      #mobile_category .category > ul > li > a {
      display: none;
      }
      클래스를 추가하면 1뎁스 카테고리 텍스트가 감춰집니다.
      위치가 달라졌으면
      #mobile_category .category ul li a
      클래스를 찾아서 그 밑에 새 클래스를 추가하면 됩니다.

    • 2021.04.15 10:28 댓글주소 수정/삭제

      비밀댓글입니다

    • "Category" 문자열은 자바스크립트로 만들어지는 문자열입니다.
      스킨 원본 기준
      스킨에 포함된 script.js 파일을 열어서
      125 ~ 129행을 지우고 저장한 후 다시 업로드하면 됩니다.
      업로드 후 바로 적용된 결과를 보려면 웹브라우저 캐시 한번 소거해야 합니다.


      썸네일 비율에 따라서 확대 되어서 표시가 되는 것 같은데 비율 유지한채로 전체를 노출할수는 없을지
      <- 이건 질문 내용을 이해못하겠습니다. 설명을 다시해주시면 좋겠습니다.

    • 2021.04.16 15:06 댓글주소 수정/삭제

      비밀댓글입니다

    • skin.html에서

      C480x320
      을 찾아서
      C480x480
      으로 변경하면 정사각형 썸네일이 되면서 밑으로 좀 길어집니다. 2군데 있습니다.

      썸네일 이미지를 지정하지 않아서 썸네일이 없는 경우에는 여전히 3x2비율로 가로로 넓은 빈 화면이 표시됩니다.

      script.js 파일에서
      98행의
      <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAMAAAACCAQAAAA3fa6RAAAADklEQVR42mNkAANGCAUAACMAA2w/AMgAAAAASUVORK5CYII=">

      <img src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==">
      로 바꾸면 됩니다.
      여는 꺽쇠부터 닫는 꺽쇠까지입니다.
      바꾼 후 저장하고 다시 업로드 해야 합니다.

  • 스킨 심플하고 너무 예뻐요 !! 만들어주셔서 감사해요~! 잘 쓰겠습니다 :)


닫기