본문 바로가기

티스토리스킨/심플형 스킨

티스토리 스킨 116 - 반응형 1단 미니멀3 배포합니다.

반응형

티스토리 스킨 116 : 반응형 1단 미니멀3



* 최소 너비(768px 고정)를 사용하는 1단 반응형 스킨입니다.

* 글 목록에 다양한 레이아웃 설정이 가능합니다.



  • 커버 기능은 커버 리스트 기능만 제공합니다.
  • 글 목록 썸네일 위치를 왼쪽, 오른쪽 중에 선택할 수 있습니다.
  • 헤더 배경 이미지를 적용할 수 있습니다.
  • 헤더 텍스트 정렬을 왼쪽, 가운데로 설정할 수 있습니다.
  • 카테고리 메뉴를 헤더 하단, 또는 사이드바에 배치할 수 있습니다.
  • 스킨에 포함된 index.xml 파일과 images 폴더 안의 script.js 파일 및 이미지 파일을 모두 업로드해야 스킨 레이아웃이 정상 동작합니다.


 





스킨 옵션 설정

 

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


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



 

패치 내역

 

  • 2020-05-15 1.0.1 패치 - 모바일에서 블로그 타이틀이 2줄을 넘어갈 경우 화면 스크롤 다운시 타이틀이 타이틀 영역에서 밀려 내려가는 현상 개선


설치 주의사항

 

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


반응형
  • 좋은 스킨 배포 감사드립니다. 잘 사용하고 있습니다.
    궁금한 게 있어서 문의드립니다.
     
    Q. 헤더에서 메뉴-메뉴 간에 자간 조정은 어디서 하나요?

    • 메뉴 사이 간격을 말하는건가요?
      아니면 메뉴의 글자사이 간격을 말하는 건가요?

      전자이면
      스킨 원본 기준
      style.css
      576행의
      #header .category-menu .category > ul > li > ul > li > a
      클래스 속성의
      margin-right: 15px;
      를 수정해줍니다.
      마진(margin-right) 픽셀값을 늘리거나 줄여주면 됩니다.

      후자이면
      위 클래스에 아래 자간 속성을 추가해서 글자 사이 너비를 조정해주면 됩니다.

      letter-spacing: 0px;

      기본 값은 1px 입니다. 1픽셀 단위로 늘리거나 줄여서 원하는 글자 사이 여백을 맞춰 쓰면 됩니다.

  • 전자입니다. 마진-라이트를 수정해도 변화가 없네요... 테스트를 위해 -50도 해보고, 50도 해보고, 숫자를 여러개 대입해봐도 반응이 없어요...

    • 스킨을 커스터마징해서 스킨 원본과 구조가 다릅니다.
      사이드바에 붙은 카테고리를 메인에 이중으로 표시하려고 카테고리 구조를 임의로 만들어 붙이셨는데, 이렇게하면 모바일에서 호환성이 떨어지게 됩니다.

      아마도 이것때문에 메뉴 간격을 줄이시려는거 같은데...
      억지로 끼워맞출 수는 있겠지만, 나중에 다른 문제가 생길 가능성이 있게 됩니다.

      style.css
      420행의
      #header .blog-menu ul li{
      속성중
      margin: 10px;
      ->
      margin: 10px 5px;
      정도로 하면 강제로 맞출 수는 있습니다.
      다만 이렇게 해도 저해상도 모바일 기기에서는 메뉴가 2줄로 갈라질 가능성이 있습니다.

  • 네! 🙏 정말 감사합니다!!!

  • 비밀댓글입니다

    • 스킨하고는 무관한 문제인 것으로 보입니다.
      카테고리 선택시 글 목록 데이터 자체가 브라우저로 출력이 안됩니다.

      카테고리 설정이나 글 설정 등의 설정 문제인거 같은데 카테고리에 글 갯수가 있는데 목록이 안뿌려지는건 처음봅니다.

      스킨 원본을 그대로 적용한게 아니면 스킨 원본을 다시 적용해보시고
      관리자 화면에서 카테고리 설정이나 글노출 설정쪽을 확인해보시기 바랍니다.

  • 스킨과 무관한 내요임에도 불구하고 친절하게 알려주셔서 감사합니다.
    말씀해주신 내용으로 진행해보도록 하겠습니다.
    감사합니다.
    즐거운 한 주의 시작이 되시기 바랍니다.

  • 비밀댓글입니다

    • 티스토리 관리자 들어가서 기본모바일 화면을 사용하지 않음으로 끄면 됩니다.

    • 2020.05.15 17:05 댓글주소 수정/삭제

      비밀댓글입니다

    • 타이틀이 2줄 이상으로 길어질 경우 모바일에서 타이틀 영역(메뉴와 검색 아이콘 사이) 에 있어야 하는 것이 밀려서 내려가는 것입니다.
      버그로 보여서 스킨을 패치했습니다.
      스킨 새로 다운로드 받아서 style.css 파일만 다시 적용하면 됩니다.

  • 띄영s 2020.10.04 14:35 댓글주소 수정/삭제 댓글쓰기

    감사합니다.
    예쁘게 잘 사용할게요!

  • amom 2020.11.03 09:29 댓글주소 수정/삭제 댓글쓰기

    블로그 메인 페이지에서 page list 및 작성 일자가 출력되지 않습니다ㅜㅜ 카테고리를 눌러 세부 카테고리로 들어가면 그때서야 page list 및 작성 일자가 제대로 보입니다.. 혹시 어떤 문제인지 여쭤봐도 될깡요...

    • 블로그 주소를 알려주세요.

    • 2020.11.03 09:32 댓글주소 수정/삭제

      비밀댓글입니다

    • 스킨 컨셉상 메인 위젯에는 날짜 표시를 제외한 것입니다.

      skin.html 335행 밑에

      <span class="datetime">[샵샵_cover_item_simple_date_샵샵]</span>

      행을 추가하면 날짜가 나옵니다.
      "샵샵" 은 "##" 으로 원복하셔야 하고...
      스킨 편집기에서 추가해도 됩니다.

      스킨을 커스터마징해서 행수가 다르면
      "_cover_item_category_" 로 문자열 검색해서 그 밑에 새행을 만들어서 붙이면 됩니다.

    • amom 2020.11.03 11:00 댓글주소 수정/삭제

      감사합니다!! 적용 해볼게요!!!!!! :)

  • 안녕하세요 좋은자료 정말 감사드립니다
    순서대로 다 적용해서 했는데 계속로딩중화면에서 머물러 있어요ㅠ
    새로고침해도 로딩중이 계속되구요 ㅠ 머가 잘못된건가요 ㅠ

    • 티스토리 버그입니다.
      모래시계 돌면 업로드 완료된 것입니다.
      그냥 화면 새로 고침하면 됩니다.
      스킨편집기 화면 들어가서 스킨 옵션 설정값들 보이면 정상 적용된 겁니다.


닫기