본문 바로가기

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

티스토리 스킨 - 반응형 2단 뉴스페이퍼A 티스토리 스킨 배포합니다.

스킨명 : 티스토리 반응형 2단 뉴스페이퍼A



주요 특징들


- 글꼴을 돋움체(노토산스KR), 바탕체(노토셰리프KR) 중에서 선택할 수 있습니다.
- 글목록을 리스트형과 썸네일형 중에 선택할 수 있습니다.

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

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

- 헤더 높이는 좁게, 또는 넓게 조정할 수 있습니다.

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





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









- 스킨 설정 안내






레이아웃


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


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


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



공통/페이지


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


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


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


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


글목록 타입 : 글 목록을 목록형, 썸네일형 중 선택할 수 있습니다.(스킨 미리보기 참조)


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


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


글꼴 타입 : 돋움체(노토산스KR)와 바탕체(노토셰리프KR) 중에서 선택할 수 있습니다.


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



헤더


좁은 헤더 높이 사용 : 기본 헤더 높이는 250px 이며, 좁은 헤더 높이를 사용할 경우 -100px 되어 150px로 좁아집니다.


헤더 배경 이미지 사용 : 헤더 여역에 배경 이미지를 표시합니다. 기본 이미지 파일명은 "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개만 사용해야 합니다. 추가로 생성하면 레이아웃이 깨집니다.




