본문 바로가기

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

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

반응형

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

 

 

어두운 배경색에 특화된 스킨입니다.

글자색이 흰색계열로 고정되어 있기 때문에 스킨 옵션 설정할 때 밝은 스킨 배경, 섹션 배경을 설정하면 글자가 잘 보이지 않게 되므로 주의해야 합니다.

 

 

 

 

스킨 주요 특징

 

40가지 이상의 스킨 옵션 설정 항목을 사용해 원하는 모든 블로그 레이아웃을 만들 수 있습니다.

스킨 옵션 설정에 대한 상세 설명은 ->스킨 옵션설정 글을 보시기 바랍니다.

 

  • 스킨 배경색, 각 컨텐츠 섹션별 배경색, 테두리 라인 색/스타일 설정 가능
  • 1단, 2단 레이아웃 설정 가능
  • 사이드바를 왼쪽, 오른쪽 배치 가능
  • 카테고리를 탑메뉴에 배치 가능
  • 다양한 커버 슬라이드 애니메이션 효과
  • 커버 슬라이드 교체 시간 설정 가능
  • 블로그 전체 배경 및 헤더 배경 이미지 설정 가능 
  • 리스트와 썸네일 방식 글 목록 보기 선택
  • 모바일용 컴팩트 레이아웃 설정 지원

 

 

 

다크라인2에서 새롭게 추가/변경된 스킨 옵션 항목

 

 

  • 레이아웃 - 카테고리 위치 : 헤더 영역이 2개로 구분되어 헤더 상단과 헤더 하단에 위치시킬 수 있는 옵션 추가
  • 공통/페이지 - 모서리 둥글게 : 전체 스킨에 거쳐서 각 섹션 및 개별 항목들 전체 요소에 둥근 모서리가 적용됩니다.
  • 공통/페이지 - 테두리 라인 표시 : 각 섹션별로 테두리 라인을 표시합니다.
  • 공통/페이지 - 테두리 라인 컬러 : 테두리 라인 색상을 지정합니다. 테두리 라인 표시가 켜져있어야 적용됩니다.
  • 공통/페이지 - 테두리 라인 스타일 : 테두리 라인의 모양을 지정합니다. 테두리 라인 스타일은 실선, 점선, 긴점선 중 한가지를 선택할 수 있습니다. 테두리 라인 표시가 켜져있어야 적용됩니다.
  • 공통/페이지 - 섹션 배경 컬러 : 각 컨텐츠 섹션 영역의 배경색을 지정할 수 있습니다. 스킨 배경색이 보이도록 하려면 투명색을 지정하면 됩니다.

 

 

 

 

* 이미지를 클릭하면 옵션 항목들을 자세히 볼 수 있습니다.(스킨 기본 설정값으로 설정된 상태입니다.)

 

 

 

패치 내역

 

  • 2019-07-29 1.0.1 - 검색폼 버그 패치
  • 2021-02-16 1.0.2 - SNS 링크에 이메일 주소 항목 추가

 

 

 

설치 주의사항

 

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

 

 

 

 

 

 

반응형

