본문 바로가기

티스토리스킨/반응형2단 스킨

티스토리 스킨 - 반응형 다크라인 2단 티스토리 스킨 배포합니다.

스킨명: 반응형 다크라인 2단 티스토리 스킨



스킨 옵션 설정으로 다양한 레이아웃을 생성할 수 있는 반응형 다크라인2 스킨이 등록되었습니다.

-> 반응형 2단 다크라인2 스킨 보기



* 카테고리 갯수가 많아 탑메뉴가 넘치는 분들은 아래에 사이드바로 카테고리를 옮긴 버전을 별도로 올렸습니다.

두가지중 하나를 골라 다운받아 쓰면 됩니다.


- 어두운 배경을 가진 차분한 느낌의 2단 반응형 스킨입니다.

- 레이아웃 전체 너비가 넓고(1220px) 어두운 배경색에 특화된 스킨입니다.

- 사이드바 배치를 스킨 추가설정에서 왼쪽/오른쪽으로 변경할 수 있습니다. 

- 스킨 추가 설정에서 배경 색상과 블로그 타이틀 색상을 지정할 수 있습니다.




- 커버 기능 지원합니다.

- 반응형 스킨으로 모바일 및 타블렛 대응 됩니다.

- 레이아웃 전체 너비는 1220px, 글 내용 너비는 810px 입니다.


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

2019.06.01 ver 1.0.1 patch - 모바일 화면 검색폼 클릭시 사이드메뉴 닫히는 버그 패치

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








* 웹브라우저 너비를 변경하면 반응형으로 변하는 화면을 확인할 수 있습니다.



_설치안내


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


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

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


3. 레이아웃 전체 너비를 변경하려면 style.css 파일의 "1160px" 를 원하는 너비 값으로 전체 변경하면 됩니다. (5개) 레이아웃 좌우여백으로 30px씩 총 60px 를 더한 너비(1220px)가 실제 전체 레이아웃 크기가 됩니다.


4. 스킨 하이라이트 컬러(마우스 오버 색상 등)를 변경하려면 style.css 에서 "#ec5621" 을 다른 웹컬러값으로 전체 변경을 하면 됩니다.



* 카테고리가 탑메뉴로 붙어있는 버전입니다.


스킨 설치 방법




