티스토리 블로그의 스킨을 편집하려고 하면 HTML, CSS 편집을 이용해야 해서 불편하기도 하고 복잡해 보여서 어떤 부분을 건드려야 할지 막막하고 어렵게 느껴지기도 합니다
하지만, 제가 소개해드리는 방법만 따라하면 어떤 스킨이든 원하는 편집이 가능하기 때문에 잘 따라오시길 바랍니다!
▶ F12 버튼 활용하기
F12버튼을 누르면 위와 같은 화면이 나타나게 되는데요
여기서 빨간 동그라미 안의 화살표 버튼을 클릭만 하면 모든 준비가 끝납니다!
화살표 버튼을 클릭하면 우측사진에 보이듯이 파란색으로 바뀌게 되며 페이지의 각종 부분을 스캔할 수 있게 됩니다
이제 본격적으로 스킨을 편집해 보죠!
▶ 블로그 이름의 태그확인 및 편집
먼저 블로그 메인 이름 부분을 편집해 보겠습니다
마우스 커서를 블로그 이름 근처에 가져가면 파란색 네모박스가 생기면서 박스 안의 각종 정보를 확인할 수 있는데요
여기서"a.link_logo"라는 것이 보입니다. 이것이 현재 사용하고 있는 스킨에서의 블로그 제목 부분이기 때문에 스킨편집에 들어가서 이 부분을 수정하기만 하면 되는 것이지요
이제 블로그 설정에 들어가서 "스킨편집" - "html 편집" - "CSS"로 들어가서 편집을 시작하겠습니다
아까 확인했던 블로그 제목 부분을 찾아 야하기 때문에 위에서 확인했던 "a.link_logo"에서 a를 뗀 "link_logo"를 ctrl+f로 찾아주면 되는데요
(제 블로그 스킨은 Odyssey 이기 때문에 스킨마다 태그 이름에서 차이가 있을 수 있습니다)
이렇게 link_logo를 찾아주면 폰트 사이즈와 굵기등을 수정할 수가 있습니다
▶ 블로그 이름의 크기 변경하기
아까 위에서 봤듯이 현재 제 블로그 제목의 font 크기는 32px이며 #33333의 컬러로 적용이 되어있습니다
먼저, 블로그 제목의 "font-size"를 18px로 바꿔보겠습니다
바꾼 후에 적용을 시킨 뒤 다시 블로그 이름에 커서를 가져다 대면 18px로 폰트가 바뀌어져 있으며 크기도 작아진 것을 확인할 수가 있습니다
▶ 블로그 이름 색상 변경
다음은 블로그 이름의 색상을 변경하는 방법인데요
font-size 밑의 "color" 부분에서 색이 칠해져 있는 네모박스에 마우스 커서를 가져다 대면 rgb 색상표가 우측 위에 나타나는데요
이때, 원하는 색상을 "클릭"만 하면 오른쪽과 같이 rgb(148, 39, 39)로 바뀌면서 클릭한 좌표에 해당하는 색상으로 변경을 할 수가 있습니다
그리고 적용된 블로그이름의 color를 확인해 보면 지정했던 색상으로 변경이 되어있는 것을 확인할 수가 있습니다!
▶ 블로그 이름 굵기 변경
마지막으로 블로그 이름의 굵기를 변경해 보겠습니다
"font-weight"의 숫자를 바꿔서 굵기 변경이 가능한데요. 제일 처음에 500으로 설정돼있던 것을 저는 600으로 바꿔서 더 굵게 표현을 해주었습니다
왼쪽이 font-weight : 500 값이며 오른쪽이 font-weight : 600 값인데요
확실히 500보다는 600이 굵어진 것을 확인할 수가 있습니다
(굵기차이를 확인하기 위해 100도 넣어보고 700, 800 넣어봤지만 더 이상 크게 차이는 나지 않았습니다)
위의 방법들을 통해 블로그 제목을 쉽고 빠르게 수정해보시길 바랍니다 :)
2023.03.29 - [티스토리 편집 및 설정] - 티스토리 블로그 스킨 편집하는방법 - 2.블로그 홈 게시글 폰트 사이즈 변경
티스토리 블로그 스킨 편집하는방법 - 2.블로그 홈 게시글 폰트 사이즈 변경
블로그 이름 수정하는 방법에 이어서 이번에는 블로그 홈에서의 게시글의 제목 및 내용의 폰트를 수정하는 방법을 알아보겠습니다 2023.03.29 - [티스토리 편집 및 설정] - 티스토리 블로그 스킨 편
sangulife.tistory.com
2023.03.30 - [티스토리 편집 및 설정] - 티스토리 블로그 스킨 편집하는방법 - 3.본문 자간(글자높이) 수정하기
티스토리 블로그 스킨 편집하는방법 - 3.본문 자간(글자높이) 수정하기
티스토리 블로그를 작성하다 보면 가독성을 위해서 본문의 폰트 및 자간을 수정하고 싶을 때가 많을 것 같은데요. 이번에는 자간(글자 높이)을 수정하는 방법에 대해서 알아보겠습니다 2023.03.29
sangulife.tistory.com
'티스토리 편집 및 설정' 카테고리의 다른 글
| 티스토리 블로그 스킨 편집하는방법 - 2.블로그 홈 게시글 폰트 사이즈 변경 (0) | 2023.03.29 |
|---|---|
| 티스토리 윗첨자와 아랫첨자쓰기 (HTML 편집모드) (4) | 2023.01.10 |
| 티스토리 애드센스 20일만에 승인된 후기 - 애드고시 통과! (1) | 2022.12.29 |