html css 수정하여 티스토리 북클럽 스킨을 보기 좋은 화면으로 형태를 변경할 수 있다. 본문 제목 배경에 대표 이미지가 겹쳐져 보이지 않도록 하고, 블로그 타이틀과 글 제목과의 간격(높이) 등을 본인의 취향대로 조정할 수 있다.
css html 수정으로 스킨 변경
티스토리 초기(디폴트) 스킨에서 '스킨편집-html 편집' 클릭하여 'css' 탭을 눌러서 css 편집 화면으로 들어간다. 'html' 탭을 누르면 html 편집 화면으로 들어간다.
포스트 커버를 본문 콘텐츠 폭과 같게 좁히기 css 수정
css 편집화면으로 들어가서 초기 원본 css 스크립트 기준으로 #tt-body-page. post-cover { 다음 줄인 대략 446 라인 부분을 'absolute'에서 'relative'로 수정한다. 포스트 커버의 폭이 화면 전체 폭 크기에서 본문 글 폭과 같게 맞추어져 좁혀진다. 사용자가 보기에 좋게 하고 검색 엔진 최적화 SEO 에 한발 더 다가설 수 있게 된다.
- 446 라인 : position: absolute; → position: relative;
- 1046 라인 : height: 340px; → height: 0px;
이렇게 수정되면 블로그 포스트 커버 폭이 본문 글의 폭과 같아진다.
함께 보면 도움이 되는 포스팅 : 애드센스 인피드 광고 넣기 티스토리 블로그 스킨 HTML 편집.
제목 배경에 대표 이미지 겹치지 않게 html 수정
html 편집 화면으로 들어가서 초기 원본 html 스크립트 기준으로 대략 405 라인 부분에 있는 2줄의 스크립트에서 <div class="post-cover">로 간단하게 수정하고 불필요한 스크립트는 삭제한다.
405 라인 : <div class="post-cover"<s_article_rep_thumbnail>
style="background-image:url()"</s_article_rep_thumbnail>>
→ <div class="post-cover">
이렇게 수정되면 본문 제목의 배경 컬러가 대표 이미지와 겹쳐서 보이지 않고 단순 그레이 회색으로 보이게 된다.
함께 보면 도움이 되는 포스팅 : 플로팅 광고로 애드센스 광고효과 높이는 사이드 바 고정하기.
블로그 타이틀과 본문 제목과 거리 좁히기 css 수정
css 편집 화면으로 들어가서 초기 원본 css 스크립트 기준으로 대략 440 라인 부분, 1046 라인 부분을 수정한다. 블로그 타이틀과 포스트 제목 부분과의 거리가 좁혀진다.
- 440 라인 : padding-top: 330px; → padding-top: 0px;
- 1046 라인 : height: 340px; → height: 0px;
이렇게 수정되면 블로그 타이틀과 포스팅 제목과의 간격이 좁혀져 균형잡힌 화면 모습으로 보인다.
