본문 바로가기

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

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

스킨명 : 반응형 그린라인 2단 티스토리 스킨



스킨설정으로 다양한 스킨 레이아웃을 생성할 수 있는 그린라인2 스킨이 등록되었습니다.

->반응형 2단 그린라인2로 이동




탑메뉴 형태로 붙은 카테고리 메뉴를 사이드바쪽으로 옮긴 추가 스킨이 하단 끝에 추가로 등록되어 있습니다.

용도에 맞게 골라서 사용하면 됩니다.

탑메뉴와 사이드바메뉴 스킨은 호환성이 없습니다.





- 네이버 블로그 느낌이 살짝 나도록 제작한 표준 2단 스킨입니다.


- 심플하고 단순한 컬러 톤을 원하는 블로거에게 추천합니다.


커버 기능 모두 지원합니다.


- 배경색과 타이틀 색상을 변경할 수 있어 다채로운 스킨 느낌을 낼 수 있습니다.


- 밝은 블로그 배경색 뿐만 아니라 어두운 배경색에도 모두 대응됩니다.


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


- 폰트어썸 벡터 아이콘 사용


- 레이아웃 너비는 1060px 이며, 기본 글쓰기 너비 설정은 720px 입니다.



패치리스트

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

2019.06.01 1.1.1 Patch - 모바일 화면 검색폼 메뉴 닫힘 버그 패치


2019.04.01 1.1.0 Patch - 방명록과 태그 페이지 상단에 불필요한 박스가 나오는 버그가 있어서 패치.

                                기존사용자는 skin.html 505~578행을 502~503행 사이로 옮기면 됩니다.


2019.03.31 1.0.2 Patch - style.css 2478행 삭제(불필요한 행)


2019.03.22 1.0.1 Patch - 모바일 화면에서 사이드바 카테고리에 그림자 효과가 남는 버그가 있어 패치.

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





미리보기 상태에서 브라우저 너비를 변경하면 반응형으로 레이아웃이 변하는 것을 확인할 수 있습니다.






스킨 옵션 설정에서 컬러 선택을 하면 스킨 배경색과 타이틀 색상을 변경할 수 있습니다.






설치 주의사항


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



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

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



3. 모바일 화면에서 사이드바 메뉴가 펼쳐진 상태에서 빈영역을 스크롤하거나, 사이드바 메뉴를 계속 밑으로 스크롤 하면 본문내용이 스크롤 되는 것때문에 불편한 분은 script.js 원본기준


16행 밑에

$('body').css('position','relative');

25행 밑에

$('body').css('position','fixed');

를 추가해주면 됩니다. 25행은 16행 내용이 추가되기 전의 위치입니다.


또는,


.fixposition(position:fixed;}

클래스를 하나 추가하고

$('body').addClass('fixposition');

$('body').removeClass('fixposition');

로 제어를 해도 됩니다.




스킨 설치 방법







