본문 바로가기

티스토리스킨/팁.활용.확장

어포스트 배포 스킨 옵션 설정 안내

반응형

* 스킨 옵션 설정 중 공통적인 스킨 옵션들을 설정하는 방법을 안내하는 글이며, 스킨에 따라 옵션 설정 값은 다를 수 있습니다. 스킨별 특징 옵션들은 각 스킨 설명 글에 별도로 안내가 됩니다.



배포하는 스킨들은 스킨편집기에서 스킨 옵션 설정을 통해 스킨 레이아웃을 다양하게 변경할 수 있습니다.

 

스킨에 따라 표시되는 옵션 항목들은 다를 수 있으며, 표시되지 않는 옵션 항목은 해당 스킨에서 사용할 수 없는 옵션입니다.

 

스킨 옵션은 그룹 단위로 구분되어  해당 영역, 또는 용도에 따라 나누어져 있으므로 해당 그룹에서 필요한 옵션 항목을 찾으면 됩니다.



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

 


레이아웃

 

 


  • 사이드바 표시/위치 - 사이드바 없는 1단, 2단 왼쪽 사이드바, 2단 오른쪽 사이드바를 선택할 수 있습니다. 사이드바 없는 1단 레이아웃은 모바일 메뉴 형태로 상단에 메뉴 아이콘과 검색 아이콘이 고정으로 표시됩니다.

  • 카테고리 위치 - 카테고리를 가로 탑메뉴, 또는 사이드바에 세로로 배치합니다.



  • 커버 배너 위치 - 커버 슬라이드 배너 위치를 컨텐츠 영역, 또는 헤더 영역에 위치시킬 수 있습니다. 헤더 영역에 위치시킬 경우 좌우 영역을 모두 채우는 풀페이지 배너로 표시됩니다.

  • 컨텐츠, 사이드바 영역 테두리 여백주기(20px) - 컨텐츠 영역과 사이드바 영역의 내용과 테두리 사이에 20px의 여백을 줍니다. 배경 이미지를 사용할 경우 내용이 영역을 모두 차지하기 때문에 보기 않좋아지는 경우를 위한 기능입니다.



    여백 크기를 강제로 조정하려면
    ".content-area-padding" 클래스 명을 style.css 에서 검색해
    padding: 20px; 값을 변경해주면 됩니다.

 


공통/페이지

 

 


  • 기본 글꼴 - 블로그에 사용할 글꼴을 선택합니다. 노토산스KR(돋움/고딕), 노토셰리프KR(바탕/명조), 나눔고딕(네이버), 나눔명조(네이버) 중 한가지를 선택할 수 있습니다. 전체 블로그에 적용됩니다.

  • 스킨 배경 이미지 사용-body-bg.jpg - 블로그 전체 배경 이미지를 사용합니다. 배경 이미지는 화면 스크롤과 무관하게 고정으로 표시됩니다. 기본 배경 이미지 파일은 body-bg.jpg 입니다.

    배경 이미지 파일명을 변경하려면 style.css 57행의 파일명을 변경하면 됩니다.

  • 스킨 배경색 선택 - 컬러테이블에서 블로그 전체 배경색을 지정합니다.

  • 하이라이트/테마 컬러 - 마우스 오버, 검색버튼 등 스킨에 사용되는 포인트 컬러 색상을 지정합니다.

  • 짧은 날짜 사용(년월일) - "2019-07-01" 과 같이 짧은 날짜 포맷을 사용합니다. 블로그 전역으로 적용됩니다.



  • 탑 스크롤 버튼 사용 - 화면 스크롤시 블로그 오른쪽 하단 끝에 화살표 아이콘이 표시되며, 클릭하면 블로그 최상단으로 자동으로 애니메이션 스크롤됩니다.




  • 페이지 리스트, 탑스크롤 둥근모서리 - 페이지 이동 링크, 탑스크롤 아이콘의 테두리를 둥글게 표시합니다.




