롤랑존 · 2017.06.28 12:52 문서 ·

설정하기

스킨에서 지원하는 대부분 기능은 자바스크립트 설정 값을 변경해 제어할 수 있습니다. 해당 설정은 "관리센터 > HTML/CSS 편집 > HTML"에서 찾을 수 있으며 body 태그가 끝나는 곳에 있습니다.

/**
* 스킨 및 문의서비스 구매 안내:
* http://tangbisuda.tistory.com/1
*
* 스킨 가이드:
* http://tangbisuda.tistory.com/3
*
* 설정 옵션:
*
* headerMenu.fontColor = HTML 색상 코드 (예: #fefefe)
* headerMenu.hoverColor = HTML 색상 코드 (예: #1ccacd)
* headerMenu.backgroundColor = HTML 색상 코드 (예: #fefefe)
*
* headerStickyMenu.fontColor = HTML 색상 코드 (예: #212121)
* headerStickyMenu.hoverColor = HTML 색상 코드 (예: #1ccacd)
* headerStickyMenu.backgroundColor = HTML 색상 코드 (예: #fefefe)
*
* headerSubMenu.type = thumb, dropdown
* headerSubMenu.thumb.fontColor = HTML 색상 코드 (예: #fefefe)
* headerSubMenu.thumb.hoverColor = HTML 색상 코드 (예: #1ccacd)
* headerSubMenu.thumb.backgroundColor = HTML 색상 코드 (예: rgba(24,31,28,0.95))
* headerSubMenu.dropdown.fontColor = HTML 색상 코드 (예: #212121)
* headerSubMenu.dropdown.hoverColor = HTML 색상 코드 (예: #1ccacd)
* headerSubMenu.dropdown.backgroundColor = HTML 색상 코드 (예: #fefefe)
*
* homeLink.type = text, image
*
* indexPage.pageType = scroll, more, paging
* indexPage.imageAspectRatio = zero, three-two, four-three, sixteen-nine, one-one
* indexPage.badgeType = front-image, front-text, image-and-text, text-on-box
* indexPage.badgeCaptionAlign = middle, bottom
*
* containerMain.fontColor = HTML 색상 코드 (예: #212121)
* containerMain.backgroundColor = HTML 색상 코드 (예: #fefefe)
*
* pageTitle.fontColor = HTML 색상 코드 (예: #fefefe)
* pageTitle.backgroundColor = HTML 색상 코드 (예: #f8f8f8)
* pageTitle.backgroundImageDesktop: 테스크탑 배경 이미지 (1920px)
* pageTitle.backgroundImageLaptop: 랩탑 배경 이미지 (1440px)
* pageTitle.backgroundImageTablet: 타블렛 배경 이미지 (768px)
* pageTitle.backgroundImageMobile: 모바일 배경 이미지 (425px)
*
* fontSize.article = small, default, large
* fontSize.form = default, large
*
* firstSidebar.titleFontColor = HTML 색상 코드 (예: #212121)
* firstSidebar.itemFontColor = HTML 색상 코드 (예: #7f7f7f)
* firstSidebar.itemHoverColor = HTML 색상 코드 (예: #1ccacd)
* firstSidebar.backgroundColor = HTML 색상 코드 (예: #fefefe)
*
* secondSidebar.titleFontColor = HTML 색상 코드 (예: #fefefe)
* secondSidebar.itemFontColor = HTML 색상 코드 (예: #fefefe)
* secondSidebar.itemHoverColor = HTML 색상 코드 (예: #1ccacd)
* secondSidebar.backgroundColor = HTML 색상 코드 (예: #fa8072)
*
* articleSite.wordBreak = break, keep
*
* articleEffect.imageShape = default, round
* articleEffect.captionAlign = left, center, right
*
* previousNextArticle.imageVerticalAlign = top, center, bottom
*
* relatedArticleEffect = default, edge
*
* commentPlugin = tistory, disqus, livere
*
* footer.fontColor = HTML 색상 코드 (예: #777)
* footer.backgroundColor = HTML 색상 코드 (예: #f8f8f8)
*
* 스킨 설정:
*/
var containerOptions = {
  headerMenu: {
    fontColor: '#212121',
    hoverColor: '#1ccacd',
    backgroundColor: '#fefefe'
  },
  headerStickyMenu: {
    fontColor: '#212121',
    hoverColor: '#1ccacd',
    backgroundColor: '#fefefe'
  },
  headerSubMenu: {
    type: 'thumb',
    thumb: {
      fontColor: '#fefefe',
      hoverColor: '#1ccacd',
      backgroundColor: '#fefefe',
      thumbExpand: false
    },
    dropdown: {
      fontColor: '#212121',
      hoverColor: '#1ccacd',
      backgroundColor: '#fefefe'
    }
  },
  homeLink: {
    type: 'image',
    name: '<svg class="svg-icon" viewBox="0 0 20 20"><path fill="none" d="M15.971,7.708l-4.763-4.712c-0.644-0.644-1.769-0.642-2.41-0.002L3.99,7.755C3.98,7.764,3.972,7.773,3.962,7.783C3.511,8.179,3.253,8.74,3.253,9.338v6.07c0,1.146,0.932,2.078,2.078,2.078h9.338c1.146,0,2.078-0.932,2.078-2.078v-6.07c0-0.529-0.205-1.037-0.57-1.421C16.129,7.83,16.058,7.758,15.971,7.708z M15.68,15.408c0,0.559-0.453,1.012-1.011,1.012h-4.318c0.04-0.076,0.096-0.143,0.096-0.232v-3.311c0-0.295-0.239-0.533-0.533-0.533c-0.295,0-0.534,0.238-0.534,0.533v3.311c0,0.09,0.057,0.156,0.096,0.232H5.331c-0.557,0-1.01-0.453-1.01-1.012v-6.07c0-0.305,0.141-0.591,0.386-0.787c0.039-0.03,0.073-0.066,0.1-0.104L9.55,3.75c0.242-0.239,0.665-0.24,0.906,0.002l4.786,4.735c0.024,0.033,0.053,0.063,0.084,0.09c0.228,0.196,0.354,0.466,0.354,0.76V15.408z"></path></svg>'
  },
  headerMiniMenu: {
    searchLabel: '검색',
    guestbookLabel: '방명록',
    shareLabel: '공유',
    ownerLabel: '설정',
    writeLabel: '글쓰기',
    loginLabel: '로그인',
    logoutLabel: '로그아웃'
  },
  guestbookTitle: '방명록',
  indexPage: {
    pageType: 'more',
    imageAspectRatio: 'zero',
    badgeType: 'image-and-text',
    badgeCaptionAlign: 'middle',
    badgeExpand: false
  },
  tileGrid: false,
  containerMain : {
    fontColor: '#212121',
    backgroundColor: '#fefefe'
  },
  noticeSlider: false,
  pageTitle: {
    fontColor: '#212121',
    backgroundColor: '#fefefe',
    logo: '<svg class="svg-icon" viewBox="0 0 20 20"><path fill="none" d="M10,2.262c-3.486,0-6.322,2.837-6.322,6.322c0,2.129,1.105,4.126,2.905,5.291l0.009,3.396c0.002,0.168,0.093,0.326,0.24,0.406c0.072,0.041,0.149,0.061,0.228,0.061c0.086,0,0.171-0.023,0.246-0.07l6.338-3.922c0.037-0.021,0.069-0.049,0.098-0.08c1.618-1.193,2.581-3.084,2.581-5.082C16.322,5.099,13.485,2.262,10,2.262z M13.109,12.969c-0.016,0.01-0.03,0.023-0.044,0.037l-5.542,3.426l-0.006-2.594c0.012-0.027,0.023-0.057,0.03-0.086c0.05-0.203-0.041-0.414-0.221-0.52c-1.675-0.963-2.715-2.746-2.715-4.648c0-2.971,2.417-5.387,5.388-5.387c2.971,0,5.387,2.417,5.387,5.387C15.387,10.316,14.536,11.955,13.109,12.969z"></path></svg>',
    backgroundImageDesktop: '',
    backgroundImageLaptop: '',
    backgroundImageTablet: '',
    backgroundImageMobile: '',
    backgroundExpand: true
  },
  fontSize: {
    article: 'default',
    form: 'default'
  },
  firstSidebar: {
    use: true,
    maxWidth: '300',
    marginBetweenArticles: '60',
    titleFontColor: '#212121',
    itemFontColor: '#7f7f7f',
    itemHoverColor: '#1ccacd',
    backgroundColor: '',
    dropdownCategory: false
  },
  secondSidebar: {
    use: true,
    titleFontColor: '#212121',
    itemFontColor: '#212121',
    itemHoverColor: '#1ccacd',
    backgroundColor: '#fefefe',
    dropdownCategory: false
  },
  articleSite: {
    maxWidth: '830',
    shrinkWidth: '',
    comportWidth: '',
    wordBreak: 'break',
    justifyAlign: true,
    backgroundColor: '',
    imageMap: false
  },
  articleEffect: {
    use: true,
    imageShape: 'default',
    captionAlign: 'center'
  },
  articleForceEnlargementImage: false,
  articleGridImage: true,
  responsiveIframe: true,
  previousNextArticle: {
    fixedHeight: '100',
    imageVerticalAlign: 'center'
  },
  relatedArticleEffect: 'default',
  socialConfig: {
    facebook: '',
    twitter: '',
    instagram: '',
    pinterest: '',
    px500: '',
    youtube: '',
    vimeo: ''
  },
  blogDesc: true,
  commentPlugin: 'tistory',
  disqusConfig: {
    name: '',
    url: '',
    identifier: ''
  },
  livereConfig: {
    uid: '',
    refer: ''
  },
  mainSlider: false,
  footer: {
    fontColor: '#777',
    backgroundColor: '#fefefe',
    logo: '<svg class="svg-icon" viewBox="0 0 20 20"><path fill="none" d="M9.999,8.472c-1.314,0-2.385,1.069-2.385,2.384c0,1.317,1.07,2.385,2.385,2.385c1.316,0,2.386-1.068,2.386-2.385C12.385,9.541,11.314,8.472,9.999,8.472z M9.999,12.238c-0.76,0-1.38-0.622-1.38-1.382c0-0.761,0.62-1.38,1.38-1.38c0.761,0,1.38,0.62,1.38,1.38C11.379,11.616,10.76,12.238,9.999,12.238z"></path><path fill="none" d="M15.232,5.375H9.398C9.159,4.366,8.247,3.61,7.174,3.61c-1.073,0-1.985,0.756-2.224,1.765H4.769c-1.246,0-2.259,1.012-2.259,2.257v6.499c0,1.247,1.014,2.259,2.259,2.259h10.464c1.244,0,2.258-1.012,2.258-2.259V7.632C17.49,6.387,16.477,5.375,15.232,5.375z M16.486,14.131c0,0.69-0.564,1.256-1.254,1.256H4.769c-0.692,0-1.256-0.565-1.256-1.256V7.632c0-0.691,0.563-1.254,1.256-1.254H5.39c0.275,0,0.499-0.221,0.502-0.495c0.01-0.7,0.585-1.269,1.282-1.269s1.272,0.569,1.282,1.269c0.003,0.274,0.228,0.495,0.502,0.495h6.275c0.689,0,1.254,0.563,1.254,1.254V14.131z"></path></svg>',
    maker: false
  }
};