* 탑메뉴 카테고리를 사이드바 위치로 옮긴 별도 수정판입니다.





  • 안녕하세요
    혹시 맞춤형 스킨제작이 가능하지 문의드립니다.
    이메일 j8088@naver.com 또는 010-7402-9636 연락부탁드립니다.

  • 비밀댓글입니다

  • 디자인 너무이쁜데요 혹시 카테고리를 상단말고 오른쪽에 있는 사이드바에 뜨게는 못하나요?

    • 옮기는건 가능하지만 수정내용이 많습니다. 그냥 위치만 바꾸는게 아니라 레이아웃 자체가 바뀌는 것이어서...

      먼저 위 글 내용 보시면 하단에 메뉴를 사이드바로 옮긴 별도 버전이 올라가 있습니다.

      원본 스킨을 쓰고 있는 경우 대체하시면 됩니다.
      커스터마이징을 하신 경우 아래 안내에 따라 수정작업을 진행하시면 위치를 변경할 수 있습니다.

    • 1. 2. 3단계로 진행하셔야 하고
      3번은 원본 스킨 기준이어서 해당 위치를 잘 찾아서 변경하셔야 합니다.

      1.
      ----------------------------------------------------
      카테고리 사이드바로 이동 처리

      skin.html

      75행 76행 사이에
      <div id="mobile_category" class="box_aside">
      <div class="tit_aside">Category</div>
      <!-- "여기에붙여넣음" -->
      </div>

      붙여넣고



      39~41행을 잘라내서(아래 내용임) - 주의 복사가 아니라 잘라냄.
      <div class="category">

      </div>



      맨위에서 붙여넣은 내용의
      <!-- "여기에붙여넣음" -->

      을 대체해서 붙여넣어 이동시킴




      script.js
      309 ~ 313 행 삭제(아래 내용 확인하고 잘라내야함. 잘못 잘라내면 에러남)
      }else{
      if($('#wrap_etc > #mobile_category').length){
      $('#mobile_category .category').detach().prependTo('.category-menu > .inner');
      $('#mobile_category').remove();
      }



      style.css

      449 - border, 454 - box-shadow 삭제

      /* 서브메뉴 화살표 처리 */

      467~495행 삭제

      .sub_category_list로 검색 해당 클래스를 가진 css 전부 삭제



      2. 반드시 1단계 완료 후 확인하고 진행
      --------------------------------------------------
      상단 바 제거

      skin.html에서
      <nav class="category-menu">
      <div class="inner">

      </div>
      </nav>

      제거


      style.css

      #header>.title 클래스 수정
      131행
      150px -> 100px


    • 3.
      --------------------------------------------------
      검색버튼 이동

      skin.html

      27~35행 <div class="search"></div>
      를 18행과 19행 사이로 이동시킴

      style.css
      원본 기준 305행 ~ 395행을 대체해 다음 css로 변경
      #header .search 및 하위 클래스들(데스크탑)

      #header .search {
      position: relative;
      width: 1060px;
      margin: 0 auto;
      }
      #header .search > .inner{
      position: absolute;
      width: 1060px;
      height: 42px;
      margin: 0 auto;
      }
      #header .search input {
      display: none;
      width: 280px;
      height: 42px;
      padding: 0 10px;
      font-size: 1em;
      line-height: 68px;
      color: #fff;
      border: 0;
      box-sizing: border-box;
      background-color: #00ba2e;
      border-radius: 10px 0 0 10px;
      }
      #header .search input::placeholder{
      color: #fff;
      }
      #header .search input:-ms-input-placeholder {
      color: #fff;
      }

      #header .search input::-ms-input-placeholder {
      color: #fff;
      }
      #header .search button {
      display: none;
      position: absolute;
      top: 8px;
      right: 45px;
      z-index: 10;
      font-size:1em;
      color: #fff;
      }
      #header .search > .inner:before {
      position: absolute;
      content: "\f002";
      font-family: "Font Awesome 5 Free";
      font-weight: 900;
      cursor: pointer;
      font-size: 1.5em;
      padding: 6px 8px 6px 8px;
      color: #fff;
      right: 0;
      top: 10px;
      background-color: #00ba2e;
      border-radius: 10px;
      z-index: 15;
      }
      #header .search .close-search{
      display:none;
      position: absolute;
      width:40px;
      height:42px;
      position:absolute;
      right:0;
      top:0;
      border-radius: 0 10px 10px 0;
      background: #00ba2e;
      }
      #header .search .close-search::before {
      position: absolute;
      content: "\f00d";
      font-family:"Font Awesome 5 Free";
      font-weight: 900;
      cursor: pointer;
      font-size:1.5em;
      line-height:1em;
      padding: 8px 8px 12px 12px;
      width:20px;
      height:20px;
      right:0;
      color:#fff;
      }
      #header .search.on .inner {
      width: 320px;
      float: right;
      top: 10px;
      right: 0;
      z-index: 15;
      }
      #header .search.on input {
      display: block;
      }
      #header .search.on .close-search {
      display: block;
      }
      #header .search.on .inner:before {
      display: none;
      }


      스킨 원본기준
      2138행 ~ 2187행
      #header .search 및 하위 클래스들(모바일)

      #header .search{
      position: absolute;
      width: 45px;
      top: 10px;
      right: 10px;
      }
      #header .search .inner{
      background: #fff;
      margin-top: 0;
      width: 45px;
      height:45px;
      border-radius: 15px;
      }
      #header .search .inner:before{
      color: #000;
      padding: 6px 4px 6px 10px;
      background: none;
      right: 5px;
      top: 0;
      }
      #header .search .close-search{
      background: #fff;
      border-radius: 20px;
      width: 45px;
      height: 45px;
      }
      #header .search .close-search:before{
      color: #000;
      padding: 10px;
      }
      #header .search.on{
      width: 100%;
      height: 60px;
      box-sizing: border-box;
      padding: 7px 10px;
      top: 0;
      right:0;
      }
      #header .search.on .inner{
      position: relative;
      width: 100%;
      height: 45px;
      background: #fff;
      box-sizing: border-box;
      top: 3px;
      right: 0;
      }
      #header .search.on input {
      width: 60%;
      margin: 3px 0 0 20%;
      border-bottom: 1px solid #000;
      color: #00ba2e;
      background: #fff;
      box-sizing: border-box;
      border-radius: 0;
      }

  • to.인포킹덤 티스토리 댓댓글 장애로 일단 별도의 댓글로 달아드립니다.
    ---------------------------------------------------------------
    어디서 <body>바로 밑에 넣으면 답변이 빨리온다고 보셨는지 모르겠지만, 구글의 공식 애드센스 가이드는 <head></head> 사이에 넣으라는 것입니다.
    <body> 태그 안에 넣는건 개인적인 경험일 뿐이지 통계적으로, 또는 구글이 그렇게 한다는 근거는 전혀 없습니다.

    저는 한번도 <body> 태그 밑에 애드센스 코드를 넣어서 심사를 받은 적이 없어서 이런 케이스로 심사가 잘되는지는 모르겠습니다.

    <body id> 에 넣는다는건 지금 적용하신대로 <body>태그 끝나고 그 뒤에 넣으라는 겁니다.
    태그 안에 넣는 방법같은건 없습니다.

    애드센스 심사는 생각보다 오래걸립니다. 반쯤은 봇이 기본 체크를 합니다만, 많이 밀려서인지 경험상 새 사이트인 경우 2주가까이 소요되는 걸로 알고 있습니다.(제가 최근 붙인 사이트는 그렇습니다.)
    컨텐츠 양이 아주 풍부한 경우가 아닌 경우 더욱 그렇습니다.

    기본적으로는 요즘은 멀쩡한글 20-30개정도가 최소 글(내용 채우기가 아닌 정상적인 글 포스팅) 기준이고 평균 2주정도는 지나야 승인 결과가 옵니다.

    오래기다리는 경우 한달넘게 기다리는 경우도 있습니다. 물론 이런 경우는 컨텐츠 부실이거나 기타 심사 보류사유가 있는 경우가 대부분입니다.

    일주일 정도 더 기다려보시길 추천합니다.
    까다로운 요즘 심사 기준에는 부합하는 정도까지는 블로그가 되어있는것으로 보입니다.

  • 모바일이나 태블릿 보기 화면시 사이드바 버튼을 눌러서 나타나게 한 다음 스크롤을 계속해서 내리면 본 페이지(body)가 계속해서 스크롤됩니다. 사이드바가 나타났을때는 바디의 스크롤을 막고 사이드바만 움직이도록 하는 방법이 있을까요??

    아무리 검색을 해보아도 overflow: fixed; 와 position: fixed 를 어딘가 넣어야 하는 것 같은데 이리저리 넣어봐도 적절하게 처리가 안되네요 ㅠㅠ

    • 스크롤락이 걸리지 않는것때문에 불편하신 것 같은데, 장단점이 있는 부분이어서 해당 스킨에서는 제외가 되어 있습니다.

      기술적으로 어려운 점은 없고
      body 태그에
      position: fixed;
      속성을 부여하는 형태로 락을 걸어줍니다.

      스킨 원본기준

      script.js 파일을 보시면
      16라인 밑에 $('body').css('position','relative');

      25라인 밑에 $('body').css('position','fixed');
      를 추가해주시면 됩니다.

      아니면
      .fixposition{
      position: fixed;
      }
      이런 클래스를 하나 만들어서
      $('body').addClass('fixposition);
      $('body').removeClass('fixposition);
      이런식으로 제어를 해줘도 됩니다.
      보기에는 후자쪽이 조금더 깔끔하고 고급스럽지만...
      기능적으로는 동일합니다.

    • 와우!! 이렇게 친절하실수가!! 너무 감사합니다. 제가 딱 생각했던 그대로입니다. 잘 배워갑니다!!

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

  • 서치 색상 변경은 어떻게 하나요? 블랙으로 바꾸고 싶은데~ ㅜㅜ

  • 감사합니다~

  • 비밀댓글입니다

    • 보통은 메인 페이지에 커버 기능을 사용해서 카테고리 최신글을 고정합니다.

      스킨편집기 설정에서 커버 기능을 켜고
      커버타입을 하나만 남깁니다.
      새로만들어도 되며 커버리스트, 커버썸네일 리스트 정도가 원하는 것에 맞을 겁니다.
      커버 아이템 설정 화면에서
      커버 타입을 고르고
      콘텐츠를 "최신글", 또는 "인기글"
      로 선택
      그리고 글설정에서 카테고리를 선택하면 해당 카테고리의 최신글/인기글이 정한 글수만큼 커버 페이지에 표시됩니다.

      다른 커버아이템을 모두 지우고 이것만 남겨두면 커버페이지에 글 전체 목록처럼 특정 카테고리의 글들만 목록으로 표시됩니다.

      글목록 형태로 표시하기를 원하면 보통 커버 타입으로 커버 "리스트"를 이용하면 됩니다.

    • 2019.07.14 21:50 댓글주소 수정/삭제

      비밀댓글입니다


닫기