본문 바로가기

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

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

스킨명 : 반응형 2단 유니크

 

 




스킨 주요 특징

 

40가지 이상의 스킨 옵션 설정 항목을 사용해 원하는 모든 블로그 레이아웃을 만들 수 있습니다.

스킨 옵션 설정에 대한 상세 설명은 ->스킨 옵션설정 글을 보시기 바랍니다.


  • 1단, 2단 레이아웃 설정 가능
  • 사이드바를 왼쪽, 오른쪽 배치 가능
  • 카테고리를 탑메뉴에 배치 가능
  • 다양한 커버 슬라이드 애니메이션 효과
  • 커버 슬라이드 교체 시간 설정 가능
  • 블로그 전체 배경 및 헤더 배경 이미지 설정 가능 
  • 리스트와 썸네일 방식 글 목록 보기 선택
  • 모바일용 컴팩트 레이아웃 설정 지원



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


 

패치 내역

 

  • 2019-09-20 1.1.0 - 오버레이 이미지를 비트맵으로 변경해 브라우저 종류, 또는 화면 너비에 따라 틈이 벌어지는 현상 해결
  • 2019-07-29 1.0.2 - 검색폼 버그 패치
  • 2019-07-16 1.0.1 - 썸네일 글목록 타입 타블렛 모드 화면에서 배치가 밀리는 버그 수정




