본문 바로가기

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

티스토리 스킨 113 - 반응형 1단 엣지라인 스킨 배포합니다.

반응형

티스토리 스킨 113 : 반응형 1단 엣지라인



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

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

* 썸네일 테두리를 둥글게, 또는 사각형으로 선택할 수 있습니다.

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


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


 





스킨 옵션 설정

 

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



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



 

패치 내역

 

  • 없음


설치 주의사항

 

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


반응형
  • 익명 2020.06.30 23:28 댓글주소 수정/삭제 댓글쓰기

    비밀댓글입니다

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

    비밀댓글입니다

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

    비밀댓글입니다

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

    비밀댓글입니다

    • 어두운 배경을 전제로 만든 스킨이 아니어서 어두운 배경을 선택하면 손을 좀 많이 봐야 합니다.


      스킨 옵션 설정에서
      공통/페이지 - 하이라이트/테마컬러
      를 밝은 색 계열로 변경. 마우스호버 색상입니다.

      헤더 - 블로그 타이틀 색상
      푸터 - 블로그 메뉴 색상 선택
      두개를 밝은 색으로 변경하고, style.css 에 이 색상을 몇 군데 적용해야 합니다.
      흰색은 color: #fff;
      입니다. 밝은톤으로 원하는 색상 선택해도 되고, 같은 색상을 아래 검색 바꾸기 색상에도 그대로 적용하면 됩니다.

      style.css
      에서 아래 3개를 텍스트 편집기나 메모장에서 검색 바꾸기로

      color: #22211f;
      color: #1a1a1a;
      color:#1a1a1a;
      ->
      color: #fff;
      로 모두 교체.
      일단 흰색으로 설명합니다.
      이렇게 하면 글자색은 모두 흰색으로 되는데, 사이드에서 펼쳐지는 메뉴 배경이 흰색이어서 메뉴 글자가 안보입니다.

      메뉴 배경색을 바꿔야 합니다.

      511행
      #header .menu.on
      774행
      .box_aside
      298행
      .mobile-menu.on

      3개의
      background-color: #fff;
      로 된 배경색 속성을
      background-color: #353535;
      처럼 스킨 옵션설정에서 설정한 배경색으로 변경

      하면 어두운 테마가 됩니다.

      해보시고 미진한 부분이 있으면 다시 질문 주시기 바랍니다.

    • 익명 2021.03.04 09:53 댓글주소 수정/삭제

      비밀댓글입니다

    • 익명 2021.03.04 22:19 댓글주소 수정/삭제

      비밀댓글입니다

    • 익명 2021.03.04 22:30 댓글주소 수정/삭제

      비밀댓글입니다

    • style.css
      에서 아래 3개를 텍스트 편집기나 메모장에서 검색 바꾸기로

      color: #22211f;
      color: #1a1a1a;
      color:#1a1a1a;
      ->
      color: #fff;
      로 모두 교체.

      이게 적용 안된겁니다.
      다운로드 받은 스킨의 style.css 파일을 텍스트 편집기에서 열어서
      위의 내용을 모두 변경한 후
      모두 선택 복사해서 티스토리 스킨 편집기의 CSS 코드를 대체하시면 됩니다.

    • 익명 2021.03.05 02:43 댓글주소 수정/삭제

      비밀댓글입니다

    • 스킨 원본 기준이라 행수는 약간 다를 수 있습니다. 스타일 이름으로 그 근처를 찾으면 있을 겁니다.

      style.css
      1635행
      .hgroup
      color: #52575c;
      ->
      color: #fff;

      1641행
      .hgroup .category
      color: #fff;
      ->
      color: #353535;

      푸터의 블로그 메뉴는
      블로그 옵션 설정 화면의
      푸터 - 블로그 메뉴 색상 선택
      에서 #fff 로 선택하면 됩니다.

      타이틀 글자 크기는
      481행
      #header > .inner > .title h1 a

      font-size: 0.9375em;
      ->
      font-size: 1em;

      정도로 변경해보시기 바랍니다.
      소수점 숫자에 em 붙여서 표기하고..
      너무 커지면 좌우 버튼들이랑 정렬이 안맞게 밀립니다.
      1이나 1.125 정도가 최대로 보이고...
      밑으로 타이틀이 쳐지는걸 보정하려면

      line-height: 2.3;
      ->
      line-height: 1.8;

      정도로 조정해서 맞추면 됩니다.

      나머지는 써가면서 조금씩 손봐가면서 조정하면 될 것 같습니다.

    • 익명 2021.03.05 08:57 댓글주소 수정/삭제

      비밀댓글입니다

    • 익명 2021.03.05 12:15 댓글주소 수정/삭제

      비밀댓글입니다

    • 익명 2021.03.05 12:32 댓글주소 수정/삭제

      비밀댓글입니다

    • 해당 url은 스퀘어스페이스에서 제공하는 스킨의 한 종류로 보입니다.
      https://www.squarespace.com/
      여기서 대충 해당하는걸 찾아서 커스터마이징을 할 수 있을 겁니다.
      내나 현재 글의 제 스킨과 기술적으로는 같은 스킨입니다. 한줄 아이템을 3개로 제한하고 글 내용 미리보기를 안나오게 한 것 정도입니다.
      작업한 지 좀 오래된 스킨 중에 엇비슷한 것들이 있습니다.
      검색어로 "메이슨리" 검색하면 나오는 제 스킨중에서 엇비슷한 것을 찾아보시기 바랍니다.

    • skin.html에서
      gutter: 14
      style.css에서
      margin-bottom: 14px;
      를 검색해서 14를 다른 값으로 수정하면 됩니다.
      gutter는 열 사이 여백, margin-bottom은 행사이 여백을 설정합니다.

      아이템 너비는 스킨 원본기준
      style.css
      1097행
      .cover-list ul li
      1298행
      .post-item
      속성중에서
      width: 300px;
      라고 된걸 너비 값을 수정하면 됩니다.
      너비를 조정하고 나면 한행에 최대 표시될 수 있는 아이템 갯수가 레이아웃 너비와 맞춰져서 배치되는데, 레이아웃 안쪽 좌우 여백이 많이 남을 수 있습니다.

      style.css 1759행부터 있는
      .entry-content1282 .related-articles{
      max-width: 1282px;
      }
      .entry-content968 .related-articles{
      max-width: 968px;
      }
      .entry-content800 .related-articles{
      max-width: 800px;
      }
      .entry-content700 .related-articles{
      max-width: 700px;
      }
      이 부분이 스킨 옵션 설정에서 레이아웃 너비를 정하는 css 입니다. 선택한 스킨 레이아웃 옵션 설정 값에 해당하는 것의 너비를 적당히 조절해서 너비를 맞추면 커진 썸네일 너비에 맞춰서 레이아웃을 맞출 수 있습니다.

      스킨 옵션 설정 화면에 블로그 타이틀 텍스트 대신 이미지를 업로드해서 표시하는 기능이 있습니다.
      헤더 - 타이틀 대체 이미지에 있는
      "이미지 업로드" 버튼으로 이미지를 업로드하면 타이틀 텍스트 대신 이미지가 표시됩니다.
      업로드 하는 타이틀 이미지 크기를 적당히 잘 맞춰야 배치가 맞으므로 시행착오를 조금 해야할 겁니다.

    • 익명 2021.03.08 18:39 댓글주소 수정/삭제

      비밀댓글입니다

    • 익명 2021.03.08 18:41 댓글주소 수정/삭제

      비밀댓글입니다

    • 익명 2021.03.08 18:50 댓글주소 수정/삭제

      비밀댓글입니다

    • 익명 2021.03.08 19:57 댓글주소 수정/삭제

      비밀댓글입니다

    • "전체 글" 제목 텍스트를 지우신걸로 보이는데
      레이아웃에 영향을 주기때문에 구성 요소 태그를 임의로 지우면 레이아웃에 영향을 줍니다.

      index.html에서

      <div class="post-header">
      <h1></h1>
      </div>

      이걸 삭제하면서 레이아웃이 깨지는 겁니다.
      글목록 레이아웃 안에 제목 항목도 포함되기 때문에 순서가 밀립니다.

      원복하시고...

      style.css
      1309행
      .post-header{
      }
      클래스 안에
      속성행으로
      display: none;
      을 추가하면 "전체 글" 영역이 안보이게 처리됩니다.

      커버페이지를 쓰는쪽이 더 깔끔하겠지만, 일단은 위 방식으로 목록 레이아웃이 유지되게 할 수 있습니다.


    • 익명 2021.03.08 21:25 댓글주소 수정/삭제

      비밀댓글입니다

    • 익명 2021.03.08 23:38 댓글주소 수정/삭제

      비밀댓글입니다

    • 익명 2021.03.08 23:41 댓글주소 수정/삭제

      비밀댓글입니다

    • 익명 2021.03.08 23:44 댓글주소 수정/삭제

      비밀댓글입니다

  • 익명 2021.03.03 10:37 댓글주소 수정/삭제 댓글쓰기

    비밀댓글입니다

  • 어포스트님...
    먼저 감사하다는 말씀 드립니다. 꽤 오랜시간 유지하던 스킨을 보자마자 단번에 바꿔 버렸네요.
    귀찮음에도 이미 손이 먼저 반응을 해서...

    아... 문의사항이 있어 다시 찾아왔습니다.
    https://culture-factory.net

    01.
    티스토리 로그인 후
    포스팅으로 넘어갔을때 제목옆에 [수정] 버튼이 보이지 않아요.
    다른 설정이 필요한 것인지... 아니면 원래 자체가 아니었던 것인지 모르겠습니다.

    02.
    만들어주신 스킨 하단에 'designed by 어포스트' 라는 문구가 있는데요.
    '어포스트' 를 'apost 로 변경을 했는데요.

    이 부분 괜찮을지 문의 드립니다. 한글명으로 두어야 한다면 다시 되돌려 놓으려구요.


    다시한번 스킨을 사용할 수 있게되어 감사드리구요.
    늘... 행복하시고... 즐거운 하루 되세요.

    호흡기 건강 유의하시구요~

    • 1. 스킨 문제는 아닙니다. 2차 도메인 매핑을 해서 그런 것 일겁니다. 티스토리 현재 구조가 2차 도메인을 매핑하면 세션 연동이 정상적으로 되지 않습니다.

      2. 무관합니다.

  • 오랜만에 또 성지에 들립니다 ㅋ

    ㄳ!!!

  • 익명 2021.05.15 08:40 댓글주소 수정/삭제 댓글쓰기

    비밀댓글입니다

    • 이 스킨은 매이슨리 자바스크립트 라이브러리로 동적으로 자동 레이아웃을 만드는 스킨입니다.

      배치가 자동으로 되기 때문에 임의로 조정할 수 있는 부분에 제약이 있습니다.

      앞서 설명한 사이 여백을 조정하는 것 이상의 범위는 조정이 불가능하다고 생각하셔야 합니다.

      모바일에서는 모바일 기기에 맞는 화면을 표시해야 합니다. 데스크탑 화면 같은 레이아웃 표시는 본인은 만족스러울 수 있겠지만, 블로그 방문자들은 많이 불편해하게 됩니다.
      남들이 그렇게 쓰는데는 다 이유가 있습니다.

  • 익명 2021.05.19 23:28 댓글주소 수정/삭제 댓글쓰기

    비밀댓글입니다

    • 배포 스킨을 전체적으로 업데이트 작업을 하고 있어서 버그가 있는 경우가 있습니다.

      스킨 옵션 설정에 글목록 > 썸네일 이미지 높이 제한 옵션을 새로 만들었습니다.
      썸네일 높이값을 자동/임의크기로 강제로 제한할 수 있습니다.

      더보기 레이아웃 깨지는 현상 관련해서 패치를 했습니다. 정상 작동할 겁니다.

      스킨을 다시 다운로드 받아 전체 재적용을 해보시기 바랍니다.

  • 익명 2021.05.20 06:14 댓글주소 수정/삭제 댓글쓰기

    비밀댓글입니다

    • 전체 스킨이 업데이트 작업이 진행되고 있는 중입니다.
      티스토리 애드센스 지원 및 스킨별 버그 패치, 그리고 몇몇가지 기능들이 개선된 1.2.0버전이 곧 업데이트가 완료됩니다.

      댓글에 불편사항으로 적어주시는 내용들은 6월말까지 1.5.0버전 업데이트가 되면서 모두 반영할 예정입니다.

      말씀해주신 부분도 최대한 반영할 예정입니다.

  • 멋진 스킨 감사합니다! 바로 적용했네요!
    혹시 하나 여쭤봐도 될까요?? 스킨배경 이미지를 다른 사진으로 바꾸는건 불가능한가요?

  • 안녕하세요. 스킨 받아서 적용했는데요. 전 왜 왼쪽 메뉴 버튼이랑 오른쪽 검색모양 버튼이 안 눌러 지는 걸까요? 죄송하지만 좀 봐 주실 수 있는지요.

    https://sensek.tistory.com/

    • 스킨에 포함된 script.js 파일을 업로드 하지 않았습니다.
      다운로드 받은 스킨 images 폴더 안에 있는 파일 모두를 업로드 해야 합니다.

      스킨 적용 방법은

      https://blogpack.tistory.com/930

      을 참조하시기 바랍니다.

  • 안녕하세요...?

    저의 블로그(3개)의 스킨을 이 스킨으로 통일 시켰는데,
    팁보드의 내용 중에 텍스트로 된 녀석이 썸네일로 보이지 않아 고민 중입니다.

    어떻게, 썸네일에 텍스트가 보이게 할 수는 없는지요?
    https://wingboard.tistory.com

    • 텍스트로 된 녀석이 썸네일로 보이지 않는다는게 무슨 뜻인가요?
      마우스호버해야 보이는 썸네일 텍스트가 기본으로 고정되어 보였으면 한다는건가요?

    • 예, 맞습니다.
      이미지가 없이 글만 올린 문건이
      문제가 됩니다.

    • style.css 에서

      .post-item .article-info:nth-child(2)

      클래스를 찾습니다.
      스킨 원본 기준 1336행입니다.
      썸네일 텍스트의 속성을 정하는 클래스입니다.

      썸네일 전체를 보이게 하고 싶으면
      opacity: 0;
      속성을
      opacity: 1;
      로 변경하면 됩니다.
      텍스트가 표시되면 흰색 반투명으로 썸네일 이미지를 흐리게 하는데

      background-color: rgba(255,255,255,0.8);

      속성이 흰색 배경색상입니다.
      끝의 0.8이 흰색의 80%를 채워서 표시합니다.
      0 ~ 1 사이의 소수점 값으로 표시합니다.
      1이면 완전 흰색으로 배경 썸네일 이미지가 보이지 않게 됩니다.
      배경 반투명 흰색이 너무 짙으면 0.5 정도로 줄여주면 됩니다.

      썸네일 이미지만 없는 경우에만 텍스트가 고정으로 표시되도록 하려면

      .post-item .article-info:nth-child(2){
      }

      클래스 뒤에 새 클래스를 추가하면 됩니다.

      .post-item.noimage .article-info:nth-child(2){
      opacity: 1;
      }

    • 덕분에 제대로 된 것 같습니다.
      고마워요.^^

      1944년생 늙은이지만,
      제에게 어포스트님은 멘토입니다.^^

  • 궁금증이 또 생겼어요.
    언제부턴가 블로그 첫 화면에서 다음 화면으로 넘기면 썸네일 이미지가 늦게 뜨기도 하고
    아예, '이미지를 불러올 수 없습니다'라는 메시지가 뜨기도 하는데, 무슨 연유에서 일까요?

    • 티스토리 시스템 장애입니다.
      아직 해결 안되고 있고, 모든 블로그들에서 간헐적으로 나타나고 있는 증상입니다.
      기다리시면 해결될겁니다.

    • 예, 예상은 했었습니다만 너무 오래 가는군요.
      감사합니다.

    • 해결되었습니다.
      html편집에서
      i1.daumcdn.net을 img1.daumcdn.net으로 전부 바꿨더니 제대로 출력이 되는군요.

    • 아마 같은 이슈로 질문이 계속 달릴 것 같아서 별도로 글을 올렸습니다.

      참고하시면 도움이 될 듯 하고...

      https://blogpack.tistory.com/1132

      곧 문제는 해결되겠지만, 스킨 패치를 할 지는 조금 더 두고봐야 할 것 같습니다.


닫기