Comments

  • 안녕하세요!
    올려주신 스킨 너무너무 예뻐요
    어제 거의 하루 종일 붙잡고 이것저것 수정했거든요

    그런데 모바일에서 게시글로 들어가면 배경 이미지가 자동으로 확대되면서 화질이 엄청 많이 깨지는데
    이건 도저히 혼자 해결을 못하겠어요 ㅜㅠ
    모바일에서 접속했을때 배경 이미지 사이즈를 자동으로 변경하지 않으려면 어디를 손봐야할까요?

    문제를 다 해결해주십사 요청하는건 아니고 간략한 팁이라도 주시면 감사하겠습니다 ㅜㅠ

    • 배경 이미지가 모바일 글보기에서 어떻게 깨지는지 확인이 안됩니다.
      폰으로 들어가봤는데 정상적으로 배경이미지가 잘 보이고, 특별히 이상은 없어보입니다.

  • 안녕하세요. 스킨 아주 잘 사용하고 있습니다! 문의 사항이 있어 댓글 남겨봅니다..
    https://dogbird-foot.tistory.com/9
    https://dogbird-foot.tistory.com/21

    9번 링크 게시글의 가장 아래에 보시면 제가 외부 링크를 달아둔게 있는데요.
    원래 다크라인2 스킨은 기본 글씨체가 하얀색이더라구요. 근데 링크 부분의 글씨색은 타이틀이 검정, 링크가 회색으로 보여서 배경이 검정색 계열이다보니 잘 글씨가 안보이더라구요,,

    21번 링크 게시글은 게시글 처음 부분에서 조금 내려보면 첨부파일을 올려두었는데 이것도 마찬가지로 글씨가 검정색이라 잘 보이지 않습니다. 첨부파일은 폴더이미지 같은게 들어가던데 그것도 짙은 회색이라,,, 보이질 않네요

    포스팅할때 HTML모드로 바꾸어봐도 링크만 달려있지 폰트색상이나 박스 색상 등은 없더라구요,,,
    html이나 css의 어느부분을 수정하면 되는지 작은 팁이라도 주십사하고 댓글 남겨봅니다 ㅜㅜ

    • 두가지 모두 신스킨에서 새로 추가되어 티스토리 시스템에서 뿌리는 css가 입혀진 것입니다.

      가능한 경우 스킨단에서 이걸 강제로 재적용해서 풀어줘도 되는데 배포하는 스킨 기준에서는 이렇게 시스템 css를 과도하게 재적용을 하면 나중에 티스토리 시스템 업데이트시 예상하지 못한 문제가 생길 수 있습니다.

      스킨패치를 할지는 좀더 봐야할 거 같고..

      수정할 부분만 알려드리겠습니다.

      스킨원본 기준
      style.css 59행

      전역 html태그 css 지정에

      color: #fff !important;

      를 추가해서 전역 글자색이 흰색이 되게 강제 지정


      아니면 개별로 글내용의 해당 되는 부분만 적용하려면

      .entry-content a -> 2557행
      .entry-content p ->2494행

      두개의 css 클래스 속성으로
      color: #fff !important;
      를 추가, 또는 변경해주면 됩니다.


      아얘 범위를 더 좁히면
      style.css
      .entry-content 클래스 근처에(2475행 이하 적당하 위치에 붙이면 됩니다.)

      figure.fileblock .filename, #tt-body-page figure.fileblock .filename{
      color: #fff;
      }

      figure[data-ke-type='opengraph'] div.og-text p.og-title, #tt-body-page figure[data-ke-type='opengraph'] div.og-text p.og-title{
      color: #fff;
      }

      figure[data-ke-type='opengraph'] div.og-text p.og-desc, #tt-body-page figure[data-ke-type='opengraph'] div.og-text p.og-desc{
      color: #fff;
      }

      figure[data-ke-type='opengraph'] div.og-text p.og-host, #tt-body-page figure[data-ke-type='opengraph'] div.og-text p.og-host{
      color: #fff;
      }

      이런 코드를 넣어주면 css 사용 원리에 맞춰 해당되는 신스킨 추가 블록부분만 오버라이드를 해주는게 되는데, 너무 번잡스럽고 복잡해집니다.

      편한걸로 블로그에 맞춰서 적용해 쓰면 될것 같습니다.

    • 감사합니다.
      첫번째 방법은 아마 전역변수니까 연관된 대부분의 글씨가 흰색이 되버릴거 같아서 두번째 방법으로 스타일 값을 지정해주니 잘 수정되었네요! 감사합니다 ㅠㅜㅠ 정말 너무 감사해요.
      대충 어떻게 해야한다~ 하는건 감이 오는데 정확한 변수명을 알 방법이 없어서 자꾸 질문드리게 되네요. 즐거운 하루 되세요~!

  • 와 너무 깔끔하고 좋네요. 잘 쓰겠습니다~!!^^

  • 이것저것 만져보고 있는데 혹시 본문 글 나오는 부분 너비를 조금 줄이는 방법을 알 수 있을까요?
    px을 이리저리 만져봤는데 자동 크기 조절이라 그런지 변하질 않네요 ㅠㅠ

    • 글나오는 부분 너비라는게 아마도 글보기 컨텐츠 영역만을 의미하는 것 같은데...

      style.css 에서
      .entry-content
      검색해서
      속성으로

      margin: 0 30px;

      정도 주면 글 내용 좌우에 여백이 좀 들어갑니다.

      원하는게 이게 아니면 글 나오는 부분 너비가 어느 부분을 말하는지 설명을 좀더 자세히 해주시면 좋겠습니다.

    • 제가 설명을 이상하게 했네요 죄송합니다. 본문 너비(실제 글쓰면 글이 나오는 부분)를 좀 줄이고 싶습니다!


      /* 글보기 */
      .entry-content{
      color: #efefef;
      }
      .entry-content h1 {
      margin: 50px 0 20px;
      font-size: 1.6875em;
      }
      .entry-content h2 {
      margin: 50px 0 20px;
      font-size: 1.5em;
      }
      .entry-content h3 {
      margin: 50px 0 20px;
      font-size: 1.3125em;
      }
      .entry-content h4 {
      margin: 50px 0 20px;
      font-size: 1.125em;
      }
      .entry-content p {
      margin-bottom: 24px;
      font-size: 0.9375em;
      line-height: 1.6;

      말씀하신 부분에 앞에 숫자랑 뒤의 숫자를 다 조정해봤는데 본문에 위아래 너비가 바뀌고 좌우 너비가 바뀌지 않아서요..!

      헛 지금 깨달은건데 혹시 파일 자체를 수정하고 재업로드하는 방식일까요? 한번 해보겠습니다!

    • 티스토리 스킨 편집기 화면에서 직접 위치를 찾아서 편집해보세요.

    • 찾았습니다! ㅠㅠㅋ
      제가 설명을 잘 못드려서 서로 다른 곳을 보고 있었던 것 같네요.ㅠㅠ

      /* 내용 */
      #content{
      position: relative;
      float: left;
      width: 800px;
      margin: 0;
      box-sizing:border-box;
      }
      이부분에 width부분을 고치니까 컨텐츠 너비가 줄어드네요. 좋은 스킨 만들어주셔서 감사합니다. 잘 쓸게요!^^

    • 해결되었네요 ^^;

  • 안녕하세요. 오랜만에 다시 찾아왔습니다. ㅎㅎ 스킨 감사히 잘 쓰고 있습니다.
    혹시 여기 블로그처럼 블로그 내부 글들을 검색하는 기능을 어떻게 켤 수 있을까요?
    아무리 검색해봐도 나오질 않네요 ㅠㅠ
    검색해보면 다 구글 검색 노출 이런것만 뜹니다.. ㅠㅋ

    • 스킨 소스를 커스터마이징 하면서 사이드바 검색어 입력폼 영역을 삭제한 것으로 추측됩니다.

      <div id="sidebar-search" class="box_aside">
      <div class="search ">
      <div class="inner">
      <input type="text" name="search" value="" placeholder="검색어를 입력하세요." onkeypress="if (event.keyCode == 13) { try{window.location.href='/search/'+looseURIEncode(document.getElementsByName('search')[0].value);document.getElementsByName('search')[0].value='';return false;}catch(e){} }">
      <button type="submit" class="" onclick="try{window.location.href='/search/'+looseURIEncode(document.getElementsByName('search')[0].value);document.getElementsByName('search')[0].value='';return false;}catch(e){}">검색</button>
      <div class="close-search"></div>
      </div>
      </div>
      </div>

      이 코드를 복사해서

      skin.html
      에서 id="wrap_etc" 이걸 검색한 후 이 줄 위에 붙여넣으면 사이드바 최상단에검색바가 표시될겁니다.


    • 소스 붙이니까 되네요 감사합니다..!

      붙이니까 검색창이 두 개 떠서 찾아보니까

      <div id="wrap">

      <div class="nav">
      <button type="button" class="mobile-menu"><span>메뉴</span></button>

      <div class="search <s_if_var_open-search> on</s_if_var_open-search>">
      <div class="inner">
      <s_search>
      <input type="text" name="" value="" placeholder="검색어를 입력하세요." onkeypress="if (event.keyCode == 13) { }">
      <button type="submit" class="<s_if_var_open-search> attach</s_if_var_open-search>" onclick="">검색</button>
      <div class="close-search<s_if_var_open-search> attach</s_if_var_open-search>"></div>
      </s_search>
      </div>
      </div>
      </div>


      이런 코드가 있어서 검색창이 두 개가 돼서 이코드를 지우고 주신 코드를 해당 위치에 붙이니까 정상적으로 뜨네요 ㅎㅎ 제가 사이즈 고치면서 이것저것 만지다가 뭔가 부분적으로 삭제를 했나봅니다 ㅠㅋ

      해결해주셔서 감사합니다. 번창하세요!! ^^ㅎ

  • 멋진 스킨 감사합니다.
    웹프로그래밍 및 프로그래밍 지식이 전무한 티스토리 입문자입니다.
    공유해주신 스킨을 적용, 사용하다가 도움을 요청하고자 덧글 답니다.

    해당 스킨 적용 후 타이틀 영역에 이미지를 삽입하고자 하는데
    블로그 옵션 > 레이아웃 > 헤더 > 타이틀 대체 이미지 업로드 기능을 통해 이미지를 업로드하면 이미지가 헤더 영역을 채우는 것이 아니라
    부분적으로 잘려서 상하폭이 좁고 가로로 화면 너비를 가득 채우는 긴 직사각형 형태로 출력됩니다.
    이미지가 삽입되는 타이틀 박스의 크기를 키우면 될 것 같아 html / css 편집모드에서 관련 수치를 찾아 하나하나 변경하고 미리보기를 하는
    방법으로 시험을 했는데 HTML 및 CSS 지식이 없는 상황에서는 한계가 있어 도움을 부탁드립니다.
    참고로 동일한 증상이 공유해주신 '반응형 베이직 그레이디언트' 스킨에서도 나타납니다.

    혹시 해당 증상에 대한 해결방법을 부탁드릴 수 있을까요.

    • 해당 기능은 블로그 타이틀 텍스트를 이미지로 대체하는 기능입니다.

      스킨옵션에서 헤더 그룹의 헤더배경 이미지사용(header-bg.jpg) 을 켜면 헤더 배경 이미지 옵션이 켜지고 기본 포함된(업로드했으면) 헤더 배경이미지가 표시됩니다.

      헤더 이미지를 변경하고 싶으면 header-bg.jpg 파일명으로 교체할 이미지를 만들어서 업로드를 해서 덮어쓰면 됩니다.

      티슽토리 캐시 갱신에 시간이 다소 걸리므로 바로 확인하려면 웹브라우저 캐시를 한번 소거해주면 됩니다.

    • 감사합니다.
      타이틀 대체 이미지 업로드 옵션이 아니라헤더 배경 이미지 (header-bg.jpg) 자체를 HTML/CSS 편집기에서 업로드하여 교체하면 되겠군요.
      늦은시간에 빠르게 답해주셔서 정말 감사합니다.

  • 복잡하고 너무 화려하고 눈아프게 밝은거 싫어하는 저에게 딱 맞춤입니다.
    초보라 아무것도 몰라 막막했는데 덕분에 깔끔한 스킨을 적용했습니다.
    정성들여 만드셨는데 감사 인사는 해야할 거 같아 짤막하게 댓글 남깁니다.
    감사합니다.

  • 와 정말 감사합니다.
    진짜 깔끔하고 제가 원하던 스킨이에요 감사히 쓰겠습니다.
    첫 블로그를 시작하려하는데 감사의 인사는 드리는게 예의이고 매너인거 같아 댓글남깁니다 ㅎㅎ
    좋은하루되시고 새해복 많이받으세요

  • 안녕하세요? 소중한 스킨 감사드리며 문의 좀 드릴께요.
    헤더 이미지 크기를 [ 헤더 > 좁은 헤더 높이 사용( ○) ] 이 옵션 말구... 이미지 영역 높이를 수치로 지정할수 있는 방법이 있을까용?

    • 반응형 스킨이기 때문에
      헤더 높이가 4가지 경우가 발생합니다.
      카테고리가 위에 있는 경우/사이드바에 있는 경우의 2가지 헤더 높이가 있고, 타블렛, 모바일 환경에 다시 2가지가 생겨서 총 4가지가 됩니다.

      183행 #header
      201행 .category-side #header

      2897행 #header


      에 height 속성값이 높이입니다.
      타블렛과 모바일은 높이가 같아서 1개만 고치면 됩니다.

      기본 헤더 높이 속성 값 적용 기준이므로 "좁은 헤더 높이 사용" 옵션을 반드시 끄시고
      위 행에 있는 "height" 속성값을 변경하면 됩니다.
      183, 201행의 데스크탑 헤더 높이는 카테고리 위치에 따라 둘중 하나만 사용됩니다.
      따라서 카테고리 위치에 따라 2개만 수정하면 될 것 같습니다.

  • 어포스트님 감사합니다!
    혹시... 다른 스킨에는 Email Address가 있던데, 제가 위 스킨을 꼭 사용하고 싶어서ㅠ 혹시 SNS에 Email 을 추가하는 방법이 있을까용?

    • 스킨 옵션을 만드는건 너무 긴 내용일거 같고 그냥 수동으로 붙여넣으면 됩니다.
      스킨 원본기준
      skin.html
      129~133행이 sns 아이콘 표시하는 줄입니다.
      133행 밑에 빈줄을 하나 만들고(아니면 원하는 sns아이콘 사이에 빈줄을 만들고)

      <a href="mailto:address@email.com" class="email" <s_if_var_newwindow-snslink>target="_blank"</s_if_var_newwindow-snslink>><div>이메일</div></a>

      를 붙여넣고 본인 이메일 주소를 하이퍼링크에서 변경해주면 됩니다.


      그리고 style.css에서
      280행 밑에 빈줄을 하나 만들고 아래 내용을 붙여넣으면 됩니다.

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

    • 이메일주소를 스킨옵션설정에서 추가할 수 있도록 스킨이 패치되었습니다.
      스킨 전체를 재적용하면 스킨 옵션 설정 항목에 이메일 주소 설정 항목이 새로 표시됩니다.

  • 익명 2021.02.21 15:39 댓글주소 수정/삭제 댓글쓰기

    비밀댓글입니다

    • 스킨에 신텍스하일라이트 잘 적용됩니다.
      신텍스하일라이트 코드 블록은 입력한 코드와 언어가 맞지 않으면 모두 검정 코드로 출력됩니다.
      프로그래밍 코드를 입력했는데 html/xml로 코드블록 언어 타입을 지정하신걸로 보입니다.
      html 코드를 html 타입으로 다시 등록해보시기 바랍니다.

      그리고 기본 신텍스하일라이트는색상이 잘 안보입니다.
      기본 말고 그 밑의 아톰이나 기타 다른걸로 테마를 플러그인에서 바꿔보시기바랍니다.

  • 익명 2021.02.27 02:32 댓글주소 수정/삭제 댓글쓰기

    비밀댓글입니다

  • 안녕하세요. 스킨 너무 관심있어서 적용하고싶은데, 혹시 이제 배포 중단일까요...? ㅠ,ㅠ

  • 안녕하세요. 다크라인 스킨 잘 사용하고 있습니다. 좋은 스킨 만들어주셔서 감사합니다 :)
    요즘 공부하면서 개발한 코드를 블로그에 올리려고 하는데, 코드블록도 검은색으로 나와서 구분이 되지 않습니다.
    코드 블록부분 배경색상은 어떻게 수정할 수 있는지 궁금합니다.

  • 안녕하세요 좋은 공유 감사합니다 저는 blockquote를 많이 사용하는데 이부분은 다크적용이 안돼서 추가 요청드립니다.

    .entry-content blockquote span {
    color: #fff
    }

    • 알려주셔서 감사합니다.

      blockquote 태그는 티스토리 시스템에서 배경색과 텍스트 색상을 정해서 뿌립니다. 스킨에서 정한 것이 아닙니다.

      그리고, 배포 스킨의 css 보다 우선 순위가 있습니다.

      그래서 css 를 강제적용(!important)해야 하는데, 티스토리 시스템에서 뿌리는 것들은 임의로 수정을 하지 않는게 좋기 때문에 이때는 그냥 놔둔거 같습니다.

      style.css
      2587행

      .entry-content blockquote {
      margin-top: 10px;
      margin-bottom: 10px;
      padding: 8px 16px;
      border-left: 4px solid #e0e0e0;
      background-color: #282c34 !important;
      color: #abb2bf !important;
      }

      부분을 수정해서 스킨 패치를 했습니다.

      해야하나 말아야 하나 조금 애매한데, 일단 보기 좋은게 더 나은거 같아서 패치를 했습니다.





❌ 닫기