안녕하세요?
이번 포스팅에서는 티스토리 블로그 헤더(header) 부분의 카테고리명 글자 폰트를 설정하는 방법에 대해서 소개해드리겠습니다. 평소 티스토리 블로그를 운영해오시다가 헤더(header) 부분 카테고리명의 글자 크기나 색상을 변경하시고 싶으셨던 분들께 유용한 내용되실 거라 생각합니다. 하나하나 아주 자세하고 쉽게 설명해드려서 초보자분들이라도 그대로만 따라하시면 티스토리 헤더(header) 카테고리명 폰트 설정을 완료하실 수 있도록 해드릴게요.
목차
티스토리 헤더(header) 카테고리명 글자 폰트 크기 설정 방법
티스토리 헤더(header) 카테고리명 글자 폰트 색상 설정 방법
마무리
티스토리 헤더(header) 카테고리명 글자 폰트 크기 설정 방법
1. 티스토리 블로그 홈 화면에서 '관리자' 페이지에 접속해주세요.
2. 좌측 사이드 바의 '꾸미기' 카테고리에서 '스킨 편집' 항목을 클릭해주세요.
3. 좌우로 분할된 화면 영역 중 우측 '스킨 편집' 화면 영역에서 'html 편집' 버튼을 클릭해주세요.
4. 상단 카테고리 중 'CSS' 카테고리를 선택해주세요.
5. '#gnb ul li' 부분을 찾아주세요.
'CSS' 카테고리 화면 위 임의의 한 점을 클릭한 뒤 [Ctrl] 키와 [F] 키를 동시에 누르면 나오는 검색창에 '#gnb ul li' 또는 그 일부 'gnb ul li'을 입력하신 뒤 [Enter] 키를 눌러주세요. 그리고 노란색으로 음영 처리되는 부분을 중심으로 '#gnb ul li' 부분을 찾아주시면 되겠습니다.
6. 'font-size' 부분 내용을 원하시는 글자 폰트 크기로 입력해주세요.
'font-size' 부분은 티스토리 헤더(header) 카테고리명 글자 크기를 의미하며 이 수치가 커질수록 카테고리명 글자 크기가 커지는 것입니다.
ㄱ. 왓에버(Whatever) 스킨 기준으로 '0.875em'으로 설정되어 있지만 'em'이라는 단위는 수치 조절을 함에 있어 수치를 컨트롤하기가 쉽지 않으므로 저의 경우는 'px' 단위를 주로 이용하고 이 포스팅에서도 'px' 단위를 사용하겠습니다.
ㄴ. 'font-size' 부분이 있는 경우는 해당 부분의 내용을 원하시는 글자 크기로 입력해주시면 되겠지만 'font-size' 부분이 없는 스킨을 이용하시는 경우가 있습니다. 그럴 경우에는 '수정 전' 부분의 그림과 같이 '#gnb ul li' 부분에서 '{'과 '}' 사이 임의의 위치에 'font-size:'를 입력하여 'font-size' 부분을 직접 만들어주시면 되겠습니다.
이 포스팅에서는 '20px'로 입력해보겠습니다.
7. 우측 상단의 '적용' 버튼을 누른 뒤 변화된 카테고리명 글자 폰트 크기를 확인해줍니다.
티스토리 헤더(header) 카테고리명 글자 폰트 색상 설정 방법
1. 위에서 언급된 '티스토리 헤더(header) 카테고리명 글자 크기 설정 방법'에서의 1번 단계부터 4번 단계까지 동일하게 진행해주세요.
2. '#gnb ul li a' 부분을 찾아주세요.
위에서 언급했던 대로 검색창을 이용해서 '#gnb ul li a' 부분을 찾아주시면 되고 위에서 다루었던 '#gnb ul li' 부분 바로 아래에 위치해있답니다.
3. 새 창을 열어 '네이버'에서 '색상표'를 검색해주세요.
4. '색상 팔레트'에서 티스토리에서 헤더(header) 부분의 카테고리명 글자 색상으로 설정하고자 하는 컬러의 색상 코드를 복사해주세요..
이 포스팅에서는 '#FFBB00'(주황색)으로 선택해보겠습니다.
5. 2번 단계에서의 인터넷 창으로 다시 돌아와 '#gnb ul li a' 부분에서의 'color' 부분의 내용으로 4번 단계에서 복사한 색상 코드를 붙여 넣어 수정해주세요.
'color' 부분은 티스토리 헤더(header) 카테고리명 글자 폰트 색상을 의미한답니다.
6. 우측 상단의 '적용' 버튼을 누른 뒤 변화된 카테고리명 글자 폰트 색상을 확인해주세요.
마무리
지금까지 티스토리 블로그 헤더(header) 부분의 카테고리명 글자 폰트를 설정하는 방법에 대해서 설명드렸습니다. 티스토리 블로그 헤더(header) 부분의 카테고리명 글자를 설정하고 싶었지만 그 방법을 잘 몰라 난감하셨던 분들에게 많은 도움드릴 수 있는 포스팅이었으면 좋겠습니다. 행복한 하루 보내세요.
관련글
티스토리 왓에버(Whatever) 스킨에 헤더(header) 부분 고정 및 수정하는 방법
티스토리 왓에버(Whatever) 스킨에 헤더(header) 부분 고정 및 수정하는 방법
안녕하세요? 티스토리 왓에버(Whatever) 스킨에서 레이아웃 타입을 좌측 정렬로 하지 않는 이상 카테고리 메뉴가 최상단에 있기 때문에 포스팅을 다 읽고 다른 카테고리로 이동하기 위해서는 다시
rokggu.tistory.com
티스토리 왓에버(Whatever) 헤더(header) 고정 시 태블릿 모바일 출력 문제 해결방법
티스토리 왓에버(Whatever) 헤더(header) 고정 시 태블릿 모바일 출력 문제 해결방법
안녕하세요? 이번 포스팅에서는 티스토리 블로그 왓에버(Whatever) 스킨에서 헤더(header) 부분 고정 시 발생하는 태블릿과 모바일에서의 출력 문제를 해결하는 방법에 대해서 소개해드리겠습니다.
rokggu.tistory.com
티스토리 블로그 글씨체 폰트 종류 변경 방법
안녕하세요? 이 포스팅에서는 티스토리 블로그에서 글씨체 폰트를 변경하는 방법에 대해서 소개해드리려고 해요. 평소 티스토리 블로그를 운영하시면서 글씨체를 변경하기를 원하셨지만 그 방
rokggu.tistory.com
이 포스팅이 도움이 되셨다면 공감 꾹♥
이 포스팅의 모든 내용에 대해 무단 배포 및 2차 가공 생산을 금지합니다.