워드프레스 블로그 만들기(8) - 티스토리 블로그 태그 설정

안녕하세요. 워드프레스 제목인데 뜬금없이 티스토리 설정에 관해 설명하게 되었네요. 워드프레스 블로그를 준비하면서 과정들을 티스토리에 하나씩 업로드하다 보니, 티스토리에 대해서도 유용한 정보를 얻게 되었습니다. 이를 여러분과 공유하고자 합니다. 티스토리 관련 설정 내용은 이 포스트를 통해 지속적으로 업데이트할 예정입니다.

 

목차

1. h태그 

바로 이전 포스팅에서 h태그의 중요성에 대해 언급했는데 연결되는 내용이라 여기서도 다루려고 합니다. 티스토리에서 북스킨이 SEO에 좋다고 알려져 있기 때문에 많이들 사용하실 텐데요. 북스킨을 사용하시면 블로그 제목도 h1 태그로 잡히게 됩니다. 그래서 이 부분을 수정하는 방법에 대해 말씀드리겠습니다. 만약 다른 스킨을 사용하고 계실 경우 구글에서 해당 스킨명과 h1 키워드의 조합으로 검색하시면 해결 방법이 많이 나올 겁니다. 먼저 제 블로그를 예시로 들어 설명하겠습니다. 바로 앞 포스팅에 들어가서 Ctrl키와 U를 누른 화면입니다. 이 키 조합으로 페이지의 소스 코드를 확인할 수 있습니다. 여기서 Ctrl+F를 눌러 h1을 검색하면 아래와 같이 "온라인 사업으로 갓생 살기" 블로그 제목이 h1 태그로 둘러있는 것을 볼 수 있습니다. 

블로그 소스코드 화면

이제 이 부분을 변경하기 위해 블로그 관리 - 꾸미기 - 스킨편집으로 들어갑니다.

티스토리 스킨편집 화면

html 편집을 누르면 아래와 같은 화면이 나오는데 해당 화면에서 Ctrl+F으로 h1으로 검색하면 첫번째 h1으로 둘러싸여 있는 부분을 확인할 수 있습니다. 이제 첫 번째 <h1> 부분을 <div class="blog-header">로 변경하고 </h1>을 </div>로 변경합니다. 변경 후 적용버튼을 클릭하고 CSS 설정으로 들어갑니다.

티스토리 html 편집 화면

HTML과 CSS의 차이는 간단히 말해 문장의 구조와 디자인을 담당한다고 볼 수 있습니다. HTML이 문장을 어떻게 브라우저에 표시할지 지정한다면 CSS는 그 문장의 디자인을 담당하는 언어라고 할 수 있습니다. 

티스토리 CSS 편집 화면

#header h1으로 검색하면 5개의 설정값이 나오는데 이부분을 전부 #header. blog-header로 변경해 주시면 됩니다. h1 태그를 변경하는 방법은 무수히 많지만 저는 유튜브 이카루스 님의 영상을 참고했습니다. 다른 방법을 찾고 싶으시다면, 구글에서 다양한 해결책을 찾아보실 수 있으니 참고해 주세요. 

 

2. 본문 글자 크기 

두번째로, 티스토리의 기본 글꼴 크기는 상대적으로 작아 가독성이 떨어질 수 있습니다. 앞에서 방문했던 스킨편집 메뉴로 들어가서, CSS 탭에서 'entry-content p'를 검색해 주세요. 검색은 Ctrl+F 키 조합으로 할 수 있습니다. 'font-size' 설정이 9.375로 되어 있는데 이를 1.2 정도로 바꿔보겠습니다. '적용'을 클릭한 뒤 변경 된 사항을 확인하신 후, 본인의 취향에 맞게 조절해 주시면 됩니다. 

티스토리 CSS 본문 폰트 크기

앞으로도 중요한 부분이 생기면 계속 업데이트 할 예정입니다.

 

이카루스-애드센스 연구소님 참고 영상 링크