블로그 이름 수정하는 방법에 이어서 이번에는 블로그 홈에서의 게시글의 제목 및 내용의 폰트를 수정하는 방법을 알아보겠습니다
2023.03.29 - [티스토리 편집 및 설정] - 티스토리 블로그 스킨 편집하는 방법 - 1. 블로그 제목수정하기
티스토리 블로그 스킨 편집하는방법 - 1.블로그 제목수정하기
티스토리 블로그의 스킨을 편집하려고 하면 HTML, CSS 편집을 이용해야 해서 불편하기도 하고 복잡해 보여서 어떤 부분을 건드려야 할지 막막하고 어렵게 느껴지기도 합니다 하지만, 제가 소개해
sangulife.tistory.com
▶ 편집하고자 하는부분 F12 눌러서 태그 찾기
저번처럼 F12를 클릭하여 블로그 홈의 게시글은 어떤 태그로 되어있는지 먼저 알아보겠습니다
위의 화살표를 클릭한 후 편집을 원하는 블로그 홈의 게시물 제목에 커서를 가져가 보겠습니다
먼저, 게시물 제목부분의 태그는 strong.title 이라고 나오는데요
이제 블로그 설정의 "스킨편집" - "html편집" - "CSS편집"으로 들어가 보겠습니다
근데 웬걸? strong.title이라고 태그가 되어있던 게시글의 제목 부분을 찾으려 했지만 찾을 수가 없었습니다
결론부터 얘기하면 블로그홈에서 F12누른 후 원하는 태그를 찾는 것이 아니라, 블로그 스킨편집을 들어간 상태에서 F12를 누른후 태그를 찾아야 하더라고요
(왜 태그가 다른지는 아직 잘 모르겠습니다..)
▶ 편집하기 위한 진짜 태그 찾기
블로그 스킨편집화면에 들어간 뒤 위와 같이 F12를 누르고 커서 설정을 한 뒤 게시글 제목 부분에 커서를 가져가면 아까랑 다르게 내용까지 파란 박스로 통합되면서 strong.title이란 태그가 아닌 "div.article-content"라는 이름으로 바뀌어져 있는 것을 확인할 수 있습니다
이제 다시CSS편집 부분에서 "article-content" 부분을 검색해 보겠습니다
검색을 해보니 다행히 같은 이름으로 태그가 되어있는 부분이 있네요!
▶ 게시글 제목 폰트 사이즈 변경하기
위에서 확인했듯이 article-content 중 title 부분의 16px을 22px로 높여 보겠습니다
이렇게 font-size의 16px을 22px로 바꿔봅니다
strong.title부분의 16px였던 폰트 부분이 22px로 바뀐 것을 볼 수 있으며 글자 크기 역시 커진 것을 확인할 수 있습니다
▶ 게시글 내용 부분 폰트 사이즈 변경하기
게시글 제목 부분의 폰트사이즈를 변경해 봤으니 내용부분도 사이즈를 변경해 보겠습니다
폰트 부분을 확인해 보니 "p.summary"라고 태그가 나오는데요
이것은 확인결과 article-content의 title바로 밑의 summary란에서 변경을 할 수 있었습니다
위와 같이 article-type- title 바로밑의 article-type- sumaary가 있는데요
이 부분의 font-size를 변경하면 아까처럼 폰트 크기가 달라지겠죠
명확한 비교를 위해서 14px이던 크기를 20px로 늘려 보겠습니다
내용 부분의 폰트가 확실히 커진 것을 확인할 수 있는데 이렇게 폰트크기만 키우니 내용이 중간에 잘려버렸네요. 그렇다면 중간에 잘린 부분을 다시 살려봅시다
▶ 게시글 내용 잘린부분 살리기
느낌상 내용을 나타내는 높이의 크기를 늘려야 할 것 같기 때문에 max-height 부분의 40px을 100px로 늘려보았습니다
max-height부분의 크기를 늘려주니 확실히 잘렸던 부분이 다시 살아났는데요
이처럼 본인이 원하는 폰트 사이즈 및 라인의 높이등을 설정하여 다양하게 스킨을 편집해 보는 것도 좋은 방법인 것 같습니다!
2023.03.30 - [티스토리 편집 및 설정] - 티스토리 블로그 스킨 편집하는방법 - 3.본문 자간(글자높이) 수정하기
티스토리 블로그 스킨 편집하는방법 - 3.본문 자간(글자높이) 수정하기
티스토리 블로그를 작성하다 보면 가독성을 위해서 본문의 폰트 및 자간을 수정하고 싶을 때가 많을 것 같은데요. 이번에는 자간(글자 높이)을 수정하는 방법에 대해서 알아보겠습니다 2023.03.29
sangulife.tistory.com
'티스토리 편집 및 설정' 카테고리의 다른 글
| 티스토리 블로그 스킨 편집하는방법 - 3.본문 자간(글자높이) 수정하기 (0) | 2023.03.30 |
|---|---|
| 티스토리 블로그 스킨 편집하는방법 - 1.블로그 제목수정하기 (6) | 2023.03.29 |
| 티스토리 윗첨자와 아랫첨자쓰기 (HTML 편집모드) (4) | 2023.01.10 |