본문 바로가기

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

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

반응형

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

2021.06.14

기능이 대폭 업그레이드 된 버전 3.0이 새로 배포되었습니다.

 

> 반응형 보더리스2 버전 3.0 스킨 배포 안내 보기

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

 

 

 

티스토리 스킨 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 파일 재업로드
      웹브라우저 캐시 한번 소거
      화면 갱신

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

  • 비밀댓글입니다

    • 광고 노출에 유리한 건 아니구요 적용한 스킨은

      044 반응형 민트페이퍼 2단
      https://apost.kr/299

      을 수정한 것 입니다.

      스킨 기능 테스트용으로 이런 저런 수정을 많이 해서 원래 스킨과는 크게 관련이 없습니다.

  • 안녕하세요 스킨 정말 감사합니다.

    스킨편집에서 사이드바에 최근글 인기글 있는거 체크했는데, 화면에 뜨질 않네요.
    초반에는 뜨다가 말다가 하던데, 이제는 아예 안 뜹니다.

    스킨편집을 누를 때, 왼쪽에 프리뷰로 나오는 홈페이지에는 보이는데,, 티스토리 문제인 걸까요?

    • 고쳤습니다.
      티스토리 스킨 변경에서 현재 스킨을 보관한 뒤, 다시 같은 스킨으로 적용하니까 고쳐지네요. 감사합니다.

  • 비밀댓글입니다

    • 블로그 관리자 화면 들어가서
      왼쪽 메뉴의 꾸미기 > 모바일로 들어가면

      티스토리 모바일웹 자동연결을 "사용하지않습니다"로 변경하고
      밑에 변경사항 변경 버튼을 누르면 됩니다.

      이 기능이 켜져있으면 티스토리가 제공하는 기본 모바일 웹페이지가 표시됩니다.

  • 비밀댓글입니다

  • 비밀댓글입니다

    • 스킨 원본 기준
      style.css
      1781행과 1782행 사이(.entry-content 클래스 밑)에

      .entry-content .tt_article_useless_p_margin{
      max-width: 1024px;
      margin: 0 auto;
      }

      클래스를 추가하면
      최대 너비가 1024px로 컨텐츠 레이아웃 너비가 제한되고 가운데 정렬이 되어 보이게 됩니다.
      더 좁게 하고 싶으면 1024를 더 작은 값으로 줄여주면 됩니다.

      대충 원하시는 의도가 이게 아닌가 싶은데...

      그리고
      조만간 배포하는 스킨들이 전체적으로 새버전으로 업데이트가 될 예정입니다.

      아마도...
      새버전에는 컨텐츠 너비값을 옵션 설정으로 변경할 수 있는 기능이 들어가게 될 예정입니다.

      일단 패치해서 쓰다, 새버전 나오면 업데이트를 하시면 될 것 같습니다.

  • 비밀댓글입니다


닫기