본문 바로가기

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

티스토리 스킨 - 반응형 2단 아웃도어 티스토리 스킨 배포합니다.

반응형

아웃도어 테마에 맞춰 제작된 티스토리 스킨입니다.

카테고리 메뉴를 사이드바, 또는 탑메뉴로 이동시킬 수 있으며, 화면 너비에 따라 반응형으로 동작합니다.



스킨명 : 티스토리 반응형 2단 아웃도어

---------------------------------------------------------
2019-09-20 ver 1.1.0 - 오버레이 이미지를 비트맵으로 변경해 브라우저 종류, 화면 너비에 따라 틈이 벌어지는 현상 해결

2019-06-01 ver 1.0.2 - 카카오맵 커버 기능 삭제
2019-06-01 ver 1.0.1 - 모바일 검색폼 클릭시 사이드 메뉴 닫히는 버그 패치

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


주요 특징들


- 마우스오버, 하이라이트, 테마 컬러를 설정에서 변경할 수 있습니다.

- 사이드바를 왼쪽/오른쪽으로 이동시킬 수 있습니다.

- 카테고리 메뉴를 탑메뉴, 또는 사이드 메뉴로 변경할 수 있습니다.

- 커버 슬라이드를 헤더 영역 전체, 또는 컨텐츠 영역에 배치할 수 있습니다.

- 블로그 타이틀 컬러, 타이틀 이미지 대체, 헤더 영역 배경 이미지 표시 등 다양한 데코레이션을 넣을 수 있습니다.

- 카카오맵을 커버페이지에 붙일 수 있습니다.(카카오 개발자 사이트 가입 및 설정 필요)





* 웹브라우저 너비를 변경하면 반응형으로 변경되는 레이아웃을 확인할 수 있습니다.










- 스킨 설정 안내







레이아웃


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


카테고리 위치 : 카테고리를 탑메뉴로 표시, 또는 사이드바 항목으로 표시


커버 배너 위치 : 커버 슬라이드 사용시 커버 슬라이드 배너 표시 위치를 헤더위치에 풀배너로 표시, 또는 컨텐츠 표시 영역에 다른 커버 아이템과 같이 표시.



공통/페이지


스킨 배경 이미지 사용 : 전체 스킨 배경 이미지를 표시할지 선택. 기본 배경 이미지는 body-bg.jpg 이며 스킨팩 images 폴더 안에 있습니다. 배경 이미지를 변경하려면 동일한 이미지로 배경 이미지를 제작해 업로드 하면 됩니다.


스킨 배경색 선택 : 스킨 배경 이미지를 사용하지 않을 경우 사용하는 스킨 전체 배경새을 지정합니다.


하이라이트/테마 컬러 : 스킨의 테마컬러, 마우스 오버 컬러를 선택합니다.


짧은 날짜 사용 : 블로그 기본 시간 표시 방법은 년월일시분초입니다. 년월일만 표시되도록 하려면 활성화합니다. 댓글, 방명록, 아카이브에는 적용되지 않습니다.


검정색 글 본문 색상 적용 : 활성화하면 글보기 본문 텍스트의 색상을 검정색으로 강제 지정합니다. 본문 글의 주목도를 높이고 싶은 경우에만 사용합니다.


페이징 타입 : 이전/다음페이지, 이전/다음글 을 이동하는 방식을 선택합니다. 더보기, 이전/다음, 페이지목록 중 한가지를 선택할 수 있습니다.


탑 스크롤 버튼 사용 : 페이지 최 상단으로 애니메이션되어 스크롤 업하는 버튼을 표시합니다.



헤더


좁은 헤더 높이 사용 : 헤더 영역 높이값을 100px 줄입니다.


헤더 배경 이미지 사용 : 헤더 여역에 배경 이미지를 표시합니다. 기본 이미지 파일명은 header-bg.jpg 입니다. 헤더 이미지를 변경하려면 같은 파일 이름으로 변경할 이미지를 만들어 업로드하면 됩니다.


블로그 타이틀 색상 선택 : 블로그 타이틀 텍스트를 표시할 경우 색상을 지정합니다.


타이틀 대체 이미지 : 대체 이미지를 업로드하면 블로그 타이틀 텍스트 표시 자리에 업로드한 이미지가 표시됩니다.



사이드바

사이드바 최근글, 인기글 썸네일 표시 : 사이드바 최근글과 인기글 목록에 썸네일을 같이 표시할지, 아니면 텍스트만 표시할지 선택합니다.

프로필보기 : 상단 프로필 표시 여부를 선택합니다.


SNS아이콘 보기 : 상단 SNS 아이콘 표시 여부를 선택합니다.



푸터


푸터 이미지 표시 : 블로그 메뉴 위쪽에 표시할 이미지 업로드.(회사 로고 등)


