스킨 가이드

설정하기

스킨에서 지원하는 대부분 기능은 자바스크립트 설정 값을 변경해 제어할 수 있습니다. 해당 설정은 "관리센터 > 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
  },
  ....
};

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

top

메뉴

메뉴는 다른 말로 ‘헤더’ 또는 ‘네비게이션’이라고 합니다. 배경색과 폰트 색상 그리고 마우스를 올렸을 경우 나타나는 색상을 변경할 수 있습니다. 메뉴에는 1차 카테고리가 위치합니다. 1차 카테고리가 많아 해당 영역을 벗어날 경우 숨겨집니다. 1차 카테고리의 최대 가로 폭은 1180px이며 800px부터는 모바일 메뉴로 전환됩니다.

top

메뉴 > 폰트 색상

메뉴에 배경 색상을 설정할 경우 메뉴의 폰트 기본 색상을 변경할 필요가 있습니다. 색상은 #212121와 같은 HTML 색상 코드로 변경 가능합니다.

headerMenu: { fontColor: '#212121' }

top

메뉴 > 호버 색상

메뉴에 마우스를 올렸을 때 나타나는 폰트 색상을 설정할 수 있습니다. 색상은 #1CCACD와 같은 HTML 색상 코드로 변경 가능합니다.

headerMenu: { hoverColor: '#1CCACD' }

top

메뉴 > 배경 색상

메뉴에 배경색을 설정할 수 있습니다. 색상은 #FEFEFE와 같은 HTML 색상 코드로 변경 가능합니다.

headerMenu: { backgroundColor: '#FEFEFE' }

top

고정 메뉴

고정 메뉴는 상단에 위치한 메뉴가 고정된 상태를 의미합니다. 마우스를 스크롤할 때 일정 시점에서 메뉴는 상단에 고정됩니다.

top

고정 메뉴 > 폰트 색상

고정 메뉴에 배경 색상을 설정할 경우 메뉴의 폰트 기본 색상을 변경할 필요가 있습니다. 색상은 #212121와 같은 HTML 색상 코드로 변경 가능합니다.

headerStickyMenu: { fontColor: '#212121' }

top

고정 메뉴 > 호버 색상

고정 메뉴에 마우스를 올렸을 때 나타나는 폰트 색상을 설정할 수 있습니다. 색상은 #1CCACD와 같은 HTML 색상 코드로 변경 가능합니다.

headerStickyMenu: { hoverColor: '#1CCACD' }

top

고정 메뉴 > 배경 색상

고정 메뉴에 배경색을 설정할 수 있습니다. 색상은 #FEFEFE와 같은 HTML 색상 코드로 변경 가능합니다.

headerStickyMenu: { backgroundColor: '#FEFEFE' }

top

서브 메뉴

서브 메뉴는 메뉴에 마우스를 올렸을 경우 나타납니다. 썸네일과 드롭다운 타입을 선택할 수 있습니다.

서브 메뉴 > 타입

thumb 메뉴 가운데 1차 카테고리 해당되는 최근 글이 썸네일 방식으로 출력됩니다. 만약 2차 카테고리가 존재하면, 2차 카테고리의 첫 번째 항목을 썸네일 방식으로 출력합니다. 해당 기능은 JavaScript의 Ajax 통신을 이용합니다. 따라서 많은 메뉴가 있는 경우 로딩 지연의 원인될 수 있습니다. 성능 향상을 위해 모바일에 대응되는 화면에선 작동하지 않습니다. 각 카테고리 첫 항목은 초기에 로딩되지만 나머지 카테고리는 사용자가 1차 카테고리에 마우스를 올릴 때 불러옵니다.

dropdown 탕비수다 초기 버전인 베이직 버전에 보여준 방식과 같습니다. 메뉴에 마우스를 올리면 하위 카테고리가 나타납니다.

headerSubMenu: { type: 'thumb' }

top

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

썸네일 메뉴에 배경 색상을 설정할 경우 썸네일 메뉴의 폰트 기본 색상을 변경할 필요가 있습니다. 폰트 색상은 #FEFEFE와 같은 HTML 색상 코드로 변경 가능합니다.

headerSubMenu: { thumb: { fontColor: '#FEFEFE' } }

top

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

썸네일 메뉴에 마우스를 올렸을 때 나타나는 폰트 색상을 설정할 수 있습니다. 색상은 #1CCACD와 같은 HTML 색상 코드로 변경 가능합니다.

headerSubMenu: { thumb: { hoverColor: '#1CCACD' } }

top

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

썸네일 메뉴에 배경색을 설정할 수 있습니다. 색상은 #181F1C와 같은 HTML 색상 코드로 변경 가능합니다. 더불어 RGBA 색상 코드로 투명도 설정이 가능합니다. RGBA 색상 코드는 HTML 색상 코드를 지원하는 모든 설정에서 사용할 수 있습니다.

headerSubMenu: { thumb: { backgroundColor: 'rgba(24,31,28,0.95)' } }

top

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

썸네일 메뉴는 기본적으로 인덱스 페이지에서는 6-5 모드로 작동하며 퍼머링크 페이지에서는 5-4 모드로 작동합니다. 여기서 모드는 개수를 의미하며 첫 번째 값은 하위 메뉴가 없는 경우에 나타나는 썸네일 개수를 말하며 두 번째 값은 하위 메뉴가 있는 경우에 나타나는 썸네일 개수를 말합니다. 썸네일 확장을 선택하면 퍼머링크 페이지에서도 6-5 모드로 작동합니다.