설치 주의사항

 

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



  • 타..탐나는 스킨입니다. 설정 하고 적용하다 보면 어느덧 하루가 가버릴 것 같네요 흐허-

    • 감사합니다. =^^=;
      이건 베이스 스킨이구요..
      기반으로 해서 데코레이션이 붙여져서 설정없이 마음에 드는 디자인으로 그냥 쓰는 스킨들이 몇개 순차적으로 올라갈 예정입니다.

  • 비밀댓글입니다

    • 스킨이 적용되어 있지 않습니다.

      스킨 편집기 들어가 보시면
      오른쪽 html 탭부분에 skin.html 내용 전부를 복사해서 붙여넣고
      css 부분에 style.css 내용 전체를 복사해서 붙여넣고

      적용 버튼을 누르면 일단 기본적인 레이아웃이 바뀝니다.

      다운받은 스킨 루트에 index.xml, 그리고 images 폴더에 있는 모든 파일들은 업로드 하는 것입니다.

      skin.html, style.css 파일은 업로드 하는 것이 아니라 메모장등에서 열어서 복사해서 스킨편집기 에디터에 붙여넣는 것입니다.

      특히 index.xml 파일과 script.js 파일은 반드시 업로드해야 스킨이 정상 동작합니다.

  • 비밀댓글입니다

  • 타임스쿨 2019.07.09 16:21 댓글주소 수정/삭제 댓글쓰기

    좋은 스킨들이 많네요. 배포해 주셔서 감사드립니다. 그 중에 유니크스킨 다운받아서 적용했는데요.

    이건 스킨하고 무관한것 같기도 한데... 혹시 아시나싶어 여쭤봅니다.

    예를들어, 본문에 이미지를 2 개 올렸을때

    1개 이미지는 마우스를 가져가면 손가락포인터 모양이 나오고 클릭하면 이미지박스로 팝업하게 하고(이기능은 현재 티스토리 기능입니다.)

    나머지 한개는 마우스를 가져가도 마우스 화살표 포인터 그대로 되고, 클릭해도 아무 반응이없도록(즉, 사진이 팝업 안되게) 할 수 있는 방법이 있을까요?

    css 와는 상관없는것 같고, HTML에서 뭔가를 건들여야 하는것 같아서 여쭤봅니다.

    • 해당 부분은 티스토리 서비스단에서 컨텐츠 내용을 뿌리면서 전처리를 해서 뿌리는 것입니다.

      스킨단에서 해결하자면

      커서문제는 css 로 해결이 가능하지만, ie 구버전 호환성 문제가 생길 수 있습니다.

      두번째는 자바스크립트로만 해결이 가능합니다.

      결국 완전히 해결하려면 자바스크립트로 추가 코딩을 해야하고, 구조적으로 구현은 가능하겠지만 구지 이렇게 구현해야만 하는 컨텐츠가 있을지는 모르겠습니다.
      js로 첫번째 이미지를 제외한 나머지 이미지의 css 커서를 강제로 적용하고, 클릭 이벤트 등록된걸 죽이면 될 것으로 보입니다.

  • 블로그 꾸미고 싶어 html 공부해보려다 너무 어려워 포기했는데... 덕분에 간편하게 꾸몄어요 ㅎㅎ 감사합니다. 근데 스킨 만들려면 css, 스크립트, xml까지 @.@ 알아야하는게 한두가지가 아니네요 ㄷㄷ

  • 블로그 타이틀에 뜨는 블로그명 폰트를 "부트베이직1" 스킨처럼 바꿀려면 부분을 수정해야할까요? 둘 다 본고딕 폰트 같은 보기엔 전혀 다르네요

    • 해당 글꼴은 배민 주아체입니다.
      타이틀만 바꾸자면...

      skin.html 에
      <link href="https://fonts.googleapis.com/css?family=Jua&display=swap" rel="stylesheet">

      추가
      위에서부터 "fonts"로 검색하면 구글 폰트 인클루드하는 행이 하나 있습니다.(질문하신 스킨 기준으로는 8행)
      고 밑에 빈줄을 하나 만들어서 붙여넣고...

      style.css 에서
      #header > .title h1 a
      클래스를 찾습니다.
      스킨원본기준 533행에 있습니다.
      클래스 속성으로

      font-family: 'Jua';

      행을 추가
      하면 블로그 타이틀 제목이 바뀝니다.


      기본 베이스 크기가 다른 글꼴이어서 조금 작게 나올 수 있는데
      속성중에서
      font-size: 1.1em;
      으로 된걸 조금 크게 숫자를 늘려주면 제목을 키울 수 있습니다.


      자간이 붙은것은

      letter-spacing: -1px;

      속성을 0이나 1로 바꿔주면 글자들이 조금씩 떨어져 보입니다.

  • 안녕하세요. 배포하신 스킨을 수정해서 쓰고 싶은데
    혹시 카테고리를 상단과 사이드바 둘다 나오게 하려면 어떻게 해야하는지 알 수 있을까요?
    둘다 바꿔서 윈머지로 비교해봤는데 딱히 코드가 바뀐부분은 없네용 ㅎㅎ;

    그리고 헤더 부분에 블로그 로고를 박았는데 로고크기를 좀 줄이고 싶은데 css에서 사이즈를 줄이니 그림이 잘리더라구요. 그림 파일 크기 자체를 줄이는수밖에 없나요?

    html을 몰라서 한줄한줄 검색하면서 보고 있는데 보다보니 그냥 html이 아니라
    티스토리 전용 태그??치환자? 같은것도 있어 더 정신없네요 ㅎㅎ..
    강의같은거 열어주시면 돈내고라도 참가하고싶어요..

    • 1.
      카테고리를 둘다 나오게 하는 것은 가능은 하겠지만 권장하지 않습니다.
      카테고리 위치 이동은 script.js 에서 자바스크립트로 스킨 옵션 설정값에 따라 동적으로 조절을 합니다.
      html 단에서 가능한 것은 아닙니다.

      조금 복잡합니다.

      스킨 옵션설정에서 카테고리를 탑메뉴로 고정.

      skin.html에서
      wrap_etc 로 검색(스킨 원본기준 126행)
      wrap_etc 가 있는 행 밑에 새로 빈줄을 만들고

      <div id="mobile_category" class="box_aside">
      <div class="tit_aside">Category</div>
      <div class="category">
      [샵샵_category_list_샵샵]
      </div>
      </div>

      를 붙여넣습니다.

      붙여넣은 후
      샵샵 -> ##으로 변경해야 합니다.

      script.js 파일을 텍스트 편집기나 메모장에서 연후

      setMobileCategory() 함수를 아래 함수로 대체합니다.
      원본기준 325~338행이 해당됩니다.

      function setMobileCategory(){
      if($('#header .category-menu').css('display') == 'none' || bSidebarCategory || $is_mobile){
      $('#header .category').css('display','none');
      }else{
      $('#header .category').css('display','block');
      }
      }

      script.js 파일을 저장한 후 업로드
      그리고 웹브라우저 캐시를 한번 소거해주면 카테고리가 양쪽 위치에 표시됩니다.


      2.
      로고에 비트맵을 붙인 경우
      로고 텍스트를 대체해서 이미지를 붙이게 되는데
      현재 블로그 기준으로 하면
      #header > .title h1 a
      클래스를 검색하신 후
      (스킨원본기준 style.css 533행)

      그 밑에(위치는 무관하지만 관리상 편의를 위해)

      #header > .title h1 a img{
      width: 200px;
      }

      와 같이 클래스를 추가로 정의해주면 이미지 크기를 임의로 조정할 수 있습니다.

    • 감사합니다~ 둘 다 아주 잘되요!
      뭔가 어그러지긴 했지만 아주 맘에들어요.
      나머지는 더 공부하면서 알아볼께요!

      또 여쭤봐도될까요?

  • 비밀댓글입니다

    • 복잡한 정도가 아니라 스킨을 다시 만들어야 합니다.
      사이드바 관련 css 를 전부 손봐야 하고, 자바스크립트 코드 일부도 수정을 해야 합니다.

      반응형이라서 모바일 대응을 해야하기 때문에 자바스크립트단 처리가 없으면 동작이 안됩니다.

      제작을 한다고 해도 별도의 스킨으로 만들어야 하지 않을까 싶습니다.

  • 비밀댓글입니다

    • 고해상도 환경에서 보기좋게한다고 벡터 이미지를 사용했더니 오버레이가 특정 크기에서는 이음새부분이 벌어지는 현상이 있습니다.

      벡터 이미지를 웹에서 타일로 붙일 경우에 발생하는 어쩔 수 없는 현상입니다.

      일반이미지로 변경 패치를 할 예정입니다.

  • 비밀댓글입니다

  • 쓰고파도.. 어려워서 못하겠네요 ㅎㅎ
    저번에 html복사해서 쭉 붙여놨다가 블로그 날라가서..ㅋㅋㅋ

    • 새스킨 적용하시려면

      1. 스킨 백업은 무조건 해야합니다.
      스킨 백업은 아래를 참고하시면 되고..
      https://apost.kr/333

      2. 스킨에 이식할 내용이 많거나, 스킨 적용에 어려움이 있으면, 테스트용 새 블로그를 하나 더 개설해서 거기에 새 스킨 테스트를 해봐가면서 스킨 적용을 한후 완성된 스킨을 본 블로그에 적용하는 방법을 추천합니다.


닫기