푸터 텍스트 표시 : 블로그 메뉴 위쪽에 푸터 텍스트(회사 정보나 주소 등) 표시


블로그 메뉴 표시 : 블로그 메뉴를 표시할지 선택



카카오맵


카카오맵 사용 : 카카오맵 커버 기능은 삭제되었습니다.



- 커버페이지 설정 안내




커버 항목은 다음과 같은 종류가 있습니다.

슬라이더와 카카오맵 커버를 제외하고 나머지 항목은 갯수 제한이 없습니다.


슬라이더 - 스킨 전체에 1개만 있습니다. 추가 생성하면 레이아웃이 깨집니다. 기본 생성된 것을 그냥 사용합니다. 홈페이지 최상단 메인 영역을 차지하는 로테이션 배너입니다.

배너 로테이션 타임은 script.js 23행에서 숫자를 변경하면 됩니다. 5000은 5초입니다.(초*1000)

0을 입력하면 자동 로테이션이 멈춥니다.


이미지 썸네일 리스트 - 하이퍼링크가 있는 썸네일 리스트입니다. 링크는 "더보기" 버튼으로 별도로 표시됩니다. 커버 아이템 갯수는 2, 3, 4, 6, 8개를 사용해야 레이아웃이 정확하게 맞습니다. 1개인 경우는 가로 풀배너를 사용합니다.
"더보기" 버튼은 하이퍼링크 입력값 여부에 따라 자동으로 표시됩니다.



이미지 썸네일 리스트[링크x] - 하이퍼링크 없는 썸네일 리스트입니다. 입력한 타이틀과 내용은 썸네일 이미지 마우스 호버시 표시됩니다.(모바일에서는 기본 표시 상태로 바뀝니다.) 커버 아이템 갯수는 2, 3, 4, 6, 8개를 사용해야 레이아웃이 정확하게 맞습니다. 1개인 경우는 가로 풀배너를 사용합니다.





가로풀배너 - 가로 전체 너비로 표시되는 통 배너입니다. 커버 아이템을 1개만 생성해야 합니다.




카카오맵 표시 카카오맵 커버 기능은 삭제되었습니다.


메뉴링크 사이트맵 - 사이트 맨 위에 표시되는 메뉴를 클릭했을 때 이동할 위치를 지정합니다. 타이틀에 사이트맵 링크 ID를 입력합니다.

메뉴 항목별 하이퍼링크에는 "#+링크ID" 를 입력하면 됩니다.

메뉴 하이퍼링크는 skin.html 30 ~ 49행 사이에 위치합니다.


각 커버 항목 왼쪽의 햄버거 아이콘을 드래그하면 커버 항목이 표시되는 순서를 변경할 수 있습니다.







_설치안내


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


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

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


3. 커버 페이지 구성시 커버 슬라이드는 1개만 사용해야 합니다. 추가로 생성하면 레이아웃이 깨집니다.




스킨 설치 방법










