본문 바로가기

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

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

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




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

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

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





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


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


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


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


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


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


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


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



패치리스트

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

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');

로 제어를 해도 됩니다.



034_greenline.zip


스킨 설치 방법







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

034_greenline_sidecategory.zip



  • 안녕하세요
    혹시 맞춤형 스킨제작이 가능하지 문의드립니다.
    이메일 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);
      이런식으로 제어를 해줘도 됩니다.
      보기에는 후자쪽이 조금더 깔끔하고 고급스럽지만...
      기능적으로는 동일합니다.

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

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