아직도 티스토리 블로그 제목 그대로 써요? h1 태그 잘 보이게 하기 - 북클럽 테마 CSS 수정

티스토리 블로그의 제목은 하얀색으로 나타납니다. 그런데, 이것이 배경과 서로 섞여서 잘 보이지 않는 경우가 많습니다.

제목은 블로그의 얼굴인데, 제목이 잘 안 보이면 큰일이죠.. 다른 블로그는 예쁘게 잘 꾸며놨는데 내 블로그만 못생길 수 없잖아요.. 그래서, 오늘은 티스토리 블로그 제목을 잘 보이게 하는 방법에 대해서 알아보도록 하겠습니다.

 

Table Of Contents

• 오늘 알려주는 방법은 다 돼요
• 1. h1 태그가 적용되는 CSS 확인하기
• 2. 북클럽 테마 html 변경하기

오늘 알려주는 방법은 다 돼요

북클럽 테마라고 제목에 적어놓긴 했지만, 이 내용은 티스토리 북클럽 테마뿐 아니라 워드프레스, 구글 블로거, 블로그 스팟, 그리고 일반적인 홈페이지에 모두 적용할 수 있는 방법입니다.

다음의 내용을 하나씩 보시면서 따라하시면 됩니다.

 

1. h1 태그가 적용되는 CSS 확인하기

먼저 티스토리를 비롯한 모든 블로그나 홈페이지에서 특정 태그의 CSS를 변경하기 위해서는 해당 태그가 적용된 것이 어떤 CSS인지 알아야 합니다.

이를 위해서 일반 브라우저(엣지, 크롬, 웨일)에서는 F12를 눌러서 개발자 도구로 들어갈 수 있으며, 오페라 브라우저의 경우에는 CTRL+SHIFT+I를 눌러서 개발자 도구로 들어갈 수 있습니다.

개발자 도구로 들어가면 다음과 같은 화면이 나타나는데, 여기에서 Element 창에서 검색(CTRL-F)를 누르고 제목을 검색하면 내 블로그 페이지의 제목에 해당하는 h1 태그를 찾을 수 있습니다.

 

 

위 이미지에서 가운데 창이 Element 창이고, 이 창에서 Ctrl-f를 눌러서 제목으로 검색을 하였습니다. 검색된 내용이 몇 개 나오는데, 그중 <h1> 태그를 가진 제목을 찾고 이 제목에 마우스를 가져가면 왼쪽 창에서 현재 마우스가 가리키는 h1 태그에 표시가 됩니다.

내가 원하는 위치의 태크인 것을 확인하시면 다음으로는 우측 창에서 이 태그에 적용된 CSS를 확인하실 수 있습니다.

우측 창에는 여러가지 레벨 별 태그가 있는데 이 중 우선순위가 높은 .post-cover .inner > h1의 CSS를 수정합니다. 이 CSS모바일에서 적용되는 CSS입니다. 다음으로, .post-cover h1을 수정하여 PC 화면과 모바일 화면에서 테두리를 넣어줍니다.

 

2. 북클럽 테마 html 변경하기

티스토리의 경우 스킨 변경> html 편집 > CSS로 들어가면 CSS를 편집하실 수 있습니다. 다른 블로그나 홈페이지는 해당 CSS를 수정할 수 있는 관리 페이지나 CSS 파일을 수정하시면 됩니다.

먼저 북클럽 테마의 제목이 짤리는 문제를 제거하기 위해서 다음과 같이

여기에 h1 제목을 잘 보이게 하려면 /*-webkit-line-clamp: 2;*/를 주석 처리합니다.

	.post-cover .inner > h1 {
		display: -webkit-box;
		/*-webkit-line-clamp: 2;*/
		-webkit-box-orient: vertical;
		overflow: hidden;
	}

 

다음으로 제목의 테두리를 만들어주기 위해서 다음의 CSS를 .post-cover h1 CSS에 넣어줍니다.

text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;

티스토리 북클럽 테마의 경우 위의 .post-cover h1 CSS가 두 군데 있습니다. 화면 크기에 따라 달라지는 영역인데, 동일하게 하려면 두 군데 모두 넣어주면 됩니다.

저의 경우에는 글자 크기도 조정하고 몇 가지를 더 해서 아래와 같이 수정하였습니다.

.post-cover h1 {
	max-width: 1080px;
	margin: 0 auto;
	font-weight: 700;
	font-size: 2.125em;
	line-height: 1.2352;
	color: rgb(255, 255, 255);
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
}

 

위의 CSS를 라인별로 설명하면 아래와 같습니다.

 

• .post-cover h1: 이 규칙은 클래스가 "post-cover"이고 하위에 있는 h1 요소를 선택합니다.
• max-width: 1080px;: 선택된 h1 요소의 최대 너비를 1080픽셀로 제한합니다. 이는 텍스트가 너무 넓게 퍼지는 것을 방지합니다.
• margin: 0 auto;: 선택된 h1 요소의 위아래 여백은 0이고 좌우 여백은 자동으로 조정하여 가운데 정렬합니다.
• font-weight: 700;: 텍스트의 글꼴 두께를 700으로 설정합니다. 이는 일반적으로 볼드(bold) 글씨를 나타냅니다.
• font-size: 2.125em;: 텍스트의 크기를 2.125em으로 설정합니다. em은 상대적인 길이 단위로, 부모 요소의 크기에 상대적으로 조절됩니다.
• line-height: 1.2352;: 텍스트의 줄 간격을 1.2352로 설정합니다. 이는 행의 높이를 나타내며, 텍스트 간의 간격을 조절합니다.
• color: rgb(255, 255, 255);: 텍스트의 색상을 흰색으로 설정합니다. RGB 값 (255, 255, 255)는 흰색을 나타냅니다.
• text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;: 텍스트에 그림자 효과를 추가합니다. 텍스트 주위에 4개의 그림자가 각각 왼쪽 위, 오른쪽 위, 왼쪽 아래, 오른쪽 아래 방향으로 표시됩니다. 그림자 색상은 검은색(#000)입니다.

이상으로 티스토리 북클럽 테마의 CSS를 수정하여 제목을 예쁘게 꾸미는 법을 알아보았습니다.

다른 블로그나 홈페이지도 이와 같은 형태로 수정하면 모두 예쁘게 꾸밀 수 있습니다. 다른 사람들은 예쁘게 꾸미는데 나만 못생기게 놔둘 수는 없잖아요~

제목은 블로그의 얼굴이니 잘 꾸며서 보는 사람들이 편하게 볼 수 있도록 해주면 트래픽도 늘어납니다~