헤더

 


 

  • 좁은 헤더 높이 사용 - 헤더 영역 높이를 160px 로 작게합니다. 카테고리를 탑메뉴로 표시할 경우 44px가 더해져 204px가 됩니다.

  • 헤더 배경 이미지 사용-header-bg.jpg - 헤더 영역에 배경 이미지를 표시합니다. 커버 슬라이드를 헤더에 표시할 경우 블로그 메인 페이지에서는 배경 이미지가 보이지 않으며, 나머지 블로그 페이지에서는 표시됩니다.

    헤더 이미지를 사용하지 않을 경우 헤더 영역은 블로그 배경색, 또는 블로그 전체 배경 이미지로 빈 영역으로 남게됩니다.

  • 전체 너비 헤더 - 헤더 영역을 풀페이지로 좌우를 채워서 표시합니다. 풀페이지 헤더가 아닐 경우 건텐츠 영역 좌우 너비 만큼만 헤더 영역이 표시되고 나머지는 여백으로 채워집니다.

  • 블로그 타이틀 색상 선택 - 블로그 타이틀 텍스트 색상을 지정합니다.

  • 타이틀 대체 이미지 - 블로그 타이틀을 대체하는 이미지를 업로드 합니다. 업로드된 이미지는 블로그 타이틀 텍스트를 대체해서 표시됩니다.

  • 검색 입력 펼침 - 검색바를 펼쳐서 표시합니다. 사이드바가 없는 1단 레이아웃을 사용할 경우에만 옵션이 적용됩니다. 검색 입력 펼침을 사용하게 되면 오른쪽 상단 끝에 표시되는 검색 아이콘을 대신해서 검색바가 펼쳐져 검색 입력 필드가 표시되는 상태로 고정됩니다.

  • 헤더 오버레이 표시 - 헤더 영역에 오버레이 이미지를 표시합니다. 오버레이 이미지가 있는 스킨에만 적용되며, 오버레이 이미지가 없을 경우 오버레이 이미지는 표시되지 않습니다.

    헤더 영역이 본문 영역과 자연스럽게 연결하거나 효과를 주기 위한 용도로 사용되는 특별한 이미지이며, 오버레이 이미지를 대체할 경우 원본과 크기가 달라지면 오버레이 이미지 배치가 깨질 수 있으므로, 이 경우 CSS 수정까지 함께 해야 합니다.

 


사이드바

 

 


  • 사이드바 최근글, 인기글 썸네일 표시 - 사이드바 최근글, 인기글 왼쪽에 썸네일 이미지를 표시해줍니다. 이미지 로딩량이 늘어나기 때문에 가볍게 글을 포스팅하는 블로그에서는 추천하지 않습니다.



  • 프로필 표시 - 사이드바 프로필 영역을 표시합니다.

  • 프로필 이미지 크기 - 프로필 아이콘 크기를 선택합니다. 작게, 중간크기, 크게 3가지를 선택할 수 있으며, 작게는 원형, 중간크기는 둥근사각, 크게는 사각형으로 프로필 크기에 따라 테두리 모양이 달라집니다.



  • SNS 아이콘 보기 - SNS 아이콘 영역을 표시합니다. SNS URL 입력이 되어 있어서 아이콘 보기를 켜지 않으면 SNS 아이콘 영역이 표시되지 않습니다.

  • 새창(탭)에 SNS 링크 열기 - 기본 설정은 SNS 아이콘 클릭시 현재 창에 SNS 링크 URL이 표시됩니다. 옵션을 켜면 새탭, 또는 새창에 SNS URL 링크가 표시됩니다.

  • SNS 아이콘은 총 5가지가 지원됩니다.
    • Pinterest URL
    • Facebook URL
    • Twitter URL
    • Instagram URL
    • Youtube URL


