오늘은 웹용 티스토리 블로그 글 제목 텍스트와 제목 바 공간에 대한 편집에 대하여 자세히 알려드리도록 하겠습니다. 글 제목은 웹에서 보는 것과 모바일에서 보는 것이 다르므로 편집 역시 웹용과 모바일용으로 편집을 해주어야 합니다. 편집을 할 때는 수정을 계속하면서 테스트를 해야 하므로 수정할 때마다 숫자를 메모를 하면서 해야 합니다.
글 제목 바 편집은 <스킨편집> - <html 편집> - <CSS>에서 코드를 편집합니다.
웹용 <CSS> 코드는 맨 처음 나오는 <. post-cover >가 들어간 부분이고
모바일용 <CSS> 코드는 < @media screen ane (max-width:767px) { > 부분입니다.
여기서 행 번호는 다르니 참고하시기 바랍니다.
자. 그럼 시작해 볼까요?
티스토리 블로그 글 제목 배경 카테고리 위치 및 배경색, 글꼴 편집에 대한 내용은
아랫글에서 확인하시기 바랍니다.
글 제목의 텍스트 사이즈, 굵기, 색상 편집하기
제목 부분 : " 글 제목 텍스트 및 제목 바 공간 편집하기 "
글 제목의 텍스트 편집을 위해서는 먼저 티스토리 블로그 로그인 후 관리 메뉴에 들어갑니다. <스킨 편집> - <html 편집> - <CSS>를 클릭하고 텍스트를 수정할 부분을 검색으로 찾습니다. ctrl + f 클릭하고 검색창이 나오면 <. post-cover h1>을 입력하고 Enter를 클릭합니다.
1076번 행 <. post-cover h1> 하단 부분에서 텍스트 사이즈와 굵기, 색상을 편집할 수 있습니다.
폰트 굵기 : <font-weight: 300;>에서 숫자가 있는 부분을 나에게 맞게 수정합니다.
폰트 사이즈 : <font-size: 2.2125em;>에서 숫자를 변경하면서 테스트해 보면 됩니다.
가로 정렬 : <margin: 0 auto;> 숫자가 클수록 왼쪽으로 이동하고 0이면 제목이 현재 위치에 있습니다.
세로 정렬 : <line-height: 1.2352;> 숫자가 클수록 위로 이동하고 작을수록 아래로 내려갑니다.
폰트 색상 : <color: □#fff;>에서 마우스를 코드 위에 올려놓으면 색상표가 나오는데 여기서 원하는 글자색을 클릭하면 됩니다.
제목 바 높이 및 공간 편집하기
티스토리 블로그를 만들고 글을 올리면 글 제목 바의 크기가 너무 커서 글이 잘 보이지 않습니다. 그래서 제목 바 높이를 좀 줄이고 글이 보이는 공간을 늘려보려고 합니다.
글 제목 배경 바 높이 줄이기
1041번 행 <. post-cover> 하단 부분에서 공간 높이를 수정합니다.
높이 조절 : <hight: 340px;>를 <hight: 200px;>로 높이를 줄였습니다.
메타 텍스트 편집 및 글 제목과 메타 텍스트 공간 편집하기
메타 부분 : " by 머니 100 스토리 2023.3.1 "
<CSS> 검색에서 <. post-cover. meta> 입력하고 엔터키 클릭
1088번 행 <. post-cover. meta> 아래에서 폰트 색상과 사이즈, 제목과 메타 텍스트사이 공간을 조절합니다.
높이조절 : <margin: 34px auto 0;> 숫자가 클수록 제목과 메타 텍스트사이 공간이 넓어집니다.
메타 색상 : <color: □ raba(255, 255, 255, 0.6); > 마우스를 올리면 색상표가 나오는데 원하는 색상을 클릭.
메타 a 텍스트 편집하기
메타 a 부분 : " 수정. 삭제 "
1095번 행 <. post-cover. meta a >
텍스트 색상 : <color: □ raba(0,0,0,0.6); 마우스를 올리면 색상표가 나오고 여기서 색상을 선택.
카테고리 편집
카테고리 부분 : " 돈 버는 정보 / 티스토리 블로그 "
1069번 행 <. post-cover. category >
폰트 색상 : <color: □ rgb(0,0,0);>
폰트 사이즈 : <font-size: 1em;>
높이 조절 : <margin: 0 auto 20px;> 숫자가 클수록 카테고리와 제목사이 공간이 넓어집니다.
제목 바 하단 부분 공백 줄이기
1062번 행 <. post-cover. inner>
높이 조절 : <padding-bottom: 78px;>에서 숫자를 20으로 수정하였습니다.
제목 바를 전부 수정 후 완성된 페이지 화면입니다.
오늘 이렇게 웹에서 제목 텍스트 편집과 제목바를 수정하는 방법에 대해 자세하게 알려드렸습니다.
티스토리 블로그를 시작하시면서 어려움을 겪는 분들께 많은 도움이 되었으면 합니다.
모바일용 제목 텍스트 및 제목바 공간 편집에 대한 내용이 궁금하시다면 아래글을 확인해 보세요.
'티스토리블로그 관리' 카테고리의 다른 글
| 티스토리블로그 본문 소제목 편집하기 (0) | 2023.03.02 |
|---|---|
| 모바일용 제목 텍스트 및 제목바 공간 편집하기 (0) | 2023.03.02 |
| 글 제목 바 카테고리 위치 및 배경색, 글꼴 편집하기 (0) | 2023.02.28 |
| 티스토리 블로그 상단 글 제목의 배경 이미지 삭제하는 방법 (1) | 2023.02.28 |
| 구글 서치콘솔 rss 제출 <가져올 수 없음> 완벽해결 (7) | 2023.02.25 |
댓글