본문 바로가기

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

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

스킨 101 : 반응형 2단 보더리스

 

 

 

* 여백이 있는 심플한 레이아웃의 2단 스킨입니다.

 

 

- 컨텐츠 영역 너비를 830px(기본), 730px(좁게) 중에서 선택할 수 있습니다.

- 블로그 각 섹션(헤더, 사이드바, 푸터, 카테고리 메뉴)에 테두리선을 설정할 수 있습니다.

- 커버 기능은 커버 리스트 기능만 제공합니다.

- 사이드바 배치 위치를 왼쪽, 오른쪽 중에 선택할 수 있습니다.

- 헤더 배경 이미지를 설정할 수 있습니다.

- 헤더 영역 타이틀, 블로그 메뉴, 카테고리를 가운데 정렬, 왼쪽 정렬로 설정할 수 있습니다.

- 카테고리 메뉴를 헤더 하단, 또는 사이드바에 배치할 수 있습니다.

- 스킨에 포함된 index.xml 파일과 images 폴더 안의 script.js 파일 및 이미지 파일을 모두 업로드해야 스킨 레이아웃이 정상 동작합니다.

 

 

 

 

 

 

스킨 옵션 설정

 

스킨 옵션 설정에 대한 상세한 설명은 ->스킨 옵션설정 글을 보시기 바랍니다.(일부 옵션 항목은 제외되어 있습니다.)

 

 

 

 

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

 

 

A. 사이드바 위치를 왼쪽, 오른쪽 중에서 선택할 수 있습니다.

 

 

 

 

B. 각 블로그 섹션별(헤더, 카테고리 메뉴, 사이드바, 푸터)로 테두리선을 지정할 수 있습니다.

 

 

 

 

C. 컨텐츠 영역 너비를 830px(레이아웃 너비 1200px), 730px(레이아웃 너비 1100px) 중에서 선택할 수 있습니다.

 

 

 

 

 

D. 카테고리 메뉴를 헤더 하단, 또는 사이드바에 배치할 수 있습니다.

 

 

 

 

 

 

패치 내역

 

  • 2020-02-22 ver 1.1 Patch - 헤더 하단 카테고리 메뉴를 사이드바로 이동할 수 있는 옵션 및 이동 기능 추가
  • 2020-02-23 ver 1.1.1 Patch - 글목록의 글내용 미리보기 줄수를 4줄 -> 2줄로 변경할 수 있는 옵션 항목 추가
  • 2020-02-26 ver 1.1.2 Patch - 옵션 설정 값중 좁은 헤더 설정 미사용으로 삭제 처리
  • 2020-03-05 ver 1.2.0 Patch - 헤더 영역 가운데, 왼쪽 정렬 설정 옵션 추가(타이틀, 블로그 메뉴, 카테고리 정렬)

 

 

설치 주의사항

 

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

 

 

