본문 바로가기

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

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

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

주요 기능들


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

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

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

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

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

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


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

2019-06-03 ver 1.0.4 patch - 카카오맵 커버 기능 삭제

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

2019-05-21 ver 1.0.1 patch - IE 호환성 개선 패치

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





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







- 스킨 설정 안내




레이아웃


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


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


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


사이드 테두리 그림자 적용 : 레이아웃 좌우 경계선 영역에 그림자 효과를 표시합니다. 밝은색 배경에 사용하면 경계선 구분이 잘됩니다.



공통/페이지


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



050_Responsive_Magazine_B.zip


스킨 설치 방법







  • 안녕하세요. 덕분에 잘 사용하고 있습니다. 혹시 본문 넓이를 한정하려면 스킨을 어떻게 손을 봐야 할까요?

    • 본문 너비를 한정한다는게 레이아웃의 본문 영역 너비를 줄인다는 뜻인가요?
      아니면 작성한 글 내용의 너비를 한정하려고 하시는 건가요?

  • 반응형 스킨이다 보니 브라우저 너비 만큼 글의 폭이 길어지는 효과가 있는 것 같습니다. 작성한 글 내용의 너비를 한정한고 싶다, 는 것이 맞는 것 같습니다.

    • .entry-content 클래스로 너비를 한정할 수 있습니다.
      스킨 원본 기준 style.css 2111행에 있습니다.
      클래스에

      max-width: 700px;

      와 같이 너비값 속성을 주면 너비값이 제한됩니다.
      글이 왼쪽 정렬 되는게 불편하면

      text-align: center;

      속성을 더주면 한정된 너비 안에서 텍스트만 가운데 정렬이 되고

      margin: 0 auto;

      를 더 추가해주면 레이아웃 컨텐츠 영역 안에서 센터로 글 영역이 정렬됩니다.

      이미지는 티스토리 에디터(구에디터 기준)에서 왼쪽 정렬값을 코드에 넣기 때문에 강제로 센터 정렬을 줘야 합니다.

      원본기존 2130행
      .entry-content p 클래스에

      text-align: center !important;

      를 줘서 강제로 센터 정렬을 주면 전체가 가운데 정렬이 됩니다.


  • 자세한 답변 감사합니다. 많은 도움 되었습니다.

  • 보통이 2019.05.27 17:22 댓글주소 수정/삭제 댓글쓰기

    안녕하세요. 덕분에 스킨을 바꿀수 있게 되어서 너무 감사합니다!
    한가지 여쭙고싶은게 슬라이더에 사진을 넣으면 원래색보다 어둡게 나오던데 혹시 원색으로 나올수있게 할수있나요?

    • 밝은 사진때문에 글자가 안보이는 현상을 줄이기 위한 일종이 범용 환경을 위한 타협책입니다.
      필요없으면 이미지위에 덧붙는 어두운 반투명을 제거하면 원래 이미지로 보이게 됩니다.

      스킨 원본 기준
      style.css
      1068행
      background-color: rgba(0,0,0,0.25);
      을 지우면
      또는 4번째 인자인 0.25를 0으로 하면
      반투명 어두운 효과가 사라집니다.

      클래스로 검색하려면
      .cover-slider ul li > div
      클래스입니다.

  • 좋은 스킨 만들어 주셔서 감사합니다.
    근데 레이아웃 - 카테고리 - 사이드바로 지정했는데 카테고리 영역이 왜 탑메뉴에 있는 걸까요?

  • 아핫! 블로그 초보라 헤멨는데 감사합니다.~

  • 저도 윗분 처럼 레이아웃 본문 넓이를 줄이고 싶었는데
    style.css 2111행에 color: #484848; 이게 있어서 찾다가
    2143행에 max-width: 100%; 이게 있길래 700px 로 수정해 봤는데 변화가 없더라구요~
    어떻게 해야 할까요?

    • 스킨이 패치되면서 행 위치는 조금씩 변합니다. 패치량이 많으면 전혀 다른행이 되거나 해당 내용이 사라지기 때문에 이전 댓글로 판단하시면 안됩니다.

      아마도 위 댓글에 있는 내용은 이후에 필요 없는 부분이어서 사용자한테 혼동을 줄 수 있을 것 같아 스킨에서 해당 부분이 삭제되었을 겁니다.

      글보기 내용 영역만 줄이시는게 목적이면
      현재 스킨 원본 기준
      2116행
      또는
      .entry-content{
      로 검색해서 찾아도 됩니다.

      2116과 2117행 사이에 새 행을 만들어서
      max-width: 700px;
      속성을 추가로 부여하면 됩니다.

      나머지 센터 정렬 등은 위 댓글하고 동일하게 위 위치에 속성들을 추가해주면 됩니다.

  • 자세한 안내 감사합니다.^^

  • 굳입니다. 초보 블로거인데 큰 도움이 됩니다 감사합니다!

  • 이얍! 2019.06.11 20:56 댓글주소 수정/삭제 댓글쓰기

    안녕하세요!
    본문 폰트를 나눔고딕으로 바꿀 수 있을까요?

    멋진 스킨 만들어 주셔서 감사합니다.

    • style.css 원본기준

      24행에 구글 폰트 인클루드의
      Noto+Sans+KR

      Nanum+Gothic
      으로 변경

      29행, 82행의
      'Noto Sans KR'

      'Nanum Gothic'
      으로 변경하면 됩니다.

      다른 글꼴로 변경할때도 동일한 방법으로 변경하면 됩니다.

      따옴표나 + 표시 주의해서 붙여넣으셔야 합니다.