headerSubMenu: { thumb: { thumbExpand: true } }

top

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

드롭다운 메뉴에 배경 색상을 설정할 경우 드롭다운의 폰트 기본 색상을 변경할 필요가 있습니다. 폰트 색상은 #212121와 같은 HTML 색상 코드로 변경 가능합니다.

headerSubMenu: { dropdown: { fontColor: '#212121' } }

top

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

드롭다운 메뉴에 마우스를 올렸을 때 나타나는 폰트 색상을 설정할 수 있습니다. 색상은 #1CCACD와 같은 HTML 색상 코드로 변경 가능합니다.

headerSubMenu: { dropdown: { hoverColor: '#1CCACD' } }

top

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

드롭다운 메뉴에 배경색을 설정할 수 있습니다. 색상은 #FEFEFE와 같은 HTML 색상 코드로 변경 가능합니다.

headerSubMenu: { dropdown: { backgroundColor: '#FEFEFE' } }

top

홈 링크는 메뉴의 좌측에 홈 링크를 추가하는 기능입니다. 텍스트 방식뿐만 아니라 이미지 방식도 지원합니다. 값을 입력하지 않으면 작동하지 않습니다.

이미지 방식을 선택했다면, ‘관리센터 > 꾸미기 > HTML/CSS > 파일업로드’를 통해 사용할 이미지를 업로드 후 해당 이미지 명을 입력하세요. 이미지 세로 크기는 50px(고정 메뉴에서는 30px)로 강제 조정됩니다. 초기 설정된 아이콘은 svg 포맷을 사용했습니다.

text 텍스트 방식
image 이미지 방식

homeLink: { type: 'image', name: '경로를 제외한 이미지 명' }

top

작은 메뉴

작은 메뉴는 동전의 양면과 같이 구성됩니다. 앞면은 검색, 방명록, 공유와 같은 방문자에 해당하는 기능이 있습니다. 뒷면은 설정, 글쓰기, 로그인와 같은 관리자에 해당하는 기능이 있습니다. 작은 메뉴의 가장 오른쪽에 위치한 아이콘을 통해 앞면과 뒷면으로 이동할 수 있습니다.

headerMiniMenu: { searchLabel: '검색', guestbookLabel: '방명록', shareLabel: '공유', ownerLabel: '설정', writeLabel: '글쓰기', loginLabel: '로그인', logoutLabel: '로그아웃' } 

top

방명록 라벨

방명록 페이지 제목을 다른 이름으로 설정할 수 있습니다.

guestbookTitle: '방명록'

top

인덱스 페이지

인덱스 페이지는 메인 및 결과 페이지를 말합니다. 한번에 불러오는 항목 수는 “관리센터 > 꾸미기 > 화면 설정 > 화면출력 > 블로그 화면”의 기본 화면과 선택 화면의 개수로 조절할 수 있습니다. 기본 화면은 메인 페이지와 연관이 있으며 선택 화면은 결과 페이지와 연관이 있습니다.

top

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

결과를 불러오는 방식 가운데 대표적인 것은 페이징 방식입니다. 그외 스크롤 또는 버튼을 통해 결과를 불러오는 방식을 변경할 수 있습니다.

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

마우스 스크롤을 통해 다음 결과를 불러옵니다.

indexPage: { pageType: 'scroll' }

top

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

더보기 버튼을 통해 다음 결과를 불러옵니다.

indexPage: { pageType: 'more' }

top

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

페이징으로 다음 결과를 불러옵니다.

indexPage: { pageType: 'paging' }

top

인덱스 페이지 > 화면 비율

화면비율은 영상물의 표준 출력 비율을 말합니다. 꽤 많은 화면비율이 있지만, 스킨에서 제공하는 화면비율은 다섯 가지입니다.

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

이미지 비율을 변경없이 나타냅니다.

indexPage: { imageAspectRatio: 'zero' }

top

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

35mm 필름이나 DSLR 사진기가 해당 비율을 지원합니다.

indexPage: { imageAspectRatio: 'three-two' }

top

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

아날로그 화면비율입니다. 와이드 영상이 대세를 이루기 전 주로 사용된 화면비율입니다.

indexPage: { imageAspectRatio: 'four-three' }

top

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

와이드 화면비율입니다. 현재 모니터 및 TV 기본 화면비율입니다.

indexPage: { imageAspectRatio: 'sixteen-nine' }

top

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

중형 필름 카메라에서 사용한 화면비율입니다.

indexPage: { imageAspectRatio: 'one-one' }

top

인덱스 페이지 > 배치 방식

배치 방식은 인덱스 페이지와 연관이 있습니다. 인덱스 페이지는 흔히 메인 화면이나 검색 결과가 나타나는 곳입니다. 다채로운 효과를 위해 탕비수다 이마고 스킨은 인덱스 페이지 및 글에서 Masonry라는 자바스크립트 그리드 레이아웃 라이브러리를 사용하고 있습니다. 인덱스 페이지에는 네 가지 배치 방식을 설정할 수 있습니다.

top

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

이미지가 텍스트보다 앞으로 배치되는 방식입니다. 마우스를 올리면 텍스트가 나타납니다.

indexPage: { badgeType: 'front-image' }

top

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

이미지 위에 텍스트가 배치되는 방식입니다. 이미지는 약간 흐리게 노출되며 마우스를 올리면 텍스트 정보가 사라지고 이미지가 선명하게 나타납니다.

indexPage: { badgeType: 'front-text' }

top

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