스킨 설치 방법












  • 비밀댓글입니다

    • 해당 스킨의 글 머릿말은
      .entry-content h1 ~ h5로 정의되어 있습니다.
      글자 크기나 여백 관련 설정은 style.css 에서 해당 부분을 찾아서 변경하면 됩니다.

      최근 제작되어 배포하는 스킨들은 모두 위 css로 정의되어 있습니다.

  • 시나브로 2019.07.07 03:11 댓글주소 수정/삭제 댓글쓰기

    안녕하세요. 먼저 훌륭한 스킨 배포해 주셔서 감사드립니다.
    이제 막 적용중인데, 커버아이템 중에 '리스트'를 선택한 후 메인메이지에 글들이 리스트되는데요
    어포스트님이 올려주신 사진예제들을 보면 메인페이지에서 썸네일이 왼쪽/ 글이 오른쪽으로 나오는데,
    제거는 반대로 글이 왼쪽/ 썸네일이 오른쪽으로 나오네요. 이부분은 어떤 것을 수정하면 될까요?

    그리고, 애드센스 링크광고 삽입시, PC에서는 깨끗하게 나오는데, 모바일에서 보면 오른쪽 끝부분과 하단 끝부분이 잘려서 나옵니다. <center></center> 를 넣어봐도 처음로딩될때 아주잠시 영점몇초간 제대로 나오고 바로 광고 오른쪽 끝부분과 하단끝부분이 뭔가에 덮히는 것 같이 모바일 화면에서 없어져버리는 현상입니다.

    • 1. 커버리스트는
      스킨 원본 기준 style.css 1256행에
      .cover-list ul li figure
      클래스가 정의되어 있습니다.

      속성중에
      아래 2개 속성을 찾아서 아래처럼 값을 바꿔주면 됩니다.
      (right -> left, 0 0 0 40px -> 0 40px 0 0
      float: left;)

      float: left;
      margin: 0 40px 0 0;

      이렇게 하면 이미지가 왼쪽 정렬로 붙게 됩니다.

      2. 애드센스 광고는 블로그를 봐야 원인을 알 수 있을 것 같습니다.
      비슷한 질문을 하셨던 다른 분들의 경우 대부분 애드센스 코드가 잘못 붙었거나 위치 문제로 겹쳐지거나 하는 경우였습니다.
      블로그 url을 알려주세요. 확인해봐드리겠습니다.

  • 궁금이 2019.07.09 18:02 댓글주소 수정/삭제 댓글쓰기

    안녕하세요. 뉴스페이퍼A스킨 잘 사용하고 있습니다.

    다른 스킨들 댓글에서 글자체 바꾸는 방법을 보고, 글자체를 전부 나눔고딕으로 변경했는데요. 변경하고나니, 메인페이지 썸네일하고 같이 나오는 요약글 제목이 'bold' 가 아닌 얇은 글로 나오는데, 요약글 제목을 'bold' 로 변경하려면 어떻게 하면 되나요?

    .cover-list ul li .title

    이부분인것 같은데, 여기 css 항목에 font-weight가 안보이네요?

    답변 미리 감사드립니다.

    • 요약글 제목이라고 하신게 조금 모호합니다. 설명은 글 미리보기 같은데 css를 고른건 title이어서...

      일단 추가한 커버 기능이 커버리스트인걸로 보이고

      .cover-list ul li .title - 제목
      .cover-list ul li .excerpt - 글미리보기

      입니다.
      배포하는 스킨에는 볼드 속성 처리가 없습니다.
      글자 크기가 좀 크다보니 볼드처럼 보일것일 수도 있습니다.

      볼드처리를 하고 싶으시면
      위 클래스 중 원하는 것 안에

      font-weight: bold;

      속성을 추가해주시면 됩니다.

  • jaykim 2019.07.11 18:35 댓글주소 수정/삭제 댓글쓰기

    안녕하세요. 뉴스페이퍼A 스킨을 적용중인데요.

    전체적인 layout width가 화면에서 보기에 조금 넓은 것 같아서요.
    전체적인 폭(메인 이나 글보기 모두)을 현재 폭에서 80~90% 로 조정하고 싶은데,
    어떤 부분을 수정하면 될까요?

    훌륭한 스킨 배포해주셔서 감사합니다~~

    • 최대 너비를 줄이려면 style.css 에서 총 3군데를 수정해야 합니다.
      위에서 부터 검색하면
      #wrap
      #wrap > .inner
      두개는 max-width: 1220px;
      로 정의된 너비 숫자를 줄이면 되고

      #content

      width: 880px;
      를 위에서 줄인 크기만큼 맞춰서 동일한 크기만큼 줄여주면 됩니다.


      해당 스킨은 100px 단위로 브라우저 너비 크기에 따라 반응하기 때문에
      최대 크기인 1220px에서 100px 이상 줄일 경우 해당되는 크기에 맞춰 조절되는 미디어쿼리를 삭제해줘야 합니다.

      style.css에서
      @media 로 검색하시면
      #wrap, #wrap > .inner 와 #content 만 정의된 미디어 쿼리가 몇개 순차적으로 있습니다. #wrap > .inner 크기 기준으로 크기가 넘치는 것은 삭제를 해주어야 합니다.

      예를 들어 최대 너비를 1120px 미만으로 줄일 경우 첫번째 미디어쿼리는 삭제를 해주어야 합니다.(1236px로 검색하면 해당되는 미디어쿼리가 나옵니다.)

  • 비밀댓글입니다

    • 관리자 모드라는게 어떤 관리자 모드를 말하는건가요?
      블로그 관리자 페이지를 말하는건지?

    • 2019.07.23 10:18 댓글주소 수정/삭제

      비밀댓글입니다

    • 관리자 페이지는 스킨과 무관한 영역입니다.

      스킨은 방문자에게 보이는 영역만 영향을 미칩니다.

      티스토리 관리자 페이지는 모바일 대응이 되지 않는 페이지들입니다.
      관리자 영역 전체가 그렇습니다.

      모바일 기기에서 보이기는 하지만, 정상적으로 대응이 되지 않습니다.
      데스크탑 전용이라고 보셔야 하고, 모바일에서는 티스토리앱이 앱스토어에 있습니다. 이걸 이용하셔야 합니다.

  • PC에서 카테고리는 어떻게 넣나요? 모바일은 3단메뉴 누르면 카테고리가 나오는데, 사이드바 설정에서 카테고리가 없네요. 수작업으로 넣어줘야 하는 것 같은데 할 줄을 몰라서;;;

    • 카테고리는
      스킨 옵션 설정으로 위치를 조정할 수 있습니다.

      스킨옵션설정 항목들중
      레이아웃 그룹
      카테고리 위치 항목에서 사이드바, 또는 탑메뉴중 선택할 수 있습니다.
      "사이드바"를 선택하면 상단에 있던 카테고리가 사이드바쪽으로 이동합니다.

      스킨 편집으로 들어가면 오른쪽에 스킨 설정 옵션들이 있습니다.

  • 안녕하세요~
    좋은 스킨을 만들어주셔서 잘 사용하고 있습니다. 진자 너무너무 감사요 , 정말 딱 찾던 사용하고자 했던 구성이라 아주 만족하고 있습니다.

    엊그제 스킨 입히고 오늘은 인피드광고를 삽입하려고 하는데,
    제가 잘 못하는건지.. 아무리 이리저리해도 인피트광고가 뜨질 않습니다.

    지금은 그냥 기본적인 인티드를 삽입한상태이고 한두시간 기다려볼 예정인데,,
    인피드광고를 목록 몇개당 뜨게하는건 생각치도 않고 있어요..

    이 스킨이 인피트광고가 지원이 안되는건 아닌거죠?
    (설마 아니겠지만....ㅠㅠㅠ)

    • 인터넷이나 구글애드센스에서 인피드 광고 코드를 가져다 붙이신 경우 스킨에 맞게 태그 정보 등을 조정을 해주어야 합니다.

      제공되는 코드들이 샘플 코드이기 때문에 그대로 사용할 수 없습니다.

      https://apost.kr/472

      이 글을 참고하시기 바랍니다.

  • 아 네 감사합니다~
    참고하겠습니다 ^^


닫기