8. 스킨 옵션 - 제목

제목 영역은 블로그 제목이나 글 제목, 카테고리 목록과 검색 목록 등의 제목이 노출되는 영역입니다. 메인에는 블로그 제목과 설명이 출력되며 글에는 글 제목과 해당 글의 카테고리 명, 쓴 날짜 그리고 관리 기능이 출력됩니다. 카테고리 목록에서는 해당 카테고리 명이 출력되고 검색 목록에서는 어떤 검색어로 몇 개의 글이 있는지 알려줍니다.

설정하기

제목 관련 기능은 '블로그관리 > 꾸미기 > 스킨 편집'의 스킨 옵션을 통해 쉽게 설정 가능합니다. 제목에서 제공하는 스킨 옵션은 폰트 색상, 배경 색상 설정이 기본적으로 가능하며 제목 영역의 배경 이미지를 지정할 수 있습니다. 뿐만 아니라 배경 이미지를 메뉴 영역까지 확장할 수 있는 기능도 있습니다. 마지막으로 배경 이미지와 어울림을 위해 제목에 그림자 효과도 지원합니다.

폰트 색상

색상표에서 원하는 색상을 선택하거나 혹은 직접 HTML 색상코드를 입력하면 설정한 색상으로 제목 폰트 색상이 변경됩니다. 기본적으로 검정 색을 사용하며 배경 이미지를 선택했을 경우 주로 흰 색을 많이 사용합니다.

배경 색상

색상표에서 원하는 색상을 선택하거나 혹은 직접 HTML 색상코드를 입력하면 설정한 색상으로 제목 배경 색상이 변경됩니다. 배경 이미지를 선택했다면 회색 계열의 색상을 선택하면 좋습니다. 왜냐하면 이미지가 모두 불러오기 전까지 알맞게 해당 영역을 채워주고 있을테니까요.

배경 이미지

그냥 그대로 배경 색상을 지정해 제목을 꾸며도 좋습니다. 다만, 조금 더 다른 연출을 원한다면 배경 이미지를 선택해 남들과 다른 제목을 꾸밀 수 있습니다. 기본적으로 배경 이미지는 말 그대로 제목 영역에만 채워집니다.

배경 이미지 확장

제목에 배경 이미지를 지정후 메뉴 영역까지 지정하고 싶다면 확장을 설정해보세요. 해당 기능은 배경 이미지가 메뉴 영역까지 확장해 상단 모두를 이미지로 채워줍니다. 확장을 설정해도 메뉴가 그대로 노출되고 있다면 아마도 메뉴 배경 색상을 지정해서 그럴 수도 있습니다. 배경 이미지 확장 기능을 선택하면 기본 메뉴의 배경 색상을 투명하게 지정해야 정상적으로 작동합니다.

그림자 효과

배경 이미지가 어두운 톤이면 큰 문제가 없지만 일정 부분이 밝은 부분이 있으면 제목이 잘 드러나지 않을 수 있습니다. 이때 해당 기능을 사용하면 제목 주위에 일정하게 그림자가 출력되어 제목을 잘 볼 수 있도록 도와줍니다.

제목이 정의된 곳

83
84
85
86
87
/* 페이지 타이틀 색상 */
.pagetitle-wrapper{ background-color: [##_var_pagetitle-background-color_##] }
#pagetitle { color: [##_var_pagetitle-font-color_##] }
#pagetitle a, #pagetitle .article-info { color: [##_var_pagetitle-font-color_##] }
#pagetitle .svg-icon path { fill: [##_var_pagetitle-font-color_##] }
cs

탕비수다 이마고 스킨에서 제공하는 스킨 옵션을 이용하면 다양한 효과를 연출할 수 있습니다. 아래 CSS는 제목과 관련된 내용입니다. '블로그관리 > 꾸미기 > 스킨 편집'의 [html 편집]에서 'HTML'에서 확인할 수 있습니다.

이미지 맵

롤랑존

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

    '설명서' 카테고리의 다른 글

    글에 남긴 여러분의 의견은 9개 입니다.

      • pc에서 제목에 배경이미지 높이를 좀 높이고 싶은데요. 어느 부분을 조정해야 하는지요?
        모바일에서는 배경 이미지가 전체 다나오는데, pc에서는 상단부분만 나옵니다.ㅜ.ㅜ

      • CSS에서 페이지 타이틀에 해당하는 padding 값을 변경하면 됩니다.

        구글이나 네이버 등에서 크롬 브라우저의 검사 기능을 한번 검색해보세요. 검사 기능이 익숙해지면 쉽게 원하는 결과를 얻을 수 있습니다.

      • 글 수정하는 사이 답변을 달아주셨네요.
        모바일 화면일때는 올린 사진이 다나오거든요.^^

      • 아 그러시군요. 설명서에 가이드를 좀 추가해야겠어요. 배경이미지는 원본 그대로 사용하면 상단만 보일 수 있습니다.

        예를 들어 4:3 비율 이미지면 그 가운데 원하는 부분만 잘라 따로 저장한 이미지를 배경이미지로 사용하면 좋습니다.

        모바일의 경우는 4:3 화면 비율이 어느 정도 맞아 그렇게 보이고 있거든요.

      • 쫌 어렵네요. 저번처럼 따로 지정하는 곳이 있으면 좋겠네요.
        모바일에 맞추자니 pc에서 안맞고, pc에 맞추자니 모바일에 안맞는 모양새가 되네요.^^

      • 네 동일하게 맞추기에는 힘든 부분이 있어요. 그래서 배경은 대체로 동일한 패턴으로 된 이미지를 추천드려요.

      • 예,감사합니다.
        그냥 옛날 배경으로 돌아왔어요.^^

    *

    *