본문 바로가기

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

티스토리 스킨 - 반응형 타임라인4 티스토리 스킨 배포합니다.

반응형

스킨명 : 반응형 타임라인4 티스토리 스킨


1. 부트스트랩 기반으로 반응형으로 만들어진 타임라인 스킨입니다.


스킨 미리보기


* 미리보기는 그린 컬러 테마입니다.




스킨 소스 안에 헤더(카테고리 호출 햄버거 버튼, 검색버튼, 블로그 타이틀)를 웹브라우저 상단에 고정해주는 추가 css 가 포함되어 있습니다. style.css 대신 style_fixheader.css 적용하면 상단에 헤더가 스크롤되지 않고 고정됩니다.



------------------------------------------
1.0.2 Patch - 카테고리 펼침 메뉴에 SNS 아이콘이 표시될 때 불필요한 텍스트가 표시되는 버그 패치
기존 사용자는 
359행
color:#b3b3b3;    -> color:#fff;
361~363행
.social-link a:hover {
color:#000;
}
.social-link a:before{
color: #999;
}
.social-link a:hover:before {
color:#000;
}
로 변경하면 됩니다.
------------------------------------------

1.0.1 Patch - 목록 박스 그림자 효과가 잘려보이는 버그 패치

기존 스킨은 style.css 1037행 밑에 

    margin:5px;

를 추가

------------------------------------------




2. 벡터 아이콘을 사용합니다. 티스토리 기본 비트맵 아이콘을 별도로 업로드할 필요 없습니다.

3. 아이콘은 폰트어썸(FontAwesome) 프리버전을 사용합니다.

4. 3가지 컬러테마가 제공됩니다. 스킨 편집 설정에서 기본블루(Blue), 레드(Red), 그린(Green) 중 한가지를 선택해서 적용할 수 있습니다.







5. 커버기능 지원됩니다. 티스토리 공식 Poster 스킨의 커버 설정 화면이 그대로 제공됩니다.





설치 주의사항


1. index.xml 파일을 반드시 업로드해야 합니다. 티스토리 신스킨은 스킨 옵션 설정을 위해 반드시 이 파일이 필요합니다.


2. script.js 파일 업로드 후에는 웹브라우저 캐시 소거를 한번 해주시기 바랍니다. 브라우저 환경에 따라 구 사용 스킨의 자바스크립트 파일이 캐시에 남아 자바스크립트가 정상 동작하지 않는 경우가 있습니다.

사이드바 메뉴가 펼쳐지지 않는다거나 할 경우 캐시 소거를 하면 됩니다.


3. 목록보기 날짜 밑에 시:분을 추가로 표시하려면 style.css 파일의 1012 행의

  display:none;

을 삭제



스킨다운로드