$( '#container' ).layout( containerOptions );

설정하기

스킨에서 지원하는 기능을 자바스크립트로 제어하는 방법은 다음과 같습니다. 각각의 설정을 원하는 값으로 변경하면 됩니다. 각 설정에서 지원하는 값은 설정 옵션에 표기해 놓았습니다.

// 글 가로 폭을 730으로 설정, 본문 축소를 630으로 설정, 본문 어울림은 미지정, 줄바꿈을 break로 설정, 글 양쪽 정렬 활성화, 배경색상 미지정, 미니 갤러리를 보임으로 설정
var containerOptions = {
  ...
  articleSite: {
    maxWidth: '730',
    shrinkWidth: '630',
    comportWidth: '',
    wordBreak: 'break',
    justifyAlign: true,
    backgroundColor: '',
    imageMap: true
  },
  ....
};

각각의 옵션 값은 쉼표로 구분됩니다. 따라서 마지막 옵션 값엔 쉼표가 없습니다.

스킨 가이드

about me

notice

categories

counter

설정하기

메뉴

고정 메뉴

서브 메뉴

홈 링크

작은 메뉴

방명록 라벨

인덱스 페이지

타일 그리드

컨테이너 메인

공지사항 슬라이더

페이지 타이틀

폰트 크기

첫 번째 사이드바

