본문 바로가기

티스토리스킨/심플형 스킨

티스토리 스킨 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 파일을 반드시 업로드해야 스킨이 정상 적용됩니다.
  • 파일 업로드 후에는 웹브라우저 캐시를 한번 소거해야 바로 스킨이 정상 반영됩니다.


  • 이전 댓글 더보기
  • 좋은 스킨 너무 감사합니다!
    그런데 혹시 카테고리 메뉴를 헤드부분이 아니라 사이드바 부분으로 옮길수가 있을까요?

    • 스킨이 카테고리 메뉴를 사이드바로 옮길 수 있는 옵션 항목이 추가된 ver 1.1로 패치되었습니다.
      상세 내역은 글 내용을 보시면 됩니다.

      스킨 전체를 재설치 해야 정상 적용됩니다.

      설치후 웹브라우저 캐시 소거를 한번 하시기 바랍니다.

  • 안녕하세요 질문 하나 있어서 드리고 갑니다
    그 뭐시냐 커버에서 글설정에서 모든 글이나 특정 카테고리를 골라서 할수 있자나요
    여기서 제가 궁굼한것은 카테고리를 1개가 아닌 몇개 골라서 하는식으로는 할수 없나요?
    모든글이 나오는건 싫고 몇개 카테고리 글만 뿌리고 싶은데..
    물론 그래서 지금은 하나하나 원하는 카테고리만 하고 있긴 합니다만
    혹시나 가능한건가 해서 궁굼해서 문의 드리고 갑니다 ^^

    • 생각하시는 방식은 티스토리 시스템에는 없습니다.

      선택은 ALL, NOTICE 2개만 가능합니다.

      카테고리 1개는 선택이 되므로, 출력하고 싶은 몇몇 카테고리들을 선택한 카테고리 하위로 2뎁스로 붙이거나...

      아니면... 같은 타입의 커버를 여러개 만들어 다닥다닥 붙도록 레이아웃을 만들고, 각 커버마다 카테고리를 선택해줘서 정한 갯수만큼씩 차례로 출력되도록 하거나...

      정도가 가능할 것 같습니다.

    • 그렇군요 지원을 안하는 기능이군요.. 늘 궁굼했는데 잘알겠습니당

  • 안녕하세요. 높은 퀄리티 스킨을 무료로 공개해주심에 감사드립니다.

    혹시 질문하나만 드려도 될까요?

    메뉴(홈/태그/방명록같은)를 사용하지 않아서 다 삭제했더니 헤더가 너무 널널합니다. 스킨 설정에 있는 '좁은 헤더 높이 사용' 기능이 동작하질 않는데 혹시 해결방법이 있는지 문의드립니다.

    • 미사용 옵션입니다. 기본 상태가 좁은 헤더이고 변경할 수 없습니다.
      해당 옵션은 삭제를 하고 스킨을 패치했습니다.

      스킨 원본기준 style.css
      168행의 .narrow-header #header 클래스가 헤더 높이를 정하는 클래스입니다.

      204px 인 높이 값을 164px 나 144px 정도로 조절하면 어느정도 맞출 수 있습니다.

      그리고 2321행의
      #header.on > .inner
      속성중 높이는 65px->30px 로 줄여줘야 모바일 스크롤시 상단 고정 영역에 남는 부분이 없이 깨끗하게 붙게됩니다.

    • 늦은 시간에 빠른 답변 감사합니다.
      말씀하신대로 두곳 적용해보니 깔끔하니 좋네요.

      스킨 잘 사용하겠습니다. 건강 조심하시고 좋은밤 되세요

  • 안녕하세요.! 스킨 감사히 사용하고 있습니다. 다만 한가지 문의가 있어서 댓글 남깁니다. 인스타 페북 등 아이콘은 사용안할거라 삭제 하였는데 이와 동일하게 검색어 아이콘 (돋보기)이 돋보기로 안보이고 네모박스로만 보이게 됩니다 ㅠㅠ 혹 어떻게 수정해야 할까요.?

    • 삭제를 했다는게 소스를 삭제했다는 말인거같은데...
      삭제하지 마시고, 스킨 옵션 들어가면 미표시할 수 있는 옵션이 있습니다. 옵션을 끄면 블로그에서 안보이게 됩니다.

  • 유캔두두두 2020.02.28 15:02 댓글주소 수정/삭제 댓글쓰기

    안녕하세요? 스킨을 사용하려고 설치를 했는데 카테고리를 사이드바로 배치시킬기에 사이드바의 반응형광고가 카테고리에게 밀린 만큼 사이드바의 다른 메뉴를 덮어버리네요. 이번 스킨만 그런줄 알고 다른 스킨을 깔아보았는데 apost님 최근 스킨들은 거의다 이런 현상이 있어서 이럴때는 어떻게해야할지 궁금합니다. 좋은 스킨 만들어주셨는데 이부분때문에 활용을 못하고 있네요 ㅠㅠ 고생이 많으십니다.

    • 블로그 url을 알려주세요.
      기본적으로 사이드바의 요소들은
      float: left;

      float: right;
      속성이 부여되어 있을 겁니다.

      최근 배포되는 사이드바가 있는 대부분 스킨의 경우
      애드센스 코드를

      <div class="box_aside>
      </div>

      태그로 한번 감싸서 뿌려야 합니다.

  • 어포스트님 스킨 적용하였는데요. 하나만 질문 드려요.
    이전글넣기로 넣은 글의 하이퍼링크 글자색을 변경하고 싶은데 어디를 고쳐야 할지 모르겠어서요. 하이퍼링크 hover, link, active 등이요...
    검색 많이 해 봤는데 css에서 .entry .article a 여기를 찾아 보라는데. 도통 못 찾겠어서요. 부탁드립니다.
    스킨 배포해 주셔서 감사 드립니다.

    • 이전글넣기 로 붙이면
      글 본문 내용의 일반 하이퍼링크로 붙습니다.

      해당 스킨은
      본문 내용 하이퍼링크를

      .entry-content a {

      여기서 컬러를 지정합니다.

      스킨원본기준 style.css 1885행
      또는
      ".entry-content a {"
      로 검색하면 1개 나옵니다.

      .entry .article a
      이거는 아마 구스킨이나 옛날스킨시절의 css 구조가 아닌가 싶습니다.

  • 안녕하세요? 어포스트 님의 반응형 2단 보더리스 스킨을 적용하였는데 2가지 질문이있습니다.
    1.일단 SNS 아이콘이 6개 있는데 여기에 만약 예로들어 인스타그램 혹은 페이스북만 사용하고 싶다면 남은 아이콘은 못 없애나요?
    2.인스타그램 연결하기위해 스킨편집에서 새창(탭)에 SNS 링크 열기체크하고 해당 SNS칸에다가 www.instagram/아이디 입력하면
    제 블로그 주소/www.instagram/아이디 이렇게 나와버립니다. 존재하지않는 페이지라고 나옵니다. 한번 확인해 주실수 있으신가요?

  • 101 스킨사용중입니다.
    어제 애드센스 승인이 나서 자동광고로 설정해서 사용중인데요.
    블로그 첫 메인페이지에서는 상단, 사이드 모두 잘 표시가 됩니다. 앵커광고나 전면광고 모두요.
    하지만 게시물을 선택해 들어오면 상단에 광고만큼 빈공간만 생기고 광고가 표시가 되지 않는데요. (게시물 화면에서는 사이드바에도 광고가 표시되지 않아요..;;)
    제가 이것저것 해 보는데 원인을 모르겠어서요. 도움 요청합니다. 어포스트님. 도와주세요 ^^

    • 애드센스 자동 광고는 컨텐츠를 판단해 자동으로 표시합니다.
      나올 수도 있고 안나올 수도 있습니다.

      제가 들어가봤을때는 글 보기 화면에서 상단 큰 광고, 사이드바에 광고 2개 하단 컨텐츠 영역에 1개가 모두 표시됩니다.

      광고 표시에 문제가 있는건 아닐거고, 사용자에 따라 광고가 표시되는 갯수나 위치가 다르게 보이는 게 아닌가 싶습니다.

      코드를 고정으로 박아놓으신거면 상황에 따라 해당 위치에 구멍이 나보일 수도 있습니다.

  • 안녕하세요? 블로그 꾸밀려고 준비하고있는데 3가지 질문점이 있습니다.
    1. 맨 밑에 어포스트님 블로그 처럼 홈/태그/미디어로그/위치로그/방명록 추가할수있을까요?
    2. 제 블로그는 오른쪽위에 검색창이 있는데 어포스트님 블로그처럼 왼쪽 사이드메뉴 위에 검색창 오게 할수있을까요?
    3. 왼쪽 메뉴를 보면 메뉴 타이틀옆에 그 메뉴에 글숫자가 ( ) 안에 표시되는데 이거 없앨 방법 없을까요?
    도와주시면 정말 감사하겠습니다.

    • 1.
      가능은 하겠지만, 많이 복잡합니다.
      스킨 커스터마이징을 어느정도는 할줄 알아야 합니다. css 몇줄 수정하는걸로는 해결이 안됩니다.

      2. 1번과 마찬가지입니다. 위치 옮기고 css 수정을 꽤 많이 해야합니다. 모바일 레이아웃도 안맞게 되기 때문에 모바일 대응 css도 수정해야 합니다.

      3. 스킨단에서 뿌리는 것이 아닙니다. 티스토리 시스템에서 뿌려지는 내용이고
      티스토리 관리자 페이지
      콘텐츠-카테고리 관리 들어가면 하단에 "카테고리 설정"이 있습니다.
      카테고리별 글 수를 "표시합니다" 상태이면 (숫자)로 카테고리 글수가 표시됩니다.

    • 1, 2번은 제가 어쩔수가 없는 부분인가보네요 ㅎㅎ
      3번은 잘 해결했습니다. 감사합니다!

  • 힛또야 2020.03.11 12:59 댓글주소 수정/삭제 댓글쓰기

    감사합니다^^ 처음 티스토리 입문해서 스킨적용만 하루가 걸렸어요ㅜㅠㅋㅋ
    상세한 설명덕에 천천히 따라할 수 있었네요! 스킨 깔끔하고 예뻐요 잘 쓸게요!

  • 쫑이 2020.03.21 06:39 댓글주소 수정/삭제 댓글쓰기

    안녕하세요? 어포스트님 보더리스 스킨을 잘 사용하고있습니다. 구글어드센스도 승인 받아서 이제 광고 넣는걸 어포스트님 글보고 추가하고있는 상황인데요. 질문이 2가지가 있습니다.
    1. 컨텐츠영역에 에드센스 추가방법 대로 <article id="content"></article> 사이에 에드센스 가로형 반응형 배너를 넣었는데요. 모바일상에서 광고마다 길이가 다른지 어떤건 모바일로 제 홈페이지들어오면 위아래만 스크롤내리면 깔끔한데, 어떤광고는 길어서인지 좌우로 움직여집니다. 이게 말씀하신 레이아웃 밀리는 경우인가요? 말씀대로 <article id="content"></article>사이에 넣었는데 폰에서 이런 현상이 나타나서 혹시 어포스트님 홈페이지 모바일 들어갔을때처럼 깔끔하게 위 아래 스크롤로 움직이게끔 수정할수 있을까요?
    2. 마찬가지로 컨텐츠 영역 상단 에드센스 관련 질문입니다. 컨텐츠 상단영역에 반응형 광고를 넣었을때 카테고리 제목과 광고가 딱 붙어있어서 광고와 카테고리 제목사이에 공백 1칸정도 만들고 싶은데 수정가능할까요? (어포스트님 홈페이지보시면 예쁘게 광고와 카테고리 사이에 공백이 있더라구요.

    • 1.
      제가 확인해서는 광고가 모바일에서 반응형으로 잘 표시됩니다.
      광고 좌우에 레이아웃 여백이 적용이 안되는 것은 정상입니다.

      2.
      #content > .inner
      에 상단에 마진을 주는 속성을 추가해주면 광고와 타이틀 사이에 여백을 넣을 수 있습니다.
      스킨 원본 기준 style.css 1034행에 있습니다.

      margin-top: 30px;

      속성을 추가해주면 됩니다.
      마진 값은 적당히 맞춰서 크기를 조정해주면 됩니다.

  • 진심으로 감사하게 잘 사용하겠습니다^^
    방금 적용성공하고 꾸미고 있어요^^
    감사합니다.

  • 스킨 적용은 감사히 끝냈는데 카운터가 업데이트가 안되요ㅠ
    그래서 다시 html css 파일업로드를 새로 해봤는데 그래도 변경이 안되요ㅠ
    실시간으로 자동 변경이 안되는건지 가르쳐주시면 진심으로 감사하겠습니다.
    방문객이 많이 없어 부끄럽습니다.ㅠ

  • 혹시 모바일화면의 목록이 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 댓글주소 수정/삭제

      오오!! 감사합니다!!


닫기