반응형
  • 三 에 메뉴 보기 어터게 하나요 그리고 게시물에 날짜만 표시를 어터게 하는건가요

    • 메뉴가 안보이는 경우 script.js 파일을 업로드를 안했거나, 웹브라우저 캐시 소거를 하지 않아 구버전 자바스크립트 파일이 로딩된 경우입니다.
      위에 있는 설치 주의사항을 확인해보시기 바랍니다.

      날짜만 보이게 하는 것은 어떤걸 말하는건지 모르겠습니다. 년월일 표시되는 포맷을 바꾸고 싶은건지 아니면 다른 걸 원하시는건지 모르겠습니다.
      질문을 다시해주시면 확인해드리겠습니다.

  • 음 마음에 드네여
    혹시 위 스킨 SEO최적화는 되어 있나여^^

    • 티스토리는 블로그 시스템 레벨에서 seo를 지원합니다.
      스킨단에서는 seo를 따로 구성해줄 필요가 없습니다.
      지금 보시는 페이지 소스보기를 해서 보면 오픈그래프와 트위터카드, 그리고 메타데이터 디스크립션이 최상단에 출력됩니다.
      스킨과는 무관하게 시스템에서 강제로 넣는 코드입니다.

    • 제가 말한 부분은 페이지 스피드를 말한 거였습니다.어쨋든 마으에드네여

    • 아 제안할게 있습니다. script.js파일은 압축하는게 SEO관점에서 좋을듯하네요 ㅎㅎ

    • 티스토리 스킨은 치환자 구조이고 구조 자체가 간결하기 때문에 어떤 스킨을 써도 다 속도는 비슷비슷합니다. 컨텐츠나 포함된 이미지 크기에 따른 속도 영향을 더 많이 많습니다.
      script.js 파일은 코드량이 얼마 안되기 때문에 압축하나 안하나 로딩/실행 속도에 별 차이가 없습니다.
      압축하면 스킨 사용자들이 커스터마이징을 할 수 없게 되기 때문에 압축을 안하는 것이 기본입니다.

  • 정말정말 맘에 드는 스킨이네요^^ 멋진 스킨 만들어 주셔서 감사합니다!!

    • =^^=/

    • 혹시 무리한 질문이 아니라면... 석삼자 메뉴아이콘을 왼쪽 상단에 고정 시킬 수 있을까요? 스크롤바를 내리니 안보여서 상단으로 올리고 하는게 쬐끔 불편하거든요^^;; 제가 할 수 있으면 해보고 싶지만... 티스토리는 잘 몰라서요^^;; 죄송합니다.

    • style.css 파일을 열면

      115행 ~ 118행 #header id 정의를
      아래

      #header{
      position: fixed;
      width: 100%;
      z-index: 500;
      top: 0;
      background: #fff;
      border-bottom: 1px solid #ccc;
      box-shadow: 1px 1px 5px #eee;
      }

      내용으로 대체

      297행을

      margin: 100px auto;

      으로 대체

      모바일 대응을 위해
      1808행과 1809 행 사이에

      border-bottom: 1px solid #ccc;
      box-shadow: 1px 1px 5px #eee;

      추가 붙여넣기.

      를 하면 어느정도 원하는 결과를 얻으실 수 있습니다.

      원본 style.css 행 기준이므로 붙여넣기 전에 바꿀 위치들을 미리 전부 확인하시고 작업하시기 바랍니다.

      작업전 선 백업은 필수입니다.

    • 1.0.2 스킨 패치가 있습니다.
      SNS 링크 아이콘을 쓰는 경우 위 헤더 고정하는 패치 전에 아래 내용을 먼저 반영하시거나 스킨을 다시 다운로드 받아 설치하시기 바랍니다.
      스킨 안에 style_fixheader.css 파일이 있는데 1.0.2 패치 및 헤더 고정까지 해주는 css 최종본입니다.

      ---------------------------

      1.0.2 Patch - 카테고리 펼침 메뉴에 SNS 아이콘이 표시될 때 불필요한 텍스트가 표시되는 버그 패치
      기존 사용자는
      359행
      color:#b3b3b3; -> color:#fff;

      361~363행
      .social-link a:hover {
      color:#000;
      }

      .social-link a:before{
      color: #999;
      }
      .social-link a:hover:before {
      color:#000;
      }
      로 변경하면 됩니다.

    • 감사합니다^^ 한번 적용해 볼께요!

  • 요거 너무 적용하고 싶은데 index.xml 업로드가 안되네요ㅠㅠ왜일까요ㅠㅠ

    • 업로드가 안되는게 아니라 티스토리 시스템 문제로 모래시계가 도는걸로 보이는 것일 뿐입니다.

      모래시계 돌기 시작하면 이미 업로드 완료된 것입니다.

      웹브라우저 캐시 한번 소거하고, 블로그 확인하면 반영되어 보일겁니다.

    • 날짜 출력 부분 글자가 겹치는 버그가 있어 스킨이 패치되었습니다.
      다시 다운로드 받아 적용해보시기 바랍니다.

  • 알 수 없는 사용자 2020.02.28 02:35 댓글주소 수정/삭제 댓글쓰기

    안녕하세요.
    스킨이 너무 마음에 드는데,
    skin.html, style.css, index.xml 파일이 업로드 적용이 안돼요.
    웹브라우저 캐시 제거했는데도 마찬가지라서요.
    혹시 윗 답변과 마찬가지로 티스토리 시스템의 문제인 건가요?

    • 적용이 안된다는게 어떤게 적용이 안된걸로 보이는건지?

      저는 정상 적용된걸로 보입니다만...

  • 알 수 없는 사용자 2020.02.28 02:42 댓글주소 수정/삭제 댓글쓰기

    업로드 파일에 안 떴었어서요..!
    적용된 거라면 혹시 날짜가 잘리는 건 어떻게 수정할 수 있을까요?😢

    • 뜬금없이 티스토리 날짜 표시 방식이 바뀌어서 날짜 자릿수가 바뀌었습니다.

      스킨을 패치했습니다. script.js 파일만 다시 업로드 하신 후 웹브라우저 캐시를 한번 소거하시기 바랍니다.

  • 알 수 없는 사용자 2020.02.28 11:51 댓글주소 수정/삭제 댓글쓰기

    늦은 시간에 감사합니다! 좋은 하루 보내세요:-)


닫기