* 카테고리가 사이드바에 붙어있는 버전입니다.







  • 좋은 스킨 잘 쓰겠습니다. 감사합니다 ㅠㅠ

  • 드디어 이쁜 2단반응형 dark 테마를 찾았네요.. 제작 감사합니다.
    다만 카테고리 메뉴가 상단에 가로배열로 위치해있는데요.
    이게 카테고리 수가 많아지면 애매하더라구요.. (라인이 내려간다던지)
    혹시 카테고리를 사이드바에 트리 형태로(default: 접힌상태) 되어있게 수정된 버전은 없을까요??

  • 티스토리 시스템 댓글 장애로 인해 별도로 달아드립니다.
    -------------------------
    만들어드릴께요. 쫌만 기달려 보셈.
    스킨 수정은 하지 마시기 바랍니다. 구조상 카테고리를 사이드바쪽으로 옮기면 호환성이 없어질겁니다.

  • 사이드바에 카테고리가 붙은 버전이 별도로 올라갔습니다.
    위에 보시면 다운로드 링크 있으니까 다운로드 받아서 스킨 세팅 다시 하면 됩니다.

  • 개발자 분이어서 알아서 잘 고치고 계신거 같기는 하지만..
    #header height 와
    #header>.title 의 padding
    값을 적절히 줄여주면 상단 공간을 조절할 수 있습니다.

  • 비밀댓글입니다

  • 아.. ui 쪽은 아니어서 검색하면서 보고있었습니다. 피드백 감사합니다 ^^

  • 티스토리 일 안하네요... 대댓글 에러가 며칠째 계속되는데 안고치네요.
    보통은 스킨에 글쓰기라는걸 따로 붙이지는 않습니다.
    로그인되어있으면
    https://블로그주소/manage/post
    이걸 링크로 달면 바로 글쓰기 폼이 뜨기 때문에 구지 원하시면 이럴 링크를 달아서 쓰시면 됩니다.

  • 아.. 대댓 안달아지는게 티스토리 에러였군요..
    답변 감사합니다 ^^

  • 좋은 자료 정말 감사합니다. 다름이 아니라, sns에 유튜브를 추가하고 싶은데 어떻게 하면 될까요?!!

    • 스킨 원본 기준
      skin.html
      71~72행 사이에
      <a href="본인유튜브URL" class="youtube"><div>Youtube</div></a>
      요걸 붙여넣고
      (순서는 윗줄로 올려서 바꾸면 됩니다.)

      style.css
      198행에

      .social-link .youtube:before {
      content: "\f167";
      font-family: "Font Awesome 5 Brands";
      }

      요걸 붙여넣으면
      됩니다.

      SNS 아이콘이 1줄에 4개에 맞춰져 있어서 아랫줄로 밀릴텐데

      166행
      15px -> 10px
      로 바꿔주면 한줄에 붙어 보일겁니다.

  • 항상 좋은 글과 테마 감사합니다. 다름이 아니라, 이 테마를 사용하고 있는데 댓글 기능이 보이지 않아서 문의드립니다. 혹시 적용할 수 있는 방법이 있을까요?

    • 스킨 커스터마이징을 하면서 태그를 잘못 붙이셔서 레이아웃이 깨지고 있습니다.

      글보기 페이지 태그 밑에 부분이 관련글과 댓글 영역인데 태그 밑에 라이브리 소셜 댓글 코드를 대체해서 붙여넣으시면서 태그 찌꺼기가 잘못 붙으면서 그 아래로 다 깨지고 있습니다.

      검은 배경이라 잘 안보이는데 본문영역 아래 끝 부분을 보면 검정색 꺽쇠가 보일겁니다.

      해당 부분을 수정해서 레이아웃 깨짐을 해결하면 라이브리 댓글이 보일 겁니다.

  • 사용 여부는 아직 고민을 해봐야 하는데 테스트용도로 받아 갑니다.
    멋진 스킨 만들어 주셔서 감사합니다. ^^

  • 좋은 스킨 배포해주셔서 감사드립니다. 다름이 아니라

    https://ogeoseo.tistory.com/category/%E2%96%B6%E2%96%B6%204.%20%EC%8A%A4%ED%81%AC%EB%9E%A9/%EC%
    96%B8%EB%A1%A0

    이런 식으로 이미지가 없는 글은 목록에서 이미지 없음 아이콘이 좀 보기 싫게 제목을 가리는 것 같은데, 저 아이콘을 없애고 글만 보이게 하거나 제목을 가리지 않도록 옮길 수 없을까요?

    • 스킨 원본 기준 style.css
      724행
      또는 #content 를 검색해서

      클래스 속성으로
      width: 100%;
      추가

      잘 모르시면 727 라인 위 아래 행을 하나 더 만들고
      width: 100%;
      추가하면 됩니다.

      살짝 버그성? 이라고 봐야할 것 같아서 스킨은 패치를 했습니다.
      다시 다운받아 style.css 를 덮어쓰셔도 됩니다.

    • 음...... 제가 말씀드렸던 부분과는 다른 쪽이 수정된 것 같아 다시 문의 드립니다. 이미지로 보여드려야 할 것 같아 임시로 블로그에 스크린샷을 올려 놓았으니, 번거로우시더라도 한 번만 더 확인 부탁드려요.
      https://ogeoseo.tistory.com/538

    • 스킨 원본 기준으로 확인을 해서 질문하신 의도를 이해를 못했습니다.

      스킨 원본 기준 style.css 1353행
      또는 .post-item .thum:before
      를 검색해서
      해당 클래스를 지우시면 됩니다.
      아니면
      클래스 속성중
      content: "\f302";
      행만 지워도 됩니다.

    • 잘 해결된 것 같습니다. 다시 한 번 감사드립니다~!

  • 정말 마음에 쏙 드는 스킨이라 꼭 쓰고 싶은데
    PC&모바일에서 댓글 수가 길어지면 화면을 넘어가는 현상을 발견했습니다 ㅠ
    어떻게 수정할 수 없을까요?..

    • 댓글수가 길어지면 어느 부분 화면이 넘어가나요?
      해당되는 증상을 찾을 수 없습니다.

    • 앗 답글 감사합니다 ㅠㅠ https://yyss231.tistory.com/5에 증상 찍어봤습니다

    • 여러가지 시험해본 결과.. 영어로 띄어쓰기 없이 갈겨쓰면 이런 결과가 나오는 것 같네요. 한글로 치면 잘나오고요 ㅎㅎ 일반적인 상황에서 발생할 상황은 아닌 것 같고.. 좋은 스킨 잘 쓰겠습니다 ~! ^^

    • 정상입니다.
      띄어쓰기 없는 영문자 나열은 기본적으로 붙어서 넘치는게 정상입니다.

      공백을 기준으로 줄바꿈이 되는게 기본이고, 강제로 단어를 줄바꿈해야할 경우
      word-break: break-all;
      css 속성을 별도로 부여해야 합니다.
      (보통 이속성은 사용하지 않는게 기본입니다.)

      단, 이렇게 하면, 줄바꿈이 불필요한 단어까지 줄이 차면 모두 잘라져서 줄바꿈이 되기 때문에 문장 가독성이 떨어지게 됩니다.

    • 답변 감사합니다. 그 마지막으로..http://troy.labs.daum.net/에 가면 pc&핸드폰 별로 사이트가 어떻게 나오는지 확인이 가능한데
      현재 스킨이 pc스크린->970px(970x600)으로 보면 본문이 너무 밑으로 쳐져 있네요
      이건 해결할 방법이 없을까요? ㅠㅜ 번거롭게 해서 죄송합니다

    • 본문이 너무 밑으로 쳐져있다는게 무슨 뜻인가요?
      제가 보기에는 정상적으로 출력되는 것으로 보입니다.

  • 스킨이 너무 예뻐요. 바로 적용하고 제가 사용하던 웹폰트 적용이랑 폰트 크기를 조절 햇는데요 메뉴 폰트 크기가 너무 작아 수정을 하니 검색버튼이 안눌리더라고요. 해결 방법이 없을까요? 최근 포스팅에 이번 스킨이랑 비슷한게 있던데 그건 검색창이 사이드바에 있던데.. 그렇게 수정 할 수 없을까요? 아예 그 스킨을 사용하자니 지금 스킨이 맘에 들어서요...😥😥 아.......... 그러고요 익스플로러에서는 아예 클릭 자체가 안되더라고요 크롬에서는 클릭은 되지만 반응이 없고

    • script.js 파일을 업로드하지 않으셨습니다.
      script.js 파일이 없으면 검색폼 반응 처리 및 웹브라우저 크기 변경에 대한 반응형 처리가 되지 않습니다.
      script.js 파일 업로드 하시고 다시 테스트 해보시기 바랍니다.
      (웹브라우저 캐시는 업로드 후 반드시 한번 지우셔야 합니다.)

      이 스킨은 검색창을 사이드바로 옮기려면 자바스크립트 파일 수정까지 되어야 합니다.

      초보자분들이게는 조금 어려운 문제일거고 사이드바로 검색을 옮겨진 버전은 다크라인2를 사용하는게 더 나을 것으로 보입니다.

    • 죄송합니다
      한가지 더 여쭤보고 싶은게 있는데요
      익스플로러에서는 제대로 보이는데
      크롬에서 보면 포스트 너비가 좁아져서
      구글 애드센스광고 사이로 포스팅 본문을 가르키는 하얀색 동근 선이 지나갑니다. 한 새로고침을 4~5번을 하다보면 정상 출력이 될때가 있습니다. 제말이 이해가 잘안되시다면 제블로그를 찾아주세요. 포스팅으로 올렸습니다 ^^

    • 사용하시는 스킨같은 실시간으로 레이아웃 크기가 가변으로 변경되는 스킨에 티스토리 플러그인으로 애드센스를 붙이면 전혀 대응이 되지 않습니다.

      컨텐츠 영역 너비가 정상 너비보다 줄어드는 현상은 애드센스가 붙으면서 나타나는 크롬에서만 보이는 현상이고, 티스토리 자바스크립트 플러그인이 애드센스를 붙이는 구조로 인해 발생하는 자바스크립트 코드와의 충돌 현상입니다.

      반응형 애드센스라고 되어있지만 티스토리 애드센스 플러그인은 반응형 웹의 가변 레이아웃을 정상적으로 지원하지 못합니다.

      애드센스 반응형 코드를 구글애드센스에서 복사해서 직접 붙여넣는 것을 추천합니다.

      티스토리 애드센스 플러그인은 최초 로딩할때 정해진 애드센스 너비를 하드코드로 고정하기 때문에 웹브라우저 크기가 가변으로 변하는 것에 전혀 대응이 되지 않습니다.

      현재 블로그의 티스토리 애드센스 플러그인이 붙은 글 내용 보기 화면에서 웹브라우저 너비를 줄여보면 애드센스 너비가 고정 크기로 잡혀서 오른쪽 사이드바로 넘어 들어가는 걸 확인할 수 있습니다.

      티스토리 애드센스 플러그인을 계속 사용하시겠다면 현재 스킨으로는 해결 방법이 없습니다.
      같은 컨셉으로 새로 나온 다크라인2 스킨으로 변경하시거나, 애드센스의 반응형 광고 코드를 사용하시는걸 추천합니다.

  • 혹시 sns에 이메일은 못 넣나요?
    본문에 사진을 두장을 넣으면
    사진이 본문 영역을 넘더라고요
    저번에 질문 드린 구글 광고처럼요....
    그래서 전체적인 컨테이너 크기를 늘리니깐 재대로 나오긴 하는데 익스플로러에서 접속하면 꼭 처음에는 본문이 사이드바 밑으로 붙더라고요 ㅡㅡ 새로고침 한번 하면 재대로 나오는데 ㅡㅡ 왜 이런거죠? 이것도 실시간으로 크기가 가변하는 스킨이라 그런건가요?

    • 1
      이메일 sns 아이콘 넣는 방법은
      스킨 원본 기준

      skin.html
      68~71행 사이 적당한 위치에

      <a href="mailto:myemail@domain.com" class="email" target="_blank"><div>Email</div></a>

      추가
      style.css
      198행에

      .social-link .email:before {
      content:"\f0e0";
      font-weight: 900;
      font-family: "Font Awesome 5 Free";
      }

      를 추가해주면 이메일 아이콘이 추가됩니다.

      2.
      사진을 두장 넣어서 영역이 넘치는 것은 스킨과는 무관한 부분입니다.
      스킨 css로 레이아웃상 넘치는걸 안보이게 할 수는 있지만, 애초에 티스토리 에디터에서 이미지를 붙일때 가로로 넘치도록 이미지를 붙여서 입니다.

    • 감사합니다
      그래서 스킨 너비를 늘렸는데요
      익스플로러로 초기 접속 할때만
      본문이 사이드바 밑에 붙어버려요
      한번 새로고침하면 바로 나오는데...
      왜 그런거죠?

      포스팅 사진들을 다 수정하자니
      노가다이고 스킨이 그냥 늘리고 싶은데

    • 이스킨은 스크립트로 브라우저 너비가 변동되는 것을 인식해 커텐츠 영역 너비를 자동으로 조절합니다.
      따라서 script.js 파일이 필수 입니다.
      링크된 블로그를 보면 script.js 파일이 없다고 나옵니다.
      scirpt.js 파일을 업로드하신 후 웹브라우저 캐시 한번 소거하시고 다시 확인해보시기 바랍니다.

    • 스킨 너비가 1160px인데
      1260px로 100px 늘리는 방법을 알려드리겠습니다.

      style.css 에서 1160 검색
      5개가 나옵니다.
      1260으로 모두 변경

      890검색
      1개나옵니다.
      #content

      990으로 변경

      style.css 반영하면 1260px로 전체 너비가 늘어나고 컨텐츠 영역은 최대 990px가 됩니다.

  • 안녕하세요~ 티스토리 시작한지 정말 며칠밖에 안 된 초보입니다.
    티스토리를 하나도 모르는데 블로그를 예쁘게 쓰고 싶어서 검색하다가 들어왔습니다.
    덕분에 스킨 정말 잘 쓰고 있습니다. 감사합니다.
    그런데 글을 목록만 보기로 설정했는데, 목록이 하나도 보이지 않는 문제가 발생했습니다.ㅠ
    혹시 제가 잘못 적용한건지...ㅠㅠ 어떤게 원인일까요? 내용만 보기는 잘 나오지만 글 목록이 하나도 안나오고있습니다ㅠ

    • 블로그에 등록된 글이 없어서 목록만 보기로 설정했다는게 어떤걸 말하는지 모르겠습니다.

      추측으로는 스킨 옵션 설정의
      홈설정, 기본설정에 있는 목록 구성 요소를 말하는게 아닌가 싶은데, 이 옵션은 제가 배포하는 스킨에서는 "목록+내용"으로 고정해놓고 사용해야 합니다.

      변경할 필요가 없는 옵션입니다.

    • 제가 설명이 부족했는데, 설명 감사합니다. 말씀해주신 부분 의미하는게 맞았구요! 스킨 편집-> 홈 설정, 기본설정 맞습니다!
      홈 설정은 그대로 목록+내용으로 뒀는데, 제가 쓴 글이 많아서, 카테고리를 눌렀을 때 내용 포함하지 않고 글 제목 목록만 나오게 하고 싶어서 적용했으나 내용이 나오지않아 문의드렸습니다. 말씀하신 대로라면 목록만 보기는 불가능한것인가요?ㅠㅠ

    • 글목록에 글내용 미리보기가 안되게 하려면
      style.css 원본기준
      1399행의
      display: block; -> display: none;
      으로 변경

      1400행은 삭제

      하면 글내용 미리보기가 표시되지 않게됩니다.