본문 바로가기

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

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


반응형
  • 비밀댓글입니다

  • 비밀댓글입니다

  • 비밀댓글입니다

  • 비밀댓글입니다

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


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

      헤더 - 블로그 타이틀 색상
      푸터 - 블로그 메뉴 색상 선택
      두개를 밝은 색으로 변경하고, 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 댓글주소 수정/삭제

      비밀댓글입니다

  • 비밀댓글입니다

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

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

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

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

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


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

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

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

      2. 무관합니다.

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

    ㄳ!!!

  • 비밀댓글입니다

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

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

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

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

  • 비밀댓글입니다

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

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

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

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

  • 비밀댓글입니다

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

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

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

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


닫기