본문 바로가기

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

티스토리 스킨 - 반응형 2단 스쿨룩 스킨 배포합니다.

스킨명 : 반응형 2단 스쿨룩 티스토리 스킨

 

- 클래식하고 차분한 느낌을 내는 단정한 스킨입니다.


- 미리 설정되어있는 커버페이지 지원합니다.


- 블로그 배경색, 카테고리 배경색, 블로그 타이틀 색상을 스킨 추가 설정에서 변경할 수 있습니다.



- 커버 페이지를 사용하지 않을 경우 심플하고 클래식한 2단 스킨으로 사용할 수 있습니다.


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



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

- 2019.04.04 1.0.2 Patch 스킨 추가 설정에서 첨부하는 푸터 이미지가 정상적으로 나오지 않는 현상 패치


- 2019.04.04 1.0.1 Patch 카테고리 메뉴 배경색을 스킨 추가설정에서 컬러를 선택해 변경할 수 있도록 기능 추가

  

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









_설치안내


1. index.xml 파일을 반드시 업로드해야 합니다. 티스토리 신스킨은 스킨 옵션 설정을 위해 반드시 이 파일이 필요합니다.


2. script.js 파일 업로드 후에는 웹브라우저 캐시 소거를 한번 해주시기 바랍니다. 브라우저 환경에 따라 구 사용 스킨의 자바스크립트 파일이 캐시에 남아 자바스크립트가 정상 동작하지 않는 경우가 있습니다.

사이드바 메뉴가 펼쳐지지 않는다거나 할 경우 캐시 소거를 하면 됩니다.


3. 타이틀 상단의 아이콘은 폰트어썸 아이콘이며, https://fontawesome.com/icons 에서 아이콘을 검색해(무료버전 스킨만 사용 가능) 4자리 코드값을 style.css 191행에 적용하면 변경됩니다.


4. 블로그 타이틀 위의 로고 아이콘을 삭제하려면 skin.html 28행 삭제, style.css 186행을 "padding-top: 100px;" 로 변경하면 됩니다.