두 번째 사이드바

퍼머링크 페이지

글 효과

강제 확대 이미지

그리드 이미지

반응형 동영상

이전다음글

관련 글 효과

소셜

블로그 설명

디스커스(Disqus)

라이브리(Livere)

메인 슬라이더

푸터

웹폰트

설정하기

설정하기

메뉴

메뉴 > 폰트 색상

메뉴 > 호버 색상

메뉴 > 배경 색상

고정 메뉴

고정 메뉴 > 폰트 색상

고정 메뉴 > 호버 색상

고정 메뉴 > 배경 색상

서브 메뉴

서브 메뉴 > 타입

서브 메뉴 > 썸네일 > 폰트 색상

서브 메뉴 > 썸네일 > 호버 색상

서브 메뉴 > 썸네일 > 배경 색상

서브 메뉴 > 썸네일 > 썸네일 확장

서브 메뉴 > 드롭다운 > 폰트 색상

서브 메뉴 > 드롭다운 > 호버 색상

서브 메뉴 > 드롭다운 > 배경 색상

홈 링크

작은 메뉴

방명록 라벨

인덱스 페이지

인덱스 페이지 > 페이징 방식

인덱스 페이지 > 페이징 방식 > 스크롤

인덱스 페이지 > 페이징 방식 > 버튼

인덱스 페이지 > 페이징 방식 > 페이징

인덱스 페이지 > 화면 비율

인덱스 페이지 > 화면 비율 > 원본

인덱스 페이지 > 화면 비율 > 3:2

인덱스 페이지 > 화면 비율 > 4:3

인덱스 페이지 > 화면 비율 > 16:9

인덱스 페이지 > 화면 비율 > 1:1

인덱스 페이지 > 배치 방식

인덱스 페이지 > 배치 방식 > 이미지

인덱스 페이지 > 배치 방식 > 텍스트

인덱스 페이지 > 배치 방식 > 이미지와 텍스트

인덱스 페이지 > 배치 방식 > 박스

인덱스 페이지 > 캡션 정렬

인덱스 페이지 > 배치 확장

타일 그리드

컨테이너 메인

컨테이너 메인 > 폰트 색상

컨테이너 메인 > 배경 색상

공지사항 슬라이더

페이지 타이틀