Comments

  • 이전 댓글 더보기
  • 알 수 없는 사용자 2020.04.07 18:49 댓글주소 수정/삭제 댓글쓰기

    혹시 모바일화면의 목록이 pc화면처럼 (작은 썸네일+제목+내용) 으로 1줄로 표시되도록 할 수 있을까요?

    • 만들수는 있는데, 모바일 화면 크기로 인해 우측에 표시되는 텍스트 내용이 짧아서 레이아웃상 모바일 가독성이 많이 떨어지게 됩니다.
      일부 작은 화면 기기에서는 텍스트 내용이 아주 적게만 나올 수 있습니다.

      구지 해야겠다면

      style.css 원본기준으로

      2419 행 삭제
      min-height:255px;

      2436, 2437 행 삭제
      float: none !important;
      width: 100% !important;

      를 하면 데스크톱이랑 같은 설정으로 보이게 됩니다.

      2420행의 패딩 30px 값을 늘리고 줄이면 아이템 사이 여백도 조정할 수 있습니다.

  • 항상 배포해준 스킨 잘 이용하고 있습니다
    몇가지 수정하고 싶은 사항이 있어서 글을 남깁니다
    1. 모바일 웹에서 메뉴바(홈/태그/방명록) 이런게 스크롤을 내릴때는 없어졌다고 올릴때는 나오게 하고 싶은데 가능할까요?
    2. 모바일웹에서 카테고리바가 왼쪽 위에 있는데 가끔 구글 광고로 인해서 가려지는거 같더라고요 그래서 밑으로 이동하고 싶은데 어떻게 하면 좋을까요?
    다시한번 감사드립니다

    • 블로그 메뉴 표시로 불편해하는 분이 있는 것 같아 스킨도 패치를 해서 미표시 되도록 했습니다.

      1.
      style.css 2362행


      #header.on .content-wrap
      속성으로

      display: none;

      을 추가해주면 표시되지 않습니다.

      #header.on .content-wrap{
      display: none;
      margin: 0 auto;
      }


      2. 밑으로 이동한다는게 어떤걸 밑으로 이동한다는 건지 모르겠습니다.
      카테고리바를 밑으로 이동한다는게 카테고리 위치를 다른 섹션 아래로 배치하고 싶은건지?
      아니면 상단에 여백을 줘서 좀더 아래쪽으로 보이도록 하고 싶으신 건지?

      전자의 경우는 자바스크립트를 손봐야 합니다. 구조상 프로필정보 하단에 위치하도록 구현되어 있기 때문입니다. 구현이 쉽지 않습니다.
      후자인 경우는 스킨 원본 기준 style.css 2304행

      @media screen and (max-width:767px) {

      밑에 줄에

      #mobile_category{
      margin-top: 50px;
      }

      를 추가해서 상단에 50px의 여백을 주는 정도가 가능합니다.

      질문하신 의도가 답변 내용과 다르면 다시 질문을 해주세요.

    • 우선 답변 감사드립니다.
      제가 표현을 잘 못했나봅니다

      첫번째 경우 다른 블로그를 보니깐 스크롤을 밑으로 내리면 상단의 내용이 보이지 않다가 살짝만 올려도 보이는 블로그가 있더라고요 혹시 이 부분도 적용이 가능한가에 대한 물음이였습니다.

      두번째 경우는 위에 카테고리가 三으로 작게 표기다 되는데 오른쪽 아래에 화살표가 생기는 형식처럼 밑으로 옮길 수는 없나 해서 여쭤본거 였습니다.

      아무래도 많은 변동을 필요로 하는거 같아보여서 현재에 만족하면서 사용하려고 합니다. 다시한번 배포에 감사드리고
      답변에 감사드립니다.

  • 안녕하세요~ 어포스트님

    101스킨 잘사용중인데요.
    모바일에만 쿠팡 다이내믹배너를 넣으려고하는데 모바일 부분을 편집하는 방법을 모르겠어요.
    PC화면은 html과 css 적용이 쉬운데 모바일은 어렵네요.

    <div class="coupang_ad_mobile">
    <script src="//ads-partners.coupang.com/g.js"></script>
    <script>
    new PartnersCoupang.G({ id: });
    </script>
    </div>

    이런 형식으로 넣었는데 모바일에는 표시가안되고 PC에만 나오네요
    모바일만 적용하는 법이 있을까요?

    • 쿠팡 광고가 사이드바에 붙여놓은걸 말하시는거 같은데..
      데스크탑이나 모바일에서 모두 표시됩니다.
      반응형 스킨이므로 모바일에서는 감추어진 사이드바에 표시되고 있는게 차이일거고...

      현재 블로그 설정이 반응형 웹으로 모바일을 보는게 아니고 티스토리 시스템의 모바일 화면으로 보이고 있는데 티스토리 시스템의 모바일 스킨을 사용하면, 사용자가 부착한 커스텀 광고는 표시가 되지 않습니다.
      티스토리 모바일웹 자동연결을 꺼보시기 바랍니다.
      관리자 화면 꾸미기-모바일에서 끌 수 있습니다.
      그리고 반응형 웹으로 사이드바에 광고를 붙이면 모바일에서는 메뉴를 펼쳐야만 광고가 보이기 때문에 사실상 광고 효과가 없습니다.
      광고 클릭율이나 방문자 유도 클릭도 데스크탑 화면에서 더 많이 발생합니다.

  • 네 친절한 답변 감사합니다!

  • 저 이 스킨 사용중인데 갑자기 댓글창이랑 관련글? 창이 바꼈어요.... 댓글에 프로필사진이랑 아이디랑 겹치는 현상이 일어나는데 왜 그런걸까요??

    • 광고 코드로 추측되는데, 태그쌍을 맞춰서 붙이지 않고 잘못 붙여서 글 본문 밑으로 그 밑에 표시되는 모든 내용(페이지 이동 부분까지)이 붙었습니다.
      그래서 글본문의 스타일이 댓글 목록에 영향을 주면서 레이아웃이 깨지고 있는 것입니다.

      html 파일에서 광고 코드를 깨끗하게 제거해보시면 원래대로 돌아올겁니다.
      광고 코드의 태그쌍이 잘맞는지 확인하시고 다시 붙여보시기 바랍니다.

      화면에 출력되는 html 소스만으로는 태그가 어디서 밀린건지 확인이 안됩니다.(웹브라우저가 나름대로 보정을 해버리기 때문에...)

      아니면 html 파일만 스킨 원본 것을 다시 적용하고 광고를 하나씩 다시 붙여가면서 확인해보시기 바랍니다.

    • 오 감사합니다 ㅠㅠ 광고 가운데 정렬 한다고 했는데 그렇게 되었더라구요

  • 안녕하세요. 스킨 제공에 감사드립니다.
    다름이 아니라 금일 스킨 적용 후 카테고리 사이드바 영역에 표시 옵션 설정시 표시되지 않는 문제가 있더라고요.
    현제 헤더에서 사용 중인데 고칠 수 있는 방법 있을까요?
    ===============
    js 파일이 제대로 업로드가 안 됐었네요.
    감사합니다.

  • 안녕하세요. 항상 이렇게 스킨 만들어 주셔서 감사합니다. 어포스트님 스킨 저도 잘 이용하고 있는데요. 그런데 제가 질문이 하나 있어서 이렇게 댓글 남깁니다. 이 보더리스 스킨 사용중에 애드센스 광고를 넣었더니 광고가 사이드바하고 겹치게 나오는데 혹시 무엇이 문제일까요?

    • 사이드바 부분 소스를 보면 사이드바 섹션 한개는 <div class="box_aside"></div>로 각각 감싸져 있습니다.
      애드센스 코드를 이 태그로 감싸야 다른 사이드바 섹션과 배치가 맞게 됩니다.
      마찬가지로 이 태그로 감싸서 사이드바 원하는 위치에 배치할 수도 있습니다.

      "box_aside"로 skin.html 을 검색해 보면 대충 감이 오실겁니다.

    • ae 2020.10.19 18:44 댓글주소 수정/삭제

      오오!! 감사합니다!!

  • 썬취매 2020.11.08 04:28 댓글주소 수정/삭제 댓글쓰기

    소스 잘 활용해서 덕분에 이쁜 스킨 설치 했습니다만, 애드센스 자동설정으로 광고 설치 후 헤더 부분이 모바일에서 본문 중앙에 떠 다닙니다 ㅠ 제가 html소스를 잘못 넣은건지 .. 다시 수정하려고 보니 애드센스 적용후 구글에서 html을 바꿔놓은거 같아요. 이거 어떻게 해결할 방법 없을까요? 많이 바쁘시겠지만, 혹시 봐주신다면 스킨 홍보도 많이 하겠습니다. 고생이 많으십니다 ㅠ

    https://irenetone.tistory.com/35

    • 애드센스 자동광고랑 충돌하는 것입니다.
      자동광고를 내리고 수동광고를 하시거나, 스킨을 호환성있는 다른 것으로 변경하거나 하셔야 합니다.
      자동광고를 켜면 모바일 화면에서 애드센스 광고가 블로그 타이틀 상단에 강제로 끼워져 들어갑니다.
      구조적으로 스킨 패치를 해도 해결이 안되는 문제입니다.
      티스토리 스킨 기본 구조가 자동광고의 위치 인식이랑 충돌을 하는 것인데, 해결이 쉽지 않은 문제입니다.
      티스토리 레퍼런스 스킨도 같은 구조여서 같은 문제가 있을 것으로 보입니다.

  • 익명 2020.11.11 03:50 댓글주소 수정/삭제 댓글쓰기

    비밀댓글입니다

  • 안녕하세요.
    본 스킨 사용중인데 블로그내 검색이 안되네요.
    검색어를 입력하면 아무 결과도 뜨지가 않습니다.
    바쁘시겠지만 확인 부탁 드려도 될까요? :)

    https://cosmarketing.tistory.com/

    • 상단에 분이신 구글 검색폼 입력 필드랑 블로그 검색 입력 필드 이름이 충돌합니다.
      입력필드가 "search" 로 동일해서 페이지의 첫번째 "search" 이름인 필드 값을 읽어서 검색결과로 넘기는데 구글 입력필드가 먼저 나오기 때문에 빈 구글검색 입력 필드의 값을 읽어서 블로그 검색을 하기 때문에 블로그 검색 키워드가 넘어가지 않는 것입니다.

      문제는 블로그 검색폼의 입력값을 가져와 전송하는 자바스크립트 코드가 스킨단에서 붙인게 아니라 티스토리 시스템 단에서 붙이는 치환자로 자동으로 붙는 코드입니다.(스킨 제작자가 만든게 아니라는 뜻입니다.)

      구글 커스텀 검색바의 검색어 필드 이름을 "search" 에서 다른 것으로 변경하시는 쪽이 맞을 것 같습니다.

      name="search" 로 설정한 구글 검색어 입력 필드를 다른 이름으로 바꿔 보시기 바랍니다.


    • 해결 방법을 별도 글로 올렸습니다.
      확인해보시기 바랍니다.
      https://blogpack.tistory.com/849

  • 어포스트님 인생 스킨 만들어주셔서 감사합니다.

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

    비밀댓글입니다

    • 블로그 설정에서 티스토리 기본 모바일웹 자동연결을 꺼야 합니다.

      블로그 관리자 페이지
      꾸미기 > 모바일 메뉴에서

      티스토리 모바일웹 자동 연결을 "사용하지 않습니다."로 변경해야 기본 모바일 웹페이지로 이동하지 않게 됩니다.

    • 익명 2021.12.04 02:41 댓글주소 수정/삭제

      비밀댓글입니다

  • 익명 2022.02.14 11:55 댓글주소 수정/삭제 댓글쓰기

    비밀댓글입니다

    • 스킨에 사용하는 아이콘이 폰트어썸 폰트로 구현되는데, 폰트를 다음 두가지 폰트로 일괄 변경을 하신걸로 보입니다.

      style.css 수정하신 내용을 기준으로

      font-family: "NEXON Lv2 Gothic";
      font-family: "KoPubDotumMedium";

      이렇게 변경한 부분들이 있습니다.

      아이콘 표시 부분은
      font-family: "Font Awesome 5 Free";

      그리고 소셜아이콘은
      font-family: "Font Awesome 5 Brands";

      이렇게 글꼴을 지정해줘야 아이콘이 정상적으로 출력됩니다.

      아이콘 폰트에서 content 속성으로 지정한 코드값의 아이콘 글꼴을 출력하는 구조이기 때문에 글꼴이 바뀌면 아이콘이 출력되지 않습니다.

      스킨 원본을 다시 다운로드해서

      font-family: "Font Awesome 5 Free";
      font-family: "Font Awesome 5 Brands";

      두개 폰트를 지정한 CSS 클래스를 찾아서 수정하신 css에서 원복을 하시면 됩니다.
      소셜아이콘은 .pinterest로 찾으면 그 이하로 6개만이니까 쉽게 찾을 거고

      "content:" 로 검색해서 코드값이 있는 클래스중 font-family로 글꼴이 따로 지정된 것만 찾으면 빠르게 정리할 수 있습니다.

  • 익명 2022.02.15 08:46 댓글주소 수정/삭제 댓글쓰기

    비밀댓글입니다

  • 어포스트님 스킨 잘 사용하고있습니다 ^^
    새로 적용한 스킨 카테고리를 사이드바 좌측 쪽으로 하면, 카테고리가 사라지는 버그가 있네요 ㅎㅎ
    그래서 우선 헤더아래에 위치해놓고 사용하고있는데 이부분 확인해주시면 너무 감사할 것 같습니다~

    • 테스트 해봤는데 배포되고 있는 스킨은 카테고리 위치 이동이 정상 동작합니다.
      기본적인 테스트는 다 된 상태로 배포되고 배포된 이후로 사용하시는 분들에게서 별다른 피드백이 없었습니다.

      카테고리를 사이드로 이동하는 기능은 자바스크립트의 기능으로 동작합니다.
      태그 위치가 이동되기 때문에 필수이고...

      운영하시는 블로그는 현재 여러 개의 자바스크립트 에러가 발생하고 있습니다.

      스킨을 커스터마이징 하시거나 조정하면서 자바스크립트에 에러가 발생하고 있고 스킨과 함께 배포되는 자바스크립트 또한 동작하지 않고 있습니다.

      에러 메시지로 봐서는 코드블럭 라이브러리를 추가하면서 에러가 발생하고 있는 것으로 확인됩니다.

      관련 에러를 해결해서 스킨의 자바스크립트 코드가 정상 실행되면 카테고리를 사이드바 위치로 옮기는 기능이 정상 동작할 겁니다.

    • 넵 제가 원하는대로 좀 바뀌었더니, 오류가나서 검색하는 부분이 열리지가 않더라구요 ㅎㅎ
      그래서 여유있을 때, 다시 원래대로 백업한 다음에 사용하려구요 ㅎㅎ

      혹시 코드블럭 관련되어서 여러 기능들을 추가하고싶은데, css나 html에서 어디에 건들면 될지 안내해주실 수 있을까요? ㅎㅎ

      +) 블로그 스킨 너무이쁘다고 주변분들한테도 추천했어요!

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

    비밀댓글입니다

    • 스킨에 포함된 script.js 파일을 업로드하지 않으신 것으로 보입니다.
      다운로드 받은 스킨 압축을 풀면 images 폴더 안에 있는 모든 파일을 업로드 해야 합니다.
      다음글을 참고하시기 바랍니다.

      https://blogpack.tistory.com/930

  • 세상에 ctrl-a한다음에 넣었는데도 뭔가 오류가있었는지, 업데이트가 되어있지 않았던거군요! ㅎㅎ
    심지어 다시 스킨을 넣어서 적용해본건데도 ㅎㅎ실수가있었나봅니다 늦은시간확인해주셔서 넘감사해요~

  • 익명 2022.03.15 21:28 댓글주소 수정/삭제 댓글쓰기

    비밀댓글입니다

    • 코드 블럭이라는게 어떤 블럭을 말하는 건가요?
      커버페이지 블럭을 말하는 건지 아니면 블로그에 표시할 어떤 요소를 말하는건지?

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

    비밀댓글입니다

    • 티스토리 글쓰기에서 제공하는 "코드블럭" 기능을 커스터마이징 하는게 목적이면 불가능합니다.

      질문하신 질문의 의미가 좀 모호한데, 스킨단을 수정하는게 목적이 아니라 티스토리의 기능과 관련된 부분들은 사용자가 임의로 수정할 수 없습니다.

      수정할 수 있다고 해도 권장하지 않습니다. 언제 티스토리 기능이 변경되면서 호환성 문제가 생길지 알 수 없기 때문에...

  • 익명 2022.03.23 23:28 댓글주소 수정/삭제 댓글쓰기

    비밀댓글입니다





❌ 닫기