커버

 


  • 커버 슬라이더 타입 선택 - 커버 슬라이더 애니메이션 타입을 선택합니다. 슬라이드 방식으로 좌우, 페이드인아웃 방식으로 좌우 를 선택할 수 있습니다. 

  • 커버슬라이드 교체 시간(초) - 커버 슬라이드가 교체되는 주기를 초단위로 입력합니다. 소숫점 이하 자릿수도 사용 가능합니다. 0을 입력하면 슬라이드가 변경되지 않고 첫번째 슬라이드에서 멈춰 있게 됩니다.

  • 커버 슬라이더 이미지 어둡게(글자가 잘보이게 함) : 커버 슬라이드 이미지 앞에 반투명 검정색 필터를 적용해 이미지가 약간 어둡게 보이도록 합니다. 슬라이드 제목이나 블로그 타이틀 등을 밝은색(흰색) 으로 했을 때 글자가 잘 보이도록 해주는 효과가 있습니다.




  • 썸네일 리스트 더보기 버튼으로 썸네일 링크 - 썸네일 리스트 링크를 별도의 "더보기" 버튼으로 표시할지, 아니면 썸네일 이미지와 제목을 클릭할 수 있게 할지를 선택합니다.




  • 썸네일 리스트 내용 미리보기 표시 - 썸네일 리스트의 내용 미리보기를 표시할지를 선택합니다. 이미지 배너 형태로 심플하게 썸네일 리스트를 표시할 경우 이 옵션을 끄면 됩니다.

 


글목록

 


 

  • 글목록타입 - 글 목록을 가로로 긴 리스트 타입으로 표시할지, 썸네일 리스트 형태로 표시할지를 선택합니다.



  • 썸네일 리스트 형태로 표시할 경우 한줄에 표시되는 글 갯수는 데스크탑 모드에서는 3개, 타블렛 모드에서는 2개, 모바일에서는 1개입니다.

  • 페이징 타입 - 글목록 페이지를 이동하는 방식을 선택합니다. 현재 페이지 하단에 다음 페이지 목록을 덧붙이는 "더보기", 이전/다음 페이지 링크만 표시하는 "이전/다음", 페이지 숫자 목록을 표시하는 "페이지목록" 중 한가지를 선택할 수 있습니다.

    공통/페이지-페이지 리스트, 탑스크롤 둥근모서리 항목에서 테두리를 사각형, 또는 원형으로 선택할 수 있습니다.
  • 글 미리보기 내용 출력 - 글 미리보기 내용을 출력합니다. 출력 줄수는 4줄입니다.

  • 글 목록 날짜 출력 - 글 목록의 날짜를 표시합니다. 날짜 표시 포맷은 공통/페이지-짧은 날짜 사용(년월일 - 2017-07-01) 을 끄면 시분초까지 표시(2019)되며, 켜면 년월일까지만 표시됩니다.

  • 썸네일 이미지 빈 영역 자리 차지 - 썸네일 이미지가 없을 경우 이미지 영역 크기만큼 빈공간으로 남겨두고 이미지 없음 아이콘을 표시합니다. 옵션을 끄면 이미지 영역이 완전히 사라져 자리 차지를 하지 않으며, 글 제목과, 글 내용 미리보기만 표시됩니다.

 


글내용

 


  • 글보기 검정색 글자색상 강제 적용 - 글 내용 영역의 글만 강제로 검정색으로 글자색상을 지정합니다. 글 내용을 돋보이게 하길 원하는 경우 사용할 수 있습니다.

 


푸터

 


  • 푸터 이미지 표시 - 푸터 영역에 업로드한 푸터 이미지를 표시합니다. 이미지는 가운데 정렬되며, 표시 순서는 푸터 이미지-푸터 텍스트, 블로그 메뉴 입니다.



  • 푸터 텍스트 표시 - 입력한 내용을 푸터 영역에 표시합니다. 푸터 이미지가 있을 경우 푸터 이미지 밑에 가운데 정렬로 표시됩니다. 저작권 표시나, 사이트 관련된 정보등을 표시하는데 사용합니다.

  • 블로그 메뉴 표시 - 푸터 영역 블로그 메뉴를 표시합니다.


 


모바일화면

 

 


  • 헤더 영역 미사용 - 헤더 영역을 감추고, 블로그 타이틀과 모바일 메뉴 호출 아이콘을 한줄로 표시해 차지하는 공간을 최소로 줄여줍니다.



  • 커버 슬라이드 높이 축소(400px->290px) - 커버 슬라이드를 표시할 경우 커버 슬라이드 높이(400px)를 모바일 화면에서는 290px로 줄여줍니다. 