스킨 설치 방법



  • 비밀댓글입니다

  • 무료배포해 주셔서 감사합니다.
    덕분에 잘쓰고 있습니다.
    완전 초짜라 배포해주신 그대로 적용해서 쓰고 있습니다.

  • 티스토리 이제막 시작해서 댓글에 답글 어디에 다는지 몰라 새로올립니다.
    공감은 물론 구독도 꾸욱 눌렀습니다.
    저희에게 딱맞는 좋은스킨 배포해 주셔서 다시한번 감사드립니다.

  • 안녕하세요, 훌륭한 스킨 배포해주셔서 감사합니다.
    저희 단체(NGO입니다)의 홈페이지를 관리해주시던 분이 더 이상 도와주실 수 없게 되어서
    가능한 가장 간단한 방법으로 관리 운영하기 위해 (반응형 홈피의 필요성도 있고 해서)
    제로보드 베이스로 되어 있는 홈페이지를 티스토리로 이사할 예정입니다.

    홈페이지 관련 지식이 부족하여 알려주신 방법대로 차근차근 준비를 하고 있는데요,
    스마트폰에서 보면 메뉴(홈-태그-미디어로그-위치로그-방명록)가 안 보여서요.

    제가 뭘 잘못 손댔나 해서 원래 skin.html과 style.css로 돌려봐도
    여전히 스마트폰에서는 안 나오네요. 어떻게 해야하는지 알려주시면 감사하겠습니다.

    • 티스토리 모바일웹 자동연결 설정이 되어있어 티스토리 기본 모바일 웹페이지가 보이고 있기 때문입니다.

      블로그 관리자 화면 왼쪽 메뉴에
      꾸미기 > 모바일 이 있습니다.
      티스토리 모바일웹 자동 연결을 "사용합니다" 로 설정되어 있을겁니다.
      이렇게 되어있으면 모바일웹에 스킨이 적용되는게 아니라 티스토리 기본 모바일 웹사이트 스킨으로 모바일 웹사이트가 보이게 됩니다.
      "사용하지 않습니다" 로 설정한 후 "변경사항저장" 을 누르고 폰에서 확인하면
      반응형으로 설정한 현재 스킨이 적용되어 보일겁니다.

  • 그런 거였군요... ㅋㅋㅋ 티스토리에 익숙치 않아서 헤맨듯 합니다. 암튼 엄청엄청 감사드려요~~~ ^^

  • 비밀댓글입니다

    • "스킨편집>추가설정>타이틀컬러선택" 이것은 블로그 이름의 색상만 변경하는 것입니다. 스킨 설정에서 어두운 배경색을 지정할 경우 블로그 타이틀이 보이지 않는 현상을 사용자가 해결할 수 있게 하기 위한 것입니다.

      1.
      상단 메뉴바 배경색상은
      스킨 원본 기준 style.css
      414행
      background: #081b33;
      의 색상을 변경하면 됩니다.
      클래스명은
      #header .category-menu
      입니다.

      2.
      슬라이더 높이 설정은 style.css
      930행
      height: 360px;
      360값을 원하는 높이로 변경하면 됩니다.
      너무 커지면 모바일에서 별도 값을 주거나 줄여줘야하므로 적당히 맞춰서 모바일에서 추가로 손대지 않게 맞추시는걸 추천합니다.


      3. 슬라이더 더보기는
      skin.html 220행을 지우면 됩니다.


      4. 모든 썸네일 이미지는 썸네일을 생성하는 url에서 크기값을 사전 설정하게 되어있습니다.
      너무 커지면 사이트 로딩 속도가 느려지기 때문에 속도 최적화를 위해 적당한 크기로 스킨에 설정을 한 것입니다.

      skin.html 195행의

      C150x100

      요 부분이 다운로드 하는 썸네일 생성 크기를 사전 지정하는 것입니다.
      아무 크기나 다 되는건 아니고 가로 세로 비율이나 크기값을 적당히 맞춰 사용해야 합니다.
      다른 커버 아이템들도 동일합니다.
      skin.html 에서
      i1.daumcdn.net/thumb/
      로 검색하면 6개가 나옵니다.
      앞에 4개는 커버 종류별 4개이고, 5번째는 글목록 썸네일, 끝에것은 글보기화면 관련글 썸네일 입니다.
      C나 R로 시작하고 숫자x숫자 조합으로 썸네일 크기를 정합니다.
      썸네일 생성하는 크기 규칙에 대해서는

      https://apost.kr/167

      요걸 보시고 이해를 하면 됩니다.

      커버 썸네일 리스트만 일단 조정을 하자면
      C150x100으로 된걸
      C200x150 또는
      C300x200 으로 조정하면
      좀더 고화질로 썸네일이 보일겁니다.
      썸네일 개별 크기인 214x182에 가장 근접한 값은
      C240x180
      입니다.

    • 스킨 패치가 있습니다.
      카테고리 배경색을 스킨 추가설정에서 변경할 수 있도록 기능 추가가 되었습니다.
      style.css 를 이미 변경하신 경우
      skin.html 과 index.xml 만 패치를 하면 css 수정한 내용은 그대로 유지되고 해당 기능 추가만 됩니다.

  • 비밀댓글입니다

    • 아마도 삭제하려고 했던거 같은데 xml 파일 정리를 안하면서 남아있는 것으로 보입니다.
      설정에서 붙일수는 있지만 이미지는 정상 출력되지 않습니다.(이미지는 붙기 때문에 높이값을 주면 바로 표시되지만, 높이 0인 배경 이미지로 붙기 때문에 타일 형태 배경으로 푸터 이미지가 붙게 됩니다.)

      의도상 로고나 저작권 표시 같은걸 붙이는게 의도인데 표시가 가능하게 해도 의도와는 다르게 출력되는 거라고 봐야할 것 같습니다.

      버그라고 봐야할 것 같습니다.
      삭제가 맞을텐데, 쓰는 분이 있어서 최종적으로는 살리는 쪽으로 패치를 하기로 했습니다.

      기존 스킨 원본 기준으로는

      skin.html
      593행
      <div class="image" style="background-image:url();"></div>

      요거를
      <div class="footer-image"><img src=""/></a></div>
      요거로 교체

      596행
      요거를
      <p></p>
      요거로 교체
      <p class="footer-text"></p>

      그리고 style.css에

      #footer .footer-image, #footer .footer-text{
      margin: 10px 0;
      text-align: center;
      }

      요 css 추가
      스킨 제작 관행상 style.css 원본 기준 812행 위에 넣으면 될 것 같습니다.("/* Components */" 를 검색하면 됨)

  • 비밀댓글입니다

    • 죄송할건 없구요..
      궁금하신건 물어보세요.
      자꾸 만져봐야 어디에 뭐가 있는지도 알게됩니다.

      아마 띠배너를 붙이려고 여백을 지우다 전체 여백을 날리신거 같습니다.

      1. 모바일에서 좌우가 붙어버린건
      <article id="content">
      하위에 있는
      <div class="inner">태그를 지우셔서 그렇습니다.
      이 태그에 여백 속성이 정의되어 있어서 모바일에서 좌우가 붙어보이는 것입니다.

      현재 상태에서 해결을 하자면 현재 수정중인 css 상태 기준으로 2271 ~ 2272행 사이에
      padding: 0 30px;
      을 주면 모바일에서 여백이 일단 다시 살아납니다.

      좌우를 다 채우는 띠 배너를 넣으시려면
      <header></header> 태그 사이에 넣어야 하고
      현재 적용해놓은 skin.html 소스 기준으로 355~356 행( 사이(</header>윗줄)에

      예를들어
      <div><img src="./images/yellow.jpg" width="100%" height="100"></div>

      요런식으로 이미지를 붙인다면 가로 100%를 다채우고 높이는 100px인 이미지를 붙이게 됩니다.
      yellow.jpg는 업로드한 배너 이미지 파일명을 적으면 됩니다.
      다른 위치에 붙이시려면 또 여러가지를 수정해야 하기때문에 우선은 쉬운 방법으로 알려드렸습니다.

      크기 속성은 클래스로 나중에 분리하시면 되고 일단은 붙이고 크기 설정해서 잘 보이는지부터 확인하는게 우선일겁니다.

      이렇게 하면 커버슬라이드와 메인메뉴사이에 띠 배너가 붙게 됩니다.

      모바일에서도 커버슬라이드 위에 정확하게 위치하니까 이런식으로 일단 적용하면 될 것 같습니다.

      그리고 script.js 파일의 339행에 있는
      360px를 + 배너높이값을 해서 변경을 해주어야 모바일에서 배너때문에 아래 커버 아이템들이 위에 겹쳐보이는 것을 피할 수 있습니다.

      띠배너는 100px높이인 것을 붙였으면 460px로 변경해주면 됩니다.

  • 배포해주신 스킨 유용하게 잘쓰고 있습니다.
    패치가 나왔는데 어떻게 적용해야 할지 몰라서요.
    왕초짜라 설명하신대로만 따라할줄 압니다.
    HTML, CSS 기존 삭제하고 새로 적용해야 하는지요.
    현재 HTML에 구글, 네이버 등 태그 삽입된 상태입니다.
    감사합니다.

    • 패치 내용이 현재 스킨 쓰는데 문제 없는 분은 구지 할필요 없는 패치입니다.

      기존에 적용해놓은 것들 옮기는 작업이 더 클겁니다.

      스킨 기능 설정으로 푸터에 이미지(로고같은거) 붙여야 하는 경우 아니면 필요없습니다.

      상단 메뉴 배경색 바꾸는 스킨 설정 기능도 메뉴 배경색 css 수정하는걸 좀 더 편하게 할 수 있게 부가 기능으로 붙인것이기 때문에, 나중에 메뉴 배경색 바꿔야할거 같으면 그냥 문의하시면 어디 변경해야하는지 알려드리겠습니다.

    • 네 그냥쓰는게 좋겠네요
      감사합니다

  • 비밀댓글입니다

    • 작성하신 컨텐츠를 비공개로 하신건지 해당 글을 확인할 수 없습니다.
      그림 없는 텍스트만 있는 글은 모바일에서 정상적으로 보입니다만...
      문제가 있는 글을 공개처리를 하시고 질문을 다시해주세요.
      확인해봐드리겠습니다.

  • 비밀댓글입니다

  • 안녕하세요, 지난 번에 모바일 버전 적용 안 되는 걸 몰라하던 티스토리 초보입니다. ^^;

    오늘 드릴 질문은... 슬라이드가 너무 빠르게 넘어가서, 속도를 좀 느리게 조절하려면 어떻게 해야할까요?
    슬라이드 아래에 멈춤이나 점으로 순서 표시 같은 게 있으면 좋을텐데 그게 조금 아쉽더군요. 제가 만들어 볼 수도 있을까요?
    그리고 슬라이드 이미지가 원래 이미지보다 많이 어둡게 나오는데 원본만큼 환하게 나오게 할 방법이 없을까요?
    엉성한 상태이지만 한 번 봐주시면 제 질문이 이해되실 것 같아서 한 번 들러주십사 부탁드립니다~ https://jbngo2.tistory.com

    • 1.
      script.js 파일
      261행에
      4000 이라고 값이 있습니다.
      4000 밀리세컨드(4초) 설정입니다.
      1000이 1초이므로 숫자를 늘려서 변경하시면 슬라이드가 느리게 흘러갑니다.

      script.js 파일 업로드 후 반영되어 보이지 않으면 웹브라우저 캐시 소거를 한번 하셔야 합니다.

      슬라이드는 티스토리에서 커버 슬라이드로 기본 배포를 하는 레퍼런스 슬라이더 입니다.


      2.
      이미지가 어둡게 보이는 것은 이미지 위에 반투명 검정색 층을 깔아서입니다. 깔려있는 이유는 밝은 이미지 위에서는 더보기나 좌우 화살표 같은게 안보이게 되기 때문에 어떤 이미지를 슬라이드해도 이 버튼이나 화살표가 보이도록 만들어주기 위한 일종의 보완책같은거라고 이해하시면 됩니다.

      밝은색 이미지를 안쓰신다면 이 층은 삭제해도 무방합니다.

      원본스킨 기준 style.css
      941행
      background-color: rgba(0,0,0,0.25);
      을 지우면 반투명 검정층이 사라집니다.

      또는 끝에 0.25라고 된걸 소숫점 자리를 더 줄이면 검정 반투명이 좀더 옅어집니다.
      0.1 이나 0.15 정도롤 조정해보시고 그래도 마음에 안드시면 삭제하면 됩니다.

      스킨 수정이 많이 되서 해당 줄을 못찾으면
      .cover-slider ul li a

      를 검색하면 1개만 검색되니까 찾을 수 있습니다.

      3.
      커버 슬라이더 기능이야 얼마든지 수정하시는건 가능하겠지만 시간이 좀 걸릴겁니다.
      스킨에 포함된 것은 티스토리 레퍼런스 슬라이더를 수정을 해서 배포를 해드리고 있는거고 기능이 가볍기 때문에 당분간은 이 슬라이더를 계속 사용할 예정입니다.
      말씀하신 기능 개선은 아마 다음번 커버 기능이 들어가는 스킨에서나 반영을 하지 싶습니다.
      기능개선을 해도 새스킨에만 적용하기 때문에 다른 스킨 사용자들은 본인이 직접 가져다 붙이던가 해야할겁니다.

      다른 걸로 커버 슬라이더를 아얘 변경하고 싶으시면

      https://www.jssor.com/demos/image-slider.slider

      가셔서 보면 어지간한 형태는 다 있으니까 여기서 보고 가져다 붙여서 쓰시면 됩니다.
      다만 자바스크립트단을 전부 바꿔야 하는 것이어서 손이 좀 많이 가기는 할겁니다.

    • 주말이라 다음 주까지 답을 안 해주실 수도 있으려니 생각하고 있었는데, 정말 감사합니다. 덕분에 잘 배우고, 열심히 노력하고 있습니다. 멋진 분~~ ^^

  • 비밀댓글입니다

    • 이상한건 아니고 에디터의 기능중 하나입니다.

      글편집 들어가서
      우측 이미지 리스트에서 이미지를 클릭해보시면 그 위에 미리보기 이미지 우측 아래에
      "대표" 라고 체크박스가 보일겁니다.
      이게 체크된 이미지가 썸네일 메인 이미지로 노출됩니다.

      글작성시 첨부한 이미지중 글에 사용되지 않는 이미지는 자동 삭제되지만, "대표" 체크가 된 이미지는 글 내용에 이미지가 없어도 첨부가 삭제되지 않고 그대로 유지됩니다.

      이런 특성을 이용해 썸네일용으로 어그로?를 끌 수 있는 이미지를 따로 제목도 달고 해서 첨부해서 "대표" 체크를 해서 붙이면 예쁜 썸네일 리스트를 만들 수도 있고 그렇습니다.

    • 2019.04.09 14:18 댓글주소 수정/삭제

      비밀댓글입니다

  • 비밀댓글입니다

    • 스킨을 이미 민트페이퍼로 바꾸신걸로 보입니다만...
      글꼴로 이미 잘 적용하고 계신거 같고...
      다른질문 있으시면 다시해주세요.

      우측 사이드바 검색 버튼이 글꼴 변경을 하면서 베이스라인이 달라지면서 위로 좀 밀려 보입니다.

      .sidebar .search button

      요걸 찾으셔서

      top: 8px;


      top: 13px;
      로 바꾸면 대충 맞아보입니다.

  • 비밀댓글입니다

    • 증상은 확인했는데, 스킨을 커스터마이징 하시면서 어딘가 치환자쪽에 오타나 깨진 부분이 있어서 출력이 안되고 있거나, 해당 부분이 삭제되었거나가 아닌가 싶습니다.

      카테고리 글목록 출력하는 부분에서 목록 자체가 아얘 출력이 안되고 있습니다. 서버에서 목록 자체를 뿌리지 않는 것입니다.

      이용자가 많은 스킨 중의 하나인지라 스킨 자체는 안정적인 스킨이어서 특별히 버그가 있거나 한 것은 아닌걸로 보입니다.

      스킨 원본이랑 대조해서 태그가 뭔가 삭제된게 아닌지 확인을 한번 해보시기 바랍니다.