본문 바로가기

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

티스토리 스킨 - 반응형 2단 매거진A 티스토리 스킨 배포합니다.

스킨명 : 티스토리 반응형 2단 매거진A

* 여행, 먹방 블로그 같은 블로그를 제작하기에 좋은 스킨입니다.


주요 기능들


- 스킨 메인 테마 색상/마우스 오버 색상을 지정할 수 있습니다.(하이라이트 색상)

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

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

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

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

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


---------------------------------------------------------
2019-06-03 ver 1.0.3 patch - 카카오맵 커버 기능 제거
2019-06-01 ver 1.0.2 patch - 모바일 검색폼 클릭시 사이드 메뉴 닫히는 버그 패치
2019-05-27 ver 1.0.1 patch - 모바일 사이드메뉴 스크롤락 호환성 개선
---------------------------------------------------------




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








- 스킨 설정 안내




레이아웃


사이드바 위치 : 사이드바 배치를 왼쪽, 오른쪽 중 선택.


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


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



공통/페이지


스킨 배경 이미지 사용 : 전체 스킨 배경 이미지를 표시할지 선택. 기본 배경 이미지는 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개만 사용해야 합니다. 추가로 생성하면 레이아웃이 깨집니다.



스킨 설치 방법






  • 안녕하세요 간만에 질문 드려요;;

    지난번 자동차 스킨 보다 맘에 들어서 카테고리;; 때문에 ㅎㅎ; 적용해 봤는데요

    그 푸터 이미지 있자나요 그거는 폰으로 볼때 작아지게 안되나요?

    헤드 이미지는 폰으로 봤을때 이미지가 다 나오더라구요

    어디를 수정해야 할지 몰라서 일단 문의 드려요

    늘 좋은 스킨 감사합니당~

    • 답변이 늦었습니다.
      답변 달린걸 못보고 넘어간거 같습니다.

      클래스를 하나 만들어서 적용해주면 최대100%로 좌우에 차게 조절됩니다.

      #footer .footer-image img{
      max-width: 100%;
      }

      요걸 원본기준 style.css 781행 밑으로 적당한 위치에 넣어주시면 됩니다.
      원래는 회사 로고나 그런걸 넣는 용도여서 좌우로 다차는 큰 이미지를 고려를 안했습니다.
      스킨 패치가 필요할 것 같아 스킨에는 추후에 반영을 하도록 하겠습니다.

  • 답변 감사합니다 한번 적용해 볼께요 ^^

  • 답변주신거 적용하니 잘되더라구요 이 스킨 아닌 요거 담에 나온거에서도 잘되었어요 그래서 현재 운영중인 블로그에 적용했었는데
    자동광고를 넣으니.. 글하고 겹쳐 나오더라구요;;
    그래서 사이드바 HTML 배너출력으로 광고를 넣어 봤는데 맨마지막에 넣는 광고는 잘되었지만
    광고를 중간에 넣으면 그러니까 예를 들어 달력 위에 광고를 넣으면 광고랑 달력이랑 겹치는 문제가 생기더라구요
    이문제 해결 방법 없을까요 맨날 질문만 남기네요;; 하다하다 안되서 원래 스킨으로 복원 했네요 역시 백업의 중요성을 또한번 느낍니다

    • 질문 내용을 기준으로 추측컨데
      겹친다는게 아마도 광고가 안나온다는게 아닌가 싶습니다.

      사이드바에 있는 치환자들은 특성이 좀 있어서
      <s_sidebar>
      <s_sidebar_element>
      </sidebar_element>'
      </s_sidebar>
      사이에 뭔가를 넣으면 출력이 되지 않습니다. 치환자 처리를 하면서 다 날려버립니다.

      사이드바 애드센스 광고는 html태그값 사이에 반드시 넣어야 합니다.
      제일 쉬운건 저처럼 맨위나 맨아래에 적당히 붙이는 것이고, 아니면

      원하는 블록 위치의
      <div class="box_aside">
      태그 위나 아래에 붙여넣고 css를 조금 더해서 위아래 여백을 조정해주는 방법입니다.

      아니면
      <div class="box_aside">..애드센스코드..</div>
      로 사이드바 블록을 따로 만든 후
      <div class="box_aside">
      윗줄에 붙여넣어줘도 될거 같습니다.
      테스트해본바로는 이렇게 하면 아무 위치에나 잘 붙습니다.

  • 알려주신 코드를 넣으니 제가 원하는 곳에 붙더군요 감사합니다 ^^

    그런데 또 한가지 궁굼한점이 포스팅에 표는 작아지지 않턴데 이건 티스토리에디터 문제겠죠??

    암튼 잘 적용해서 잘 쓸께요 좋은 스킨 감사합니다

  • https://goodgogo.tistory.com/743 이 포스팅 에 보시면 표가 있는데요

    롬날짜 파일명 이라고 써진 표가 있습니다

    이 표가 폰에서 보면 안작아지더라구요

    • script.js 파일을 보면
      mobileTable()
      함수가 있습니다.

      글 내용에 테이블이 있으면 table-wrap 이라는 클래스를 가진 div로 감싸서 가로로 테이블이 넘치면 가로 스크롤바가 자동으로 생기게하는 스크립트입니다.
      모바일에서는 테이블을 왼쪽으로 스와이프하면 테이블을 가로로 스크롤해가면서 볼 수 있게 됩니다.

      티스토리 레퍼런스에서 이렇게 구현을 해서 써서 저도 그냥 그걸 따라 쓰고 있는 것입니다.

      모바일에서는 이함수가 없으면 테이블이 한없이 길어지게 되거나, 너비를 강제로 고정시킨경우 오른쪽으로 레이아웃이 넓어져보이면서 화면이 좌우로 왔다갔다하는 부작용이 생기게 됩니다.

      그런걸 막기위한 나름의 해결책을 티스토리가 쓰고 있는 것입니다.

      SEO에는 그닥 좋은 방법은 아닙니다.
      구글검색엔진에서도 모바일 최적화가 안되어 있다고 가끔 걸리기도 하고...

      다만 모바일 가독성은 상당히 좋아지기 때문에 구현된걸 그냥 쓰는걸 권장합니다.
      ---------------------
      누락된 부분이 있어서 덧붙입니다.
      위 mobileTable 함수를 보면
      테이블에
      table-layout: fixed;
      속성이 있는지를 찾습니다.

      style.css 를 보면 모바일 미디어 쿼리에
      table 태그 전역으로
      위 속성을 부여한 부분이 있습니다.
      위 속성값으로 검색하면 나옵니다.
      저 속성을 지우면 테이블이 100% 너비로 모바일에서 보이게 됩니다.
      다만 테이블 내용에 따라 가독성이 현저히 떨어지게 됩니다.(밑으로 한없이 긴 테이블이 됩니다.)

      어디까지나 테이블 너비값을 지정하는 구에디터 기준이고 신에디터는 기본값이 100% 너비 테이블이기 때문에 해당이 안되는 내용입니다.

    • 전역으로
      .entry-content table
      이나
      table
      이 정의된 style.css 부분을 찾아서
      width: 100%;
      속성을 주면 이 속성이 우선이 되기 때문에 전역으로 테이블 좌우 스크롤을 죽일 수 있습니다.

      테이블 좌우 스크롤을 써야하냐 마냐 여부는 본인 선택일것 같습니다.

  • 음 알겠습니다 작아지면 가독성이 떨어질거 같긴 하네요
    표를 안쓰던지 다른 방법을 생각 하던지 해야할거 같은 생각이 드네요
    답변 감사합니다 ^^

  • 멋진 스킨 감사합니다! 그런데 커버 적용할 때 슬라이드가 자꾸 깨집니다 ㅜㅜ 블로그가 두갠데 한개는 잘 적용되는데 다른 하나는 슬라이드가 무조건 깨져서 나와요 어떻게 해야할까요 캐시도 지워보고 스킨등록도 암만 다시 해봐도 이럽니다....

    • 블로그 주소를 알려주세요. 확인해봐드리겠습니다.

    • 2019.06.03 16:47 댓글주소 수정/삭제

      비밀댓글입니다

    • 카카오맵때문에 이러가 발생하는 것입니다.
      skin.html
      750행 맵 스크립트 링크행을 지우시고
      블로그 스킨 커버 설정에서 카카오맵 기본으로 설정되어있는 아이템을 지워보시기 바랍니다.

      일단 깨지는건 정상으로 보이게 티스토리 주소를 api에서 접근 가능하게 열어놓았습니다.(위 작업을 안해도 해당 블로그는 일단 커버 깨지는 현상은 사라질겁니다.)

      편의사항으로 맵을 쓸 수 있게 붙인건데 설정할 줄 모르는 분은 이런 불편함이 있네요.

    • 친절한 답변 감사합니다 !! 좋은 하루 되세용

  • 감사합니다! 잘쓰겠습니다


닫기