반응형
  • 정말 최고의 스킨인것 같습니다. 감사히 잘 쓰겠습니다 ^_^

  • 근데 스킨 무료인가요? 아니면 무료이긴 한데 일부 수정이나 하단 저작자 삭제만 유료인가요? 헷갈려서요... &^^

  • 포스팅 마지막 사진처럼 일반게시글로 나열해서 메인으로 설정하고 있는데 사진해상도가 너무 깨져서 게시되서요. 아이패드로 볼때는 사진이 완전히 깨져서 보입니다. 혹시 대표사진 게시시 사진 깨지지 않고 올릴 수 는 없나요?

    • 이미지 크기만 변경하면 다른 문제가 생겨서 스킨을 패치했습니다.
      썸네일은 480x320px로 조정했고, 다른 설정도 거기에 맞춰서 보이도록 조정했습니다.
      스킨 압축파일을 다시 다운로드 받아 재적용 하시기 바랍니다.
      skin.html, style.css, images/script.js 3개 파일을 재적용 하면 됩니다.

  • 네 감사합니다. 처음껄로 했는데 사진만 커져서 걱정했는데 다시해보고 안되면 문의드릴게여. 스킨 너무 잘쓰고 잇어요 감사합니다.

  • 익명 2020.12.24 14:51 댓글주소 수정/삭제 댓글쓰기

    비밀댓글입니다

    • 블로그 가봤는데, 카테고리를 모두 지우신걸로 보이는데...

      스킨 확인해봤는데, 스킨에 문제가 있지는 않은 것으로 보입니다. 카테고리 위치는 잘 변경됩니다.

      카테고리 먼저 추가하시고 스킨 설정에서 카테고리 위치를 "사이드바", "탑메뉴" 에서 변경해서 적용을 다시 해보시기 바랍니다.
      문제가 있으면 다시 문의를 주시면 확인해보겠습니다.


      글 보기 제목은
      데스크탑 화면이랑 타이틀 글자 크기가 같아서 모바일에서는 좀 크게 보이는 것 같습니다.

      스킨 원본 기준 2449행 밑에
      .hgroup h1{
      font-size: 1.375em;
      }
      이걸 추가하면 조금 작게 보입니다.
      더 작게 하려면 1.375 -> 1.25 정도로 바꿔주면 됩니다.

      행위치가 달라졌으면

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

      행을 찾아서 밑에 줄에 추가하면 됩니다.

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

    비밀댓글입니다

    • 익명 2020.12.24 15:54 댓글주소 수정/삭제

      비밀댓글입니다

    • 아 PC에서 봤을때 그래요. 모바일버전에서는 사이드에 나옵니다.

    • 스킨이 반응형 스킨이어서 탑위치에 붙은 카테고리를 자바스크립트로 사이드 위치로 옮기는 과정에서 순간적으로 탑에 메뉴가 보일 수 있는 가능성이 있습니다.

      질문으로 봐서는 사이드로 카테고리를 옮겨도 탑 위치에 뭔가가 계속 보인다는 뜻이신게 아닌가 싶기는 한데... 스킨을 커스터마이징을 하신게 아니면 정상적인 상황은 아닙니다.
      테스트해봐도 말씀하신 증상이 재현되지는 않습니다.
      운영하시는 블로그 들어가봐도 사이드 위치에 카테고리가 정상적으로 나오고 있습니다.

      혹시나해서 반응성 개선을 좀 해서 사이드바 위치에 카테고리가 있으면 상단 카테고리 영역이 아얘 표시되지 않도록 약간 조정을 했습니다.

      style.css

      178행 밑에 새 행을 만들고
      .category-side #header .category-menu{
      display: none;
      }

      요걸 추가하시면 됩니다.

      위치가 달라졌으면 위에서부터
      .blogger-profile {
      을 찾아서 그 윗줄에 추가하면 됩니다.

      잘 모르겠으면, 스킨이 패치되어 있으므로 다시 다운로드 받아서 style.css 파일 내용만 새로 덮어쓰시면 됩니다.

      테스트해본 바로는 잘 동작하는데 적용해보시고 문제 있으면 다시 알려주시면 운영하는 블로그 들어가서 다시 확인해보겠습니다.

    • 익명 2020.12.24 16:42 댓글주소 수정/삭제

      비밀댓글입니다

    • style.css 에 새 코드 붙여넣은 위치가 잘못되었습니다.
      .blogger-profile {
      윗줄에 새 빈줄을 만들고 붙여 넣어야 합니다.
      캡쳐하신 화면을 보면 붙여넣은 위치 5줄 위에
      /* 이동성을 위해 #header ... */
      라고 코멘드 달아 놓은 줄 윗줄에 새 빈줄을 만들어서 붙여넣으셔야 합니다.


      브라우저가 인터넷 익스플로러인거 같은데...
      인터넷 익스플로러는 11 이상만 지원됩니다.
      현재 배포되는 티스토리 스킨은 모두 11 이상이어야 합니다.
      레퍼런스 스킨이나 다른 스킨 제작자 스킨도 모두 동일합니다.
      인터넷 익스플로러 버전을 확인해보세요..
      도움말 > 정보에서 확인할 수 있습니다.
      10 이하에서는 정상 동작하지 않습니다.

      인터넷 익스플로러11에서는 정상 동작하는 것으로 확인했습니다.


      11인 경우 혹시 모르니까, 스킨 새로 다운로드 받은 스킨 안의 index.xml과 images 폴더 안의 script.js 파일을 다시 업로드 하시고,

      웹브라우저 캐시를 소거한 후(반드시) 화면 갱신을 해서 확인해보시기 바랍니다.

      또는 말씀드린데로, html 태그 자체는 탑에 있고, 스킨 옵션 설정에 따라 자바스크립트로 사이드 위치로 옮기는 것이기 때문에, 자바스크립트가 실행이 가능해야 하는데, 웹브라우저 옵션 설정에서 자바스크립트 실행을 끈 것일 수도 있습니다.

      확인해볼 내용은 이정도 일 것 같습니다.

      사용하는 웹브라우저에서만 캡쳐한 화면처럼 보이고, 다른 사람들은 정상적으로 사이드에 카테고리가 위치한 상태로 잘 보입니다.
      크롬 브라우저를 설치해서 크롬 브라우저로 한번 확인해보시기 바랍니다.

  • 익명 2020.12.24 17:00 댓글주소 수정/삭제 댓글쓰기

    비밀댓글입니다


닫기