이미지 아래에 텍스트가 배치되는 방식입니다. 위 두 방식과는 달리 설명 글도 함께 나타납니다.

indexPage: { badgeType: 'image-and-text' }

top

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

박스 형식으로 배치되는 방식으로 제목, 이미지, 설명 글 순으로 나타납니다.

indexPage: { badgeType: text-on-box' }

top

인덱스 페이지 > 캡션 정렬

인덱스 페이지 배치 방식이 텍스트 우선 배치 방식(font-text)일 때 캡션 정렬을 통해 캡션 위치를 변경할 수 있습니다.

middle 캡션이 중앙에 위치하며 텍스트는 가운데 정렬 방식입니다.
bottom 캡션이 하단에 위치하며 텍스트는 왼쪽 정렬 방식입니다.

indexPage: { badgeCaptionAlign: 'middle' }

top

인덱스 페이지 > 배치 확장

기본적으로 인덱스 페이지의 한 행에 배치되는 수는 세 개입니다. 배치 확장을 설정하면 기본 배치 수에 한 개 더 추가되어 출력됩니다.

indexPage: { badgeExpand: true }

top

타일 그리드

타일 그리드를 설정하면 기존 인덱스 페이지 배치 방식과 다른 모습을 볼 수 있습니다. 해당 기능을 올바르게 사용하기 위해서 화면출력 수를 조정할 필요가 있습니다. ‘관리센터 > 꾸미기 > 화면 설정 > 화면출력 > 블로그 화면’에서 기본 화면과 선택 화면의 수를 8개로 변경해야합니다. 만약, 기존 인덱스 페이지 배치 방식으로 전환하고 싶다면, 인덱스 페이지 타일 그리드 값을 false로 지정하면 됩니다.

타일 그리드는 인덱스 페이지 설정을 상속합니다. 다만, 모든 항목을 상속하지는 않으며 배치 방식 가운데 이미지와 텍스트, 캡션 정렬 설정을 유지합니다. 따라서 타일 그리드를 선택하고 텍스트를 우선적으로 보여주고 싶다면, 배치 방식 가운데 텍스트를 설정하면 원하는 결과를 얻을 수 있습니다.

tileGrid: true

top

컨테이너 메인

컨테이너 메인 영역은 메뉴와 푸터 영역을 제외한 나머지 영역입니다. 컨테이너 메인 영역에 폰트 색상과 배경 색상을 지정할 수 있습니다.

top

컨테이너 메인 > 폰트 색상

컨테이너 메인에 폰트 색상을 설정할 수 있습니다. 폰트 색상은 #212121와 같은 HTML 색상 코드로 변경 가능합니다.

containerMain: { fontColor: '#212121' }

top

컨테이너 메인 > 배경 색상

컨테이너 메인에 배경 색상을 설정할 수 있습니다. 배경 색상은 #FEFEFE와 같은 HTML 색상 코드로 변경 가능합니다.

containerMain: { backgroundColor: '#FEFEFE' }

top

공지사항 슬라이더

텍스트 타입의 공지사항 슬라이더입니다. 공지사항 슬라이더를 활성화하면 메뉴와 페이지 타이틀 영역 사이에 공지사항에 목록이 슬라이더 형식으로 노출됩니다. 해당 기능은 단독으로 작동하지 않으며 첫 번째 사이드바와 두 번째 사이드바에 배치한 공지사항 위젯과 관련이 있습니다. 해당 기능을 사용하기 위해서는 반드시 두 개의 사이드바 가운데 적어도 한 개의 사이드바에 공지사항 위젯을 배치해야합니다. 다만, 사이드바 공개 여부와는 상관없이 작동합니다. 즉, 첫 번째 사이드바에 공지사항 위젯을 배치한 상태에서 첫 번째 사이드바를 사용하지 않더라도 공지사항 슬라이더는 작동이 가능합니다.

noticeSlider: true

top

페이지 타이틀

페이지 타이틀은 제목 영역입니다. 로고 및 제목으로 구성되어 있으며 퍼머링크 페이지일 경우 해당 카테고리와 작성자, 작성일, 댓글 정보가 표시됩니다.

top

페이지 타이틀 > 폰트 색상

페이지 타이틀에 폰트 색상을 설정할 수 있습니다. 폰트 색상은 #212121와 같은 HTML 색상 코드로 변경 가능합니다.

pageTitle: { fontColor: '#212121' }

top

페이지 타이틀 > 로고

‘관리센터 > 꾸미기 > HTML/CSS > 파일업로드’를 통해 사용할 이미지를 업로드 후 해당 (경로를 제외한) 이미지 명을 입력하세요. 로고 크기는 업로드 이미지의 실제 사이즈와 동일합니다.

pageTitle: { logo: '경로를 제외한 이미지 명' }

top

페이지 타이틀 > 배경 이미지

‘관리센터 > 꾸미기 > HTML/CSS > 파일업로드’를 통해 사용할 이미지를 업로드 후 해당 (경로를 제외한) 이미지 명을 입력하세요. 배경 이미지는 총 4개의 스크린 크기에 맞는 배경 이미지를 설정할 수 있습니다. 각 스크린의 크기는 물리적 기기의 스크린 크기로 판별됩니다. 따라서 데스크탑에서 브라우저를 임의로 변경해 각 스크린 배경 이미지를 확인할 수 없습니다.

값을 입력하지 않으면 해당 크기에서는 작동하지 않습니다. 같은 이미지를 모든 크기에 사용하려면 같은 이미지 명을 모든 크기에 입력하세요.

페이지 타이틀 > 배경 이미지 > 데스크탑

해상도가 1440px 이상인 데스크탑 크기에 적용할 배경 이미지를 입력하세요. 입력한 이미지 명이 없으면 데스크탑 크기에서는 작동하지 않습니다.

pageTitle: { backgroundImageDesktop: '경로를 제외한 이미지 명' }

top

페이지 타이틀 > 배경 이미지 > 랩탑

해상도가 768px 이상이며 1440px 이하인 랩탑 크기에 적용할 배경 이미지를 입력하세요. 입력한 이미지 명이 없으면 랩탑 크기에서는 작동하지 않습니다.

pageTitle: { backgroundImageLaptop: '경로를 제외한 이미지 명' }

top

페이지 타이틀 > 배경 이미지 > 타블렛

해상도가 425px 이상이며 768px 이하인 타블렛 크기에 적용할 배경 이미지를 입력하세요. 입력한 이미지 명이 없으면 타블렛 크기에서는 작동하지 않습니다.

pageTitle: { backgroundImageTablet: '경로를 제외한 이미지 명' }

top

페이지 타이틀 > 배경 이미지 > 모바일

해상도가 425px 이하인 모바일 크기에 적용할 배경 이미지를 입력하세요. 입력한 이미지 명이 없으면 모바일 크기에서는 작동하지 않습니다.

pageTitle: { backgroundImageMobile: '경로를 제외한 이미지 명' }

top

페이지 타이틀 > 배경 이미지 확장

기본적으로 적용되는 페이지 타이틀 배경 이미지 영역을 넘어 메뉴까지 배경 이미지를 설정할 수 있습니다.

pageTitle: { backgroundExpand: true }

top

폰트 크기

퍼머링크 페이지 본문과 댓글 입력 폼의 폰트 크기를 선택할 수 있습니다. 기본적으로 14px로 지정되어 있지만, 선택에 따라 작게 혹은 큰 폰트로 노출할 수 있습니다.

top

폰트 크기 > 글

퍼머링크 페이지 본문의 폰트 크기를 선택할 수 있습니다.

small 기본 크기보다 조금 작은 크기입니다.
default 기본 크기입니다.
large 기본 크기보다 조금 큰 크기입니다.

fontSize: { article: 'default' }

top

폰트 크기 > 댓글폼

댓글 입력 폼의 폰트 크기를 선택할 수 있습니다.

default 기본 크기입니다.
large 기본 크기보다 조금 큰 크기입니다.

fontSize: { form: 'default' }

top

첫 번째 사이드바

‘관리센터 > 꾸미기 > 사이드바 > 사이드바 1’에 입력된 정보를 출력합니다. 블로그 정보, 최근에 달린 댓글, 글 보관함, 링크, 태그 크라우드, 방문자 수가 기본으로 설정되어 있습니다. 사이드바 위젯 관련해서 “사이드바에 사용자 위젯 추가하기” 글을 살펴보면 좋습니다.

top

첫 번째 사이드바 > 사용여부

사용여부를 설정할 수 있습니다. true로 지정하면 사이드바 모드로 작동하며 false로 지정하면 한 페이지 모드로 작동합니다.

firstSidebar: { use: true }

top

첫 번째 사이드바 > 가로 폭

가로 폭을 설정할 수 있습니다. 퍼머링크 페이지의 글 가로 폭과는 달리 사이드바는 고정 폭입니다. 사이드바 모드에서는 퍼머링크 페이지 글 가로 폭과 첫 번째 사이드바 가로 폭을 합산 후 글 사이 간격을 더한 값보다 화면 크기가 작을 경우 첫 번째 사이드바는 숨김 상태로 설정됩니다. 쉽게 말하면 눈으로 보는 가로 폭보다 브라우저가 작아질 경우 우선적으로 첫 번째 사이드바는 사라집니다.

firstSidebar: { maxWidth: '300' }

top

첫 번째 사이드바 > 글 사이 간격

퍼머링크 페이지의 글과 첫 번째 사이드바 사이의 간격을 설정할 수 있습니다.

firstSidebar: { marginBetweenArticles: '60' }

top

첫 번째 사이드바 > 위젯 제목 폰트 색상

첫 번째 사이드바에 배경 색상을 설정할 경우 위젯 제목의 기본 폰트 색상을 변경할 필요가 있습니다. 색상은 #212121와 같은 HTML 색상 코드로 변경 가능합니다.

firstSidebar: { titleFontColor: '#212121' }

top

첫 번째 사이드바 > 위젯 항목 폰트 색상

첫 번째 사이드바에 배경 색상을 설정할 경우 위젯 항목의 기본 폰트 색상을 변경할 필요가 있습니다. 색상은 #7F7F7F와 같은 HTML 색상 코드로 변경 가능합니다.

firstSidebar: { itemFontColor: '#7F7F7F' }

top

첫 번째 사이드바 > 위젯 항목 호버 색상

위젯 항목에 마우스를 올렸을 때 나타나는 폰트 색상을 설정할 수 있습니다. 색상은 #1CCACD와 같은 HTML 색상 코드로 변경 가능합니다.

firstSidebar: { itemHoverColor: '#1CCACD' }

top

첫 번째 사이드바 > 배경 색상

첫 번째 사이드바에 배경색을 설정할 수 있습니다. 색상은 #FEFEFE와 같은 HTML 색상 코드로 변경 가능합니다.

firstSidebar: { backgroundColor: '#FEFEFE' }

top

첫 번째 사이드바 > 드롭다운 카테고리

하위 메뉴가 많은 경우 드롭다운 카테고리를 활성화하면 하위 메뉴가 숨김 상태가 됩니다. 상위 메뉴 우측에 위치한 펼침/닫음 아이콘으로 하위 메뉴 제어가 가능합니다.

firstSidebar: { dropdownCategory: true }

top

두 번째 사이드바

‘관리센터 > 꾸미기 > 사이드바 > 사이드바 2’에 입력된 정보를 출력합니다. 공지사항, 최근에 올라온 글, 카테고리, 블로그 메뉴가 기본으로 설정되어 있습니다. 푸터 위에 노출되며 모바일 기기에서도 노출됩니다. 사이드바 위젯 관련해서 “사이드바에 사용자 위젯 추가하기” 글을 살펴보면 좋습니다.

top

두 번째 사이드바 > 사용여부

사용여부를 설정할 수 있습니다. true로 지정하면 푸터 위에 노출됩니다. false로 지정하면 노출되지 않습니다.

secondSidebar: { use: true }

top

두 번째 사이드바 > 위젯 제목 폰트 색상

두 번째 사이드바에 배경 색상을 설정할 경우 위젯 제목의 기본 폰트 색상을 변경할 필요가 있습니다. 색상은 #FEFEFE와 같은 HTML 색상 코드로 변경 가능합니다.

secondSidebar: { titleFontColor: '#FEFEFE' }

top

두 번째 사이드바 > 위젯 항목 폰트 색상

두 번째 사이드바에 배경 색상을 설정할 경우 위젯 항목의 기본 폰트 색상을 변경할 필요가 있습니다. 색상은 #F8F8F8와 같은 HTML 색상 코드로 변경 가능합니다.

secondSidebar: { itemFontColor: '#F8F8F8' }

top

두 번째 사이드바 > 위젯 항목 호버 색상

위젯 항목에 마우스를 올렸을 때 나타나는 폰트 색상을 설정할 수 있습니다. 색상은 #1CCACD와 같은 HTML 색상 코드로 변경 가능합니다.

secondSidebar: { itemHoverColor: '#1CCACD' }

top

두 번째 사이드바 > 배경 색상

두 번째 사이드바에 배경색을 설정할 수 있습니다. 색상은 #FA8072와 같은 HTML 색상 코드로 변경 가능합니다.

secondSidebar: { backgroundColor: '#FA8072' }

top

두 번째 사이드바 > 드롭다운 카테고리

하위 메뉴가 많은 경우 드롭다운 카테고리를 활성화하면 하위 메뉴가 숨김 상태가 됩니다. 상위 메뉴 우측에 위치한 펼침/닫음 아이콘으로 하위 메뉴 제어가 가능합니다.

secondSidebar: { dropdownCategory: true }

top

글 가로 폭을 너무 크게 설정할 경우 의도하지 않은 깨짐 현상이 발생할 수 있습니다. 아래 설명을 참고해 적정한 크기로 설정하세요.

top

퍼머링크 페이지 > 글 가로 폭

기본적으로 사이드바 모드의 글 가로 폭은 730px입니다. 한 페이지 모드에서는 830px을 권장합니다. 만약 글 가로 폭을 변경했다면 ‘관리센터 > 글 관리 > 글 설정’에서 글쓰기 가로 폭을 같이 변경해야겠지요. 물론, 글쓰기 가로 폭은 변경하지 않아도 됩니다. 다만, 이미지를 첨부할 경우 기본 가로 폭은 글쓰기 가로 폭을 참조하니 변경된 본문 너비로 맞추면 좋습니다. 한 페이지 모드에서 글 가로 폭 최대 너비는 1500px입니다. 사이드바 모드에서는 글 가로 폭과 사이드바 폭을 합산 후 글 사이 간격을 더한 값이 1500px보다 크면 오동작할 수 있습니다.

articleSite: { maxWidth: '730' }

top

퍼머링크 페이지 > 본문 축소

본문 축소는 글 가로 폭을 기준으로 그보다 작은 내용을 입력할 때 효과적입니다. 즉 넓은 글 가로 폭에 이미지를 입력 후 글을 그대로 출력하면 레이아웃이 맞지 않아 애를 먹습니다. 간단한 해결 방법은 글을 중앙 정렬해 보여주는 방식입니다. 그러나 글이 길 경우 임의로 줄 바꿈을 통해 글을 작성해야 하는 어려움이 있습니다. 이럴 경우 본문 축소를 설정하면 쉽게 원하는 결과를 얻을 수 있습니다.

articleSite: { shrinkWidth: '600' }

본문 축소와 별도로 이미지, 반응형 동영상은 글 가로 폭과 동일하게 보입니다. 큰 이미지를 사용하지 않아도 글 내용이 작아지므로 상대적으로 이미지가 크게 보이는 효과가 있습니다. 예전 데스크탑 넓은 이미지 효과를 대체하는 기능입니다. 만약 본문 축소 기능을 사용할 경우 티스토리에서 제공하는 플러그인 형태의 구글 애드센스(반응형)는 본문 축소 너비에 대응합니다. 따라서 글 가로 폭과 같은 크기로 구글 애드센스를 출력하려면 플러그인 대신 직접 HTML에 입력해야 가능합니다.

<div class="tt_adsense_top">
구글 애드센스 코드
</div>

<div class="article-desc-wrap limit">
  <div class="article-desc">
    [##_article_rep_desc_##]
  </div>
</div>

<div class="tt_adsense_bottom">
구글 애드센스 코드
</div>

주의해야 할 점은 본문 축소를 사용할 경우 이미지는 강제 중앙 정렬됩니다. 이는 본문 축소가 이미지의 크기를 본문보다 강제로 크게 확대하기 때문에 발생하는 현상입니다.

top

퍼머링크 페이지 > 본문 어울림

보통 사용할 일은 없으나 본문 축소를 설정하면 이전다음글, 관련 글, 댓글 등 기타 부수적인 영역이 글 가로 폭과 동일해져 전체적으로 어울리지 않을 수 있습니다. 이때 본문 어울림을 설정하면 본문 크기와 동일하게 부수적인 영역의 가로 폭이 변경됩니다.

articleSite: { comportWidth: '600' }

top

퍼머링크 페이지 > 글 줄바꿈

글 줄바꿈 옵션은 break와 keep을 선택할 수 있습니다. 보통 break를 많이 사용하며 keep은 단어를 최대한 유지하며 줄바꿈하는 옵션입니다.

break 너비를 유지하며 줄바꿈을 합니다.
keep 단어를 유지하며 줄바꿈을 합니다.

articleSite: { wordBreak: 'break' }

top

퍼머링크 페이지 > 글 양쪽 정렬

본문 내용이 일정하게 유지됩니다. 단, 사용자가 일부 단락에 왼쪽 혹은 오른쪽 정렬을 지정한 경우, 사용자 정의가 우선됩니다.

articleSite: { justifyAlign: true }

top

퍼머링크 페이지 > 배경 색상

퍼머링크 페이지의 배경색을 설정할 수 있습니다. 색상은 #FEFEFE와 같은 HTML 색상 코드로 변경 가능합니다.

articleSite: { backgroundColor: '#FEFEFE' }

top

퍼머링크 페이지 > 이미지 맵

본문에서 사용된 이미지를 한 곳에 모아 볼 수 있는 기능입니다. 이미지 맵에서 이미지를 클릭하면 본문 내 해당 이미지 위치로 이동합니다. 본문에서 이미지를 클릭하면 이미지 맵으로 다시 돌아옵니다.

이미지 맵이 궁금하다면 “이미지 맵에 대해서” 글을 살펴보세요.

articleSite: { imageMap: true }

top

글 효과

use effect 활성화 옵션입니다.
imageShape 글에 첨부된 사진 테두리 옵션입니다. 선택 옵션에 따라 이미지 테두리가 달라집니다. default은 각진 형태, round는 둥근 형태입니다.
captionAlign 글에 첨부된 사진 자막 정렬 옵션입니다. 선택 옵션에 따라 텍스트가 정렬됩니다. left는 왼쪽 정렬, center는 가운데 정렬, right는 오른쪽 정렬입니다.

articleEffect: { use: true, imageShape: 'round', captionAlign: 'center' }

top

강제 확대 이미지

글쓰기에서 이미지를 사용할 경우 이미지에는 너비와 높이에 해당되는 값이 자동으로 입력됩니다. 이때 기준이 되는 너비는 ‘관리센터 > 글 관리 > 글 설정’에서 글쓰기 가로 폭에 설정한 값입니다. 여러 경우가 있지만 대개 글쓰기 가로 폭이 600이라면 이미지도 600의 너비로 설정됩니다. 이런 상태에서 블로그 글 너비를 700으로 변경할 경우 이미지는 그대로 600으로 노출됩니다

강제 확대 이미지를 설정하면 600으로 설정된 이미지가 강제로 700으로 노출됩니다. 물론, 실제 이미지가 600이라면 700으로 강제 확대되기 때문에 이미지 깨짐 현상이 발생합니다. 해당 기능은 첨부된 이미지가 글 가로 폭, 그러니까 700과 같거나 클 경우에만 사용해야 제대로 작동합니다.

사진을 첨부하는 방법이 궁금하다면 “와이드, 그리드 이미지에 대해서” 글을 살펴보세요.

articleForceEnlargementImage: true

top

그리드 이미지

이미지를 정렬할 때 ‘글쓰기 > 파일보관함’ 아래에 있는 ‘선택한 파일을 글의 중앙에 정렬’을 사용하면 해당 기능이 적용됩니다. 가로 사진에서는 큰 효과를 보기 어렵지만, 세로 사진도 함께 정렬된 경우 다양한 배치를 할 수 있습니다. “와이드, 그리드 이미지에 대해서” 글을 살펴보면 좋습니다.

articleGridImage: true

grid-image 효과는 아래와 같은 구조로 되어 있을 경우에만 적용할 수 있습니다. 즉, ‘table > tbody > tr > td  > span.imageblock’와 같이 table 아래 순차적으로 tbody, tr, td 그리고 imageblock 정의를 갖는 span 태그가 존재해야합니다. 그렇지 않은 경우, grid-image 효과는 작동하지 않습니다. 아래 구조는 브라우저에서 소스보기를 통해 확인할 수 있습니다.

<p style="text-align: center;">
  <table cellspacing="5" cellpadding="0" border="0" align="center">
    <tbody>
      <tr>
        <td>
          <span class="imageblock" style="display:inline-block;width:415px;height:auto;max-width:100%">
            <span data-url="http://cfile2.uf.tistory.com/attach/226CF43A57391BB524D148" data-lightbox="lightbox">
              <img src="http://cfile2.uf.tistory.com/image/226CF43A57391BB524D148" style="cursor: pointer;max-width:100%;height:auto" width="415" height="276" filename="hot-air-1373167_1280.jpg" filemime="image/jpeg" />
            </span>
          </span>
        </td>
        <td>
          <span class="imageblock" style="display:inline-block;width:415px;height:auto;max-width:100%">
            <span data-url="http://cfile28.uf.tistory.com/attach/211B8C395739380B0A7FBB" data-lightbox="lightbox">
              <img src="http://cfile28.uf.tistory.com/image/211B8C395739380B0A7FBB" style="cursor: pointer;max-width:100%;height:auto" width="415" height="622" filename="muslima-1331992_1280.jpg" filemime="image/jpeg" />
            </span>
          </span>
        </td>
      </tr>
    </tbody>
  </table>
</p>

top

반응형 동영상

본문에 삽입된 동영상의 경우 본문 너비에 따라 자동 확대 또는 축소되고 있습니다. 그러나 반응형에 대응하지 못하는 서비스도 있기 때문에 모든 서비스보다 몇몇 서비스만 해당 기능을 지원하고 있습니다. 현재 지원되는 서비스는 유튜브와 비메오 그리고 다음 tv팟입니다.

responsiveIframe: true

top

이전다음글

이전다음글은 퍼머링크 페이지에 노출됩니다. 티스토리에서 정식으로 지원하는 기능은 아니며 스킨에서 JavaScript의 Ajax 통신으로 제공하는 기능입니다.

top

이전다음글 > 고정 높이

이전다음글의 높이를 고정할 수 있습니다.

previousNextArticle: { fixedHeight: '100' }

top

이전다음글 > 이미지 수직 정렬

이전다음글에서 사용하는 이미지는 퍼머링크 페이지의 대표이미지이며 배경 이미지로 처리됩니다. 이미지 비율에 따라 이전다음글 높이가 설정되지 않기 때문에 이미지 수직 정렬 기능을 통해 상황에 맞게 정렬할 수 있습니다. top 정렬은 이미지 위를 기준으로 이미지를 정렬합니다. center 정렬은 이미지 가운데를 기준으로 이미지를 정렬합니다. bottom 정렬은 이미지 아래 기준으로 이미지를 정렬합니다.

previousNextArticle: { imageVerticalAlign: 'center' }

top

관련 글 효과

글 아래에 나타나는 ‘다른 글’의 썸네일 테두리 옵션입니다. 선택 옵션에 따라 이미지 테두리가 달라집니다.

default 각진 형태이며 edge 한쪽 모서리에 라벨이 표시됩니다.

relatedArticleEffect: 'default'

top

소셜

소셜 미디어 계정 명을 입력하면 페이지 아래에 관련 아이콘이 출력됩니다. 모두 빈 값일 경우 소셜 영역은 노출되지 않습니다.

socialConfig: { facebook: '페이스북계정', twitter: '트위터계정', instagram: '인스타그램계정', pinterest: '핀터레스트계정', px500: '500px계정', youtube: '유튜브계정', vimeo: '비메오계정' }

top

블로그 설명

관리센터에 입력한 블로그 설명을 출력합니다.

blogDesc: true

top

디스커스(Disqus)

본인이 개설한 디스커스 서비스 단축명(shortname)을 입력 후 commentPlugin 값을 'disqus'로 설정하면 페이지 아래에 디스커스 소셜 댓글이 출력됩니다. 디스커스의 page.url과 page.identifier 값은 글의 캐노니컬(canonical) 값으로 설정됩니다.

commentPlugin: 'disqus',
disqusConfig: { name: 'shortname', url: '', identifier: '' }

top

라이브리(Livere)

본인이 개설한 라이브리 서비스 아이디(uid)를 입력 후 commentPlugin 값을 'livere'로 설정하면 페이지 아래에 라이브리 소셜 댓글이 출력됩니다. 라이브리의 refer 값은 글의 캐노니컬(canonical) 값으로 설정됩니다.

commentPlugin: 'livere',
livereConfig: { uid: 'data-uid', refer: '' }

top

메인 슬라이더

메인 슬라이더는 첫 화면에 보여집니다. 여기서 메인과 첫 화면은 동일한 의미입니다. 주요 컨텐츠는 각 카테고리의 최근 글입니다. 다만, 서브 메뉴의 방식에 따라 약간의 차이가 있습니다. 즉 썸네일 방식일 경우 1차 카테고리를 우선 노출하지만 2차 카테고리가 있을 경우 하위 메뉴의 첫 번째 카테고리를 우선적으로 노출합니다. 드롭다운 방식을 선택한 경우에는 1차 카테고리를 기준으로 노출됩니다.

mainSlider: true

top

푸터는 로고, 소셜 아이콘, 블로그 저작권 그리고 제작자 정보가 표시되는 영역입니다.

top

푸터 > 폰트 색상

푸터에 배경 색상을 설정할 경우 폰트 기본 색상을 변경할 필요가 있습니다. 폰트 색상은 #777777와 같은 HTML 색상 코드로 변경 가능합니다.

footer: { fontColor: '#777777' }

top

푸터 > 배경 색상

푸터에 배경색을 설정할 수 있습니다. 색상은 #F8F8F8와 같은 HTML 색상 코드로 변경 가능합니다.

footer: { backgroundColor: '#F8F8F8' }

top

푸터 > 로고

‘관리센터 > 꾸미기 > HTML/CSS > 파일업로드’를 통해 사용할 이미지를 업로드 후 해당 (경로를 제외한) 이미지 명을 입력하세요. 로고 크기는 업로드 이미지의 실제 사이즈와 동일합니다.

footer: { logo: '경로를 제외한 이미지 명' }

top

푸터 > 제작자 표기

제작자 표기 노출을 결정할 수 있습니다. true는 제작자 표기가 보이며 false는 제작자 표기가 숨겨집니다. 자세한 이야기는 “제작자 표기 삭제에 대한 제작자의 입장”을 살펴보세요.

footer: { maker: true }

top

웹폰트

웹폰트는 Google WebFont Loader로 작동합니다. 웹폰트 변경 방법은 HEAD 태그에 있는 Google WebFont 정의 가운데 사용자 정의 웹폰트 파일명을 변경하면 쉽게 적용됩니다. “웹폰트에 대해서” 글과 “맑은 고딕, 애플 SD 산돌고딕 Neo 폰트 사용 방법” 글을 살펴보면 좋습니다.

urls: [ './images/tangbisuda.font.notosanskr.daum.css' ]

top


신고

롤랑존

이미지를 활용해 다양한 기능을 제공하는 티스토리 반응형 스킨

    이미지 맵

    문서 다른 글

    댓글 27

      • 비밀댓글입니다

      • 모바일로 답변을 드려 상세히 안내를 못 했습니다. 해당 기능으로 유사한 효과를 얻을 수 있지만 조금 까다로운 설정입니다.

        고맙습니다.
        롤랑존 드림.

      • 비밀댓글입니다

      • 안녕하세요.

        음, 문의서비스에 대해 뭔가 오해가 있는 것 같습니다. 문의서비스의 범위는 스킨이 제공하는 기능입니다.

        탕비수다 이마고 스킨은 애드센스를 제공하지 않습니다. 플러그인 기능은 티스토리에서 제공하는 기능입니다. 해당 기능을 사용해 애드센스가 노출되는 것이지 스킨의 어떤 기능이 애드센스을 제공하는 것은 아닙니다.

        급한 마음은 잘 알겠는데요. 티스토리 고객센터에 문의할 일을 제가 문의하시면 답변을 드리기 힘듭니다.

        어쨌든 플러그인으로 뭔가 하신 것 같은데요. 일단 그 작업을 모두 취소하고 반응형만 남겨 놓으시면 될 것 같습니다.

        더불어 제가 알기로는 애드센스는 한 화면에서 광고 수 제한이 있는 것으로 아는데요. 3개로 기억하는데, 아닌지요?

      • 비밀댓글입니다

      • 플러그인을 모두 제거하셨다면 남은 것은 html인데요. 그것도 아니라면 마지막 방법은 소스보기를 통해 해당 애드센스 코드를 찾는 방법입니다.

        아무것도 하지 않았는데 갑자기 나타났다면 제 블로그에도 애드센스가 노출되어야 하는데 그렇지 않아 드리는 말씀입니다.

      • 비밀댓글입니다

      • head 태그에 보면 아래 스크립트 설정이 있는데요. 이건 어떤 역활을 하는 것인지요?

        <script src="https://pagead2.googlesyndication.com/pub-config/r20160913/ca-pub-6392116489647504.js"></script>

        <script src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js" async=""></script>

        혹시 html에 관련 스크립트가 있다면 일단 삭제해보세요. 저도 저 스크립트가 어떤 기능을 하는지 잘 모르겠습니다.

      • 비밀댓글입니다

      • 잋단 지워보세요. 뭔가 작업을 해ㅛ기 때문에 하단에 광고가 노출되고 있습니다.

      • <script>
        (adsbygoogle = window.adsbygoogle || []).push({
        google_ad_client: "ca-pub-6392116489647504",
        enable_page_level_ads: true
        });
        </script>

        페이지 레벨 광고같은데요. 어떤 기능을 하는지 잘 모르겠지만 이것 때문은 아닌지요?

        관리자 외에 소스보기를 할 수 없기 때문에 전 파싱된 결과만 볼 수 있습니다. 직접 소스보기를 통해 확인해보세요.

      • 비밀댓글입니다

      • 누차 말씀드리지만 자동으로 뭔가 노출된다면 티스토리 코어가 변경되어 전체 사용자에게 적용되거나 또는 어떤 코드를 입력해 노출되는 경우뿐입니다.

        제가 보기에는 pagead 스크립트로 광고가 노출되는 것 같습니다. 관련해서 한번 검색해보세요.

      • 비밀댓글입니다

      • 그렇지 않습니다. 스킨에서 제공하는 설정은 입력 후 데이터를 가공하는 옵션이지 입력 자치에 영향을 줄 수 없습니다.

        false로 지정하면 아무런 변화가 없습니다.

      • 비밀댓글입니다

      • 안녕하세요.

        업데이트를 하면서 해당 기능이 변경되었습니다. 정식 지원되는 기능은 아니지만 아래 정의를 CSS에서 찾아 해당 값을 100%으로 변경하면 적용될 것 같습니다. 다만, 정상적으로 작동되는지는 확인하지 못 했습니다.

        853 라인 :
        .search-thumbs-wrap .grid-item, .search-thumbs-wrap .grid-size

        고맙습니다.
        롤랑존 드림.

      • 비밀댓글입니다

      • 안녕하세요.

        CSS 정의 가운데 아래 정의를 찾아 알맞은 값으로 변경하면 됩니다.

        .search-thumbs-wrap .grid-item .item-content-image:before {
        ...
        background: rgba(0, 206, 209, .8);
        ...
        }

        고맙습니다.
        롤랑존 드림

    *

    *

    이전 글

    다음 글

    티스토리 툴바