반응형
  • 와오... 대박이네요. 스킨을 또 바꿔보고 싶어지게 만드는 옵션이네요. 포스팅은 안하고..집꾸미기;;

  • 신 스킨들에 추가되는 기능들을 볼 때마다 너무 탐나는데, 다시 세팅하기에 엄두가 안나네요..ㅎㅎ

  • 비밀댓글입니다

  • 최근 설정하고 많이 달라졌네요?
    설정이 많이 없어진거 같아요

    • 스킨마다 설정 항목들이 다릅니다.
      공통적으로 많이 사용하는 것들만 모아놓은 것이고, 어떤 스킨은 위에 설명된 옵션들 절반 정도만 있는 것들도 있습니다.
      스킨 설정상 불필요하거나, 스킨 디자인 레이아웃상 변경하면 안되는 것들은 빠지기도 하고 그렇습니다.
      스킨 옵션 설정 자체가 어려운 설명이나 항목이 있는 것들이 아니기 때문에 옵션 켜고 끄고 해보면 블로그에 실시간으로 반영되는 것을 알 수 있습니다.
      위에 스킨 옵션 설정은 옵션값이 가장 많았던 스킨을 기준으로 작성된 것입니다.

  • 넵 감사합니다.

  • 혹시 타이틀 이미지 사이즈를 어떻게해야 하나요? 계속 크랍해가면서 올렸는데 뿌얘보여서...사이즈 확인부탁드려요~~

    • 타이틀 이미지 사이즈라는건 블로그 타이틀 이미지를 말하는건가요?
      대부분 스킨은 타이틀 이미지에 별도 크기를 주지 않습니다. 업로드해서 링크한 이미지를 그대로 뿌립니다.

      적용하신 스킨 번호/이름과
      타이틀을 어떻게 조정하고 싶으신건지 답글을 다시 달아주시면 좋겠습니다.

    • 네, 2단형 096번이고, 제가 텍스트를 이미지화해서 올렸거든요 -> HELLO!
      그런데 이미지가 스트레치되서 삽입이 된 것인지 선명해보이지 않아서 문의드려요. 블로그 타이틀 이미지 사이즈를 어떻게 설정해야 되는지 확인 부탁드려요. 스킨 잘 쓰고 있는데 블로그 타이틀 이미지가 선명해보이지 않아서 신경이 계속 쓰여요. ㅜㅜ 확인 가능하시면 댓글 부탁드립니다.

    • 일단 로고 이미지 크기는 152x42이고
      블로그 화면에도 1:1로 출력이 되고 있습니다.
      이미지가 선명하지 않다는 말이 어떤건지 정확히는 판단이 되지 않지만, 보이는 이미지로 봐서는 로고 이미지를 jpg로 압축해 저장하면서 라인으로 된 부분이 살짝씩 뭉게지는게 아닌가 싶습니다.
      작업한 원본 이미지를 비손실 포맷인 png 포맷으로 저장을 해서
      로고 타이틀 이미지로 업로드를 해 링크를 걸어보시기 바랍니다.

    • 2020.01.04 20:42 댓글주소 수정/삭제

      비밀댓글입니다

  • 유리별 2020.02.18 23:20 댓글주소 수정/삭제 댓글쓰기

    좋은 스킨 감사합니다. 그런데, 스킨 파일 업로드 후.. 스킨 옵션 설정은 어디에서 할 수 있는건가요? 찾지를 못하겠네요.. ㅜ.ㅡ

    • 직접 찍으시려면

      https://apost.kr/manage/design/skin/edit#/

      이런식으로 본인 블로그 도메인으로 변경해서 접근하면 되고..

      메뉴로 들어가려면

      블로그 관리자 페이지 좌측메뉴
      스킨편집
      으로 들어가면 됩니다.

  • https://sarangmisul.tistory.com 에 적용해봤습니다.
    '사랑미술'이라는 블로그 타이틀을 왼쪽에 두고, 오른쪽에는 애드센스를 넣고 싶습니다.
    타이틀을 왼쪽으로 두려면 어떻게 해야 하나요?

    • 스킨원본기준
      style.css

      1.
      #header > .title{
      검색(248행)해서
      text-align: center;
      속성행 삭제.
      실수로 속성이 2개가 들어가있는데 2개 모두 삭제하시면 됩니다.

      2.
      #header > .title h1 {
      검색(320행)해서
      text-align: center;
      속성행 삭제를 하면

      타이틀이 왼쪽으로 붙게됩니다.

    • 고맙습니다! ^^

  • 가르쳐주신대로 해서 타이틀을 왼쪽에 두는 것을 성공했습니다. 고맙습니다.
    그 옆에 오른쪽에 애드센스를 수평형으로 두려면 받은 코드를 어떻게 넣어야 하나요?
    <div class="blog title">을 기준으로 어디에 넣어야 하는지요.

  • 포스팅 제목 크기를 바꿀순 없나요?

    • 글 제목은 css를 직접 수정해야 합니다.
      스킨 설정값으로 따로 제공하는 스킨은 없습니다.

      대부분 제가 배포하는 스킨은 css에

      .hgroup h1 -> 글제목
      .post-header h1 -> 그외나머지 타이틀

      두개로 상단 타이틀 글자 크기를 정합니다.

      참고해서
      글꼴 크기값을 css에서 변경해주면 됩니다.

  • css에
    .hgroup h1 가 없어서 수정할수가 없습니다.


  • 검색으로 않나왔는데 감사합니다.

  • 비밀댓글입니다

    • 1.
      "분류 전체보기" 카테고리는 티스토리 시스템에서 카테고리 리스트로 일괄로 뿌리는 것입니다.
      안나오게 할 수는 없고 화면상에 보이지 않게 하는 것만 가능합니다.

      스킨 원본 기준
      style.css 540행 밑에

      #header .category-menu .category a.link_tit{
      display: none;
      }
      요 클래스를 추가해주면 전체 보기가 화면에 보이지 않게 됩니다.

      2.
      질문 의미가 좀 애매한데...
      다른 분들 질문 기준으로 목록은 여러개 나오고 글 내용보기가 1개만 나오게 하는거면 티스토리 시스템상 허용되지 않습니다.
      갯수가 공통 변수로 사용되기 때문에 임의로 변경이 불가능합니다.

      의도한게 목록도 1개 글보기도 1개면 스킨 옵션 설정에서 페이지당 글갯수 변수로 조정이 가능합니다.

    • 2020.03.29 01:57 댓글주소 수정/삭제

      비밀댓글입니다

    • 현재 적용 스킨 기준으로
      style.css

      165행
      .narrow-header #header
      클래스 높이 속성을
      204px -> 304px 로 변경

      485행
      #header > .title h1 a
      클래스의
      height: 1.5em;
      속성을 제거하면

      200x200px 타이틀 대체 이미지를 맞춰 붙여넣을 수 있습니다.

    • 2020.03.29 03:43 댓글주소 수정/삭제

      비밀댓글입니다

  • 저도 스킨 고친지 얼마 안 됐는데도 불구, 베이스가 제 현재 스킨이라 더욱 더 탐나네요. 고맙습니다. :)

  • 비밀댓글입니다

    • 스킨원본기준 skin.html
      13행 끝에

      .search input{
      ->
      .search input, .entry-content a:hover{

      , .entry-content a:hover
      이 내용을 추가해주면 마우스 오버시에 테마 컬러로 컬러링이 됩니다.

      버그라고 보여서 해당 부분은 스킨 패치를 했습니다.

  • 와드 2020.10.21 02:01 댓글주소 수정/삭제 댓글쓰기

    저는 글꼴이 설명해주신것처럼 노토산스KR(돋움/고딕), 노토셰리프KR(바탕/명조), 나눔고딕(네이버), 나눔명조(네이버) 이 글꼴들을 선택항목도 없이 글꼴타입에 돋움체와 바탕체만 있습니다. 어떻게해야하나요?

    • 스킨에 따라 글꼴 선택이 있는 것이 있고 없는 것이 있습니다. 글꼴을 여러개 선택할 수 있게 만들면 글꼴이 미리 로딩되면서 초기 로딩 속도에 영향을 주기 때문에 일부 스킨에만 글꼴 선택 옵션이 있습니다.


닫기