본문 바로가기

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

티스토리 스킨 115 - 반응형 2단 보더리스2 스킨 배포합니다.

티스토리 스킨 115 : 반응형 2단 보더리스2



* 브라우저 전체 너비 영역을 사용하는 와이드 스킨입니다.

* 블로그 영역들을 구분선으로 구분해 박스스타일로 정돈해 배치한 느낌을 살린 스킨으로 IT, 기술 블로그에 추천합니다.



  • 커버 기능은 커버 리스트 기능만 제공합니다.
  • 사이드바 배치 위치를 왼쪽, 오른쪽 중에 선택할 수 있습니다.
  • 헤더 배경 이미지를 적용할 수 있습니다.
  • 헤더 텍스트 정렬을 왼쪽, 가운데로 설정할 수 있습니다.
  • 카테고리 메뉴를 헤더 하단, 또는 사이드바에 배치할 수 있습니다.
  • 스킨에 포함된 index.xml 파일과 images 폴더 안의 script.js 파일 및 이미지 파일을 모두 업로드해야 스킨 레이아웃이 정상 동작합니다.


 





스킨 옵션 설정

 

스킨 옵션 설정은 티스토리 관리자 왼쪽 메뉴의 "스킨편집" 을 클릭하면 됩니다.



* 이미지를 클릭하면 옵션 항목들을 자세히 볼 수 있습니다.



 

패치 내역

 

  • 2020-06-04 1.0.2 패치 - 모바일 화면에서 초기 로딩시 사이드바 메뉴가 순간적으로 나타났다 사라지는 현상 개선


설치 주의사항

 

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


  • 117도 그렇고 이것도 그렇고 적용 후 휴대폰로 접속 시 반응형 예시처럼 안나오고 사이드바 크기가 유지되고 왼쪽에 엄청 자은 화면에 글리스트가 나오는데 제가 잘못 적용한건가요?? xml, css, html 모두 업로드 했습니다.

  • 답변 감사합니다~ 해결했습니다. 다만, 썸네일 크기를 정사각형으로 조절해보고 싶은데 css에서 어떤 항목을 건드리면 되는지 알려주실 수 있을까요? thumbnail로 검색하니 많은 항목들이 나옵니다 ㅜㅜ

    • 이스킨은 썸네일이 정사각형입니다.
      다른 크기로 변경하고 싶으면

      https://apost.kr/167

      이걸 먼저 보셔야 합니다.
      가로 세로 비율에 맞춰야 하기 때문에...

      크기 자체를 더 키우면 글내용 미리보기 내용이 4줄이 최대여서 아래 여백이 생기는 문제가 있습니다.

      그런 것들을 고려해서 정해진 최적의 크기이고...

      정사각형 썸네일이기 때문에 1:1 비율이고
      글목록 썸네일 크기는

      .post-item .thum img

      이 클래스를 style.css에서 찾으면 속성에 크기값이 있습니다. 너비 기준이고 높이는 자동입니다.
      스킨원본 기준 1308행 입니다.

  • 안녕하세요 스킨 배포 감사드립니다.
    설정대로 스킨 적용 잘 했는데요 제 메인화면 로고위에 자꾸 파란색 두줄이 나오는데 그건 왜 그럴까요? :(

    • 사이드바에 다음 검색어 박스를 붙이셨는데, 사이드바 위치 레이아웃에 맞지 않아도 다음 검색어 검색바 위아래 파란 줄이 위로 밀려 붙은 것입니다.

      다음 검색어 플러그인을
      <div class="box_aside>
      //여기에 다음 검색어 플러그인 소스를 붙여넣음.
      </div>

      이렇게 붙여넣어야 사이드바 레이아웃 배치 순서에 맞게 배치가 됩니다.

    • 와아 그렇군요 당장 다음검색어 없앨래요^^^^^^^^ 넘넘 감사합니다 ㅠㅠ

  • 감사합니다 큰 도움 얻어갑니다!!!! 복받으실거에요!

  • 아 혹시 사진이 없는 글은
    이미지 박스를 빼도록 할 수는 없을까요 ?

    • style.css
      -----------------
      1155행 min-height: 200px; 삭제
      또는 .cover-list ul li .article-info 검색

      .cover-list ul li .article-info{
      box-sizing: border-box;
      float: left;
      min-height: 200px;
      }

      1161행 width: 200px; 삭제
      또는 .cover-list ul li .article-info:first-child 검색
      .cover-list ul li .article-info:first-child{
      width: 200px;
      margin-right: 30px;
      }


      1322행 min-height: 200px; 삭제
      또는 .post-item .article-info 검색
      .post-item .article-info{
      float: left;
      min-height: 200px;
      }
      1326행 width: 200px; 삭제
      또는 .post-item .article-info:first-child 검색
      .post-item .article-info:first-child{
      width: 200px;
      margin-right: 30px;
      }



      1295-1307행
      .post-item .thum:before{
      }
      클래스 삭제

      1130-1143행
      .cover-list ul li .thum:before{
      }
      클래스 삭제



      script.js
      -----------------
      94행
      .post-item,
      , .cover-list ul li
      두개 삭제해서
      $(".recent-posts > li").each(function(){
      로 변경


      또는

      function setNoImage() 함수 삭제
      13행, 51행 setNoImage() 호출 2군데 삭제

      로 불필요한 스크립트를 다 지워도 되고

      13행, 51행 setNoImage() 호출 2군데를

      //setNoImage();

      로 리마크 처리를 해서 호출만 하지 않도록 해도 됩니다.(나중의 복원을 위해서)


      업데이트 후
      --------------------
      script.js 파일 재업로드
      웹브라우저 캐시 한번 소거
      화면 갱신

  • 정말 감사합니다 ...ㅠㅠ
    큰 복 받으실거에요!!!


닫기