티스토리를 운영하는 목적이 다양하더라도 작성한 글을 찾는 사용자가 없다면 그 의미를 찾기 힘들것입니다.
- 직장인 부수익 만들기 애드센스 티스토리 블로그.
- 부수익 만들기 티스토리 블로그의 시작.
- 티스토리 구글, 네이버, 다음등 검색 플랫폼 노출 방법.
- 티스토리 애드센스 수익 창출을 위한 애드센스 기본 설정 방법.
- 애드센스 승인을 위한 티스토리 글쓰기 방법.
- 티스토리 애드센스 승인 글쓰기 주제.
- 티스토리 애드센스 승인 신청 조건과 시점?
- 티스토리 월별 조회수 많은 글 주제.
- 애드센스 수익금을 지급 받기 위한 PIN넘버.
- 애드센스 광고 용어 CPC, CPM, RPM, 페이지뷰
이전 글에서는 티스토리를 시작하고 애드센스 승인을 받기 위해 도움이 될만한 내용이었다면 앞으로 확인할 내용으로 SEO최적화와 관련하여 살펴보기로 하겠습니다.
Html. CSS와 같은 코드를 수정하는것으로 스킨을 편집할 수 있고 방문자를 유입시키거나 체류시간을 증가 시킬 수 있습니다.
상단 제목 사이즈 수정 방법.
티스토리 상단 제목 Box의 상,하 사이즈폭을 줄여주게 되면 제목과 본문 사이의 공간을 줄여주게 되어 사용자가 페이지에 진입했을때 본문의 내용을 바로 확인할 수 있다는 측면에서 가독성을 높여줄 수 있을것으로 기대해 볼 수 있습니다.
상단 제목Box 사이즈를 줄여주는 방법으로 적용된 스킨은 BookClub(북클럽) 스킨으로 그 외의 스킨에서도 제목Box에 적용된 CSS 클래스만 찾을 수 있다면 쉽게 적용 할 수 있습니다.
상단 제목 서식 편집.
상단 제목 서식을 수정하기 위한 메뉴는 다음과 같습니다.
- 티스토리 관리자 로그인.
- 스킨편집 → Html편집 → CSS 메뉴로 이동.
상단 제목 타이틀 Box 사이즈 수정.
CSS편집창 1041번째줄 또는 찾기 단축키 “CTRL+F”키를 눌러서 “post-cover” 클래스를 검색하면 찾을 수 있습니다.
- 1046번째줄에 있는 post-cover 클래스 속성값 Height 340px → 200px로 수정.
- 200px 이하값으로 수정을 하더라도 최소값은 200px까지만 적용됩니다.
- 만약 상단 제목 Box를 키우고 싶다면 340px값보다 큰값을 입력해 주도록 합니다.
상단 제목 Box 배경색 수정.
BookClub(북클럽) 스킨에서 상단 제목 Box에 적용되어 있는 기본 배경색은 흰색으로 적용되어 있는데 이를 수정하여 제목 가독성을 높이고 싶다면 다음의 CSS 클래스 속성값을 수정하여 변경할 수 있습니다.
- 1052번째줄에서 시작되는 “post-cover:before” CSS 클래스 찾기.
- “post-cover:before” 클래스 속성값 background-color값 수정.
- (0,0,0,0.25) → 0.25 숫자를 낮게 입력할수록 블랙톤으로 진한 색상으로 수정할 수 있습니다.
상단 제목 Box 정렬.
타이틀 Box와 배경색을 수정했다면 제목 서식을 중앙에 정렬하여 제목 가독성을 높일 수 있습니다.
- 1062번째줄 “post-cover .inner” CSS 클래스 찾기.
- post-cover .inner 클래스 1067번째줄 속성값 padding-bottom값 수정.
- 기본값 78px → 40px로 수정.
- padding-bottom값은 수치를 높게 설정하면 제목 Box 상단에 정렬할 수 있고, 낮게 설정할수록 제목 Box 하단에 정렬시킬 수 있습니다.
제목 폰트 두께, 크기 수정.
제목 폰트 두께와 크기를 수정해서 제목 가독성을 높일 수 있습니다.
수정 방법은 post-cover h1 클래스의 속성값을 수정함으로써 원하는 서식으로 수정할 수 있습니다.
제목 폰트 두께 수정.
- 1076번째줄 “post-cover h1” 클래스 찾기.
- 1079번째줄 post-cover h1 클래스 속성값 “font-weight” 수정.
- 기본 설정값보다 높은 숫자 입력시 폰트 두께를 두껍게 할 수 있고, 낮게 입력하면 폰트 두께를 얇게 수정할 수 있습니다.
제목 폰트 크기 수정.
- 1080번째줄 “font-size” 속성값 수정.
- 기본 설정값보다 높게 입력하면 제목 텍스트의 크기가 커지고, 낮게 입력하면 텍스트의 크기를 작게 수정할 수 있습니다.
제목 아래 공백 조정.
- 1081번째줄 “line-height” 속성값 수정.
- 기본 설정값보다 낮게 입력하면 공백을 줄일 수 있고, 높게 입력하면 공백을 늘릴 수 있습니다.
상단 제목 Box와 본문 사이 공백 조정.
- 439번째줄 “#tt-body-page #comtainer” CSS 클래스 속성값 수정.
- 바로 아랫줄 440번째줄 #tt-body-page #comtainer 클래스 속성값 “padding-top” 설정값 수정.
- padding-top 설정값은 180px 미만값으로 수정하더라도 최소적용값은 180px까지만 적용.
- padding-top 설정값을 높게 설정할수록 공백은 커지고 낮게 설정할수록 공백은 좁아집니다.
글 목록에서 제목 길이 짤리는 현상 CSS코드 수정.
- 1171번째줄 “line-height” CSS 클래스 속성값 수정.
- line-height 클래스 “whith-space” 설정값 수정.
- whith-space 기본설정값 “nowrap” → “normal”로 수정.
글을 마무리 하며.
Html 또는 CSS와 같은 코드를 수정하면 무료로 제공하고 있는 스킨이라도 자신의 취향에 따라 웹사이트 스타일을 수정할 수 있습니다.
다만 코드 수정을 하면서 오류가 발생할 경우 웹사이트 스타일이 깨지는경우도 발생할 수 있으며 최악의 상황의 경우 사이트가 열리지 않을수도 있습니다.
따라서 Html, CSS와 같은 코드를 수정할 경우 반듯이 원본 코드를 메모장등을 활용하여 백업을 한 이후에 수정하는것이 안전하게 코드를 수정할 수 있을것입니다.
