티스토리 블로그를 조금 더 고객친화적으로 탈바꿈하기 위해서는 HTML과 CSS, 그리고 파일업로드라는 녀석을 수정해야 합니다. 참고로 이 녀석들은 아래와 같이 [티스토리 관리창] → [스킨편집] → 우측상단 [HTML편집]에서 수정하는 녀석들입니다.
HTML/CSS/파일업로드 설정방법은?
HTML/CSS/파일업로드에서의 설정방법이 제각각인데요.
일단 HTML은 편집창에서 직접 수정(ㅠㅠ)하셔야 합니다.
그리고 CSS는 제가 보내드리는 코드를 그대로 복붙하시면 됩니다.
복붙하는 방법은 링크를 참고 부탁드리겠습니다.
마지막으로 파일업로드는 제가 보내드린 코드를 그대로 업로드하시면 됩니다.
업로드하는 방법은 링크를 참고 부탁드리겠습니다.
HTML, CSS, 파일업로드의 자세한 설정방법은 아래와 같습니다.
✅ HTML 설정방법
HTML 편집창에서 직접 수정하셔야 되는 내용들입니다.
각 항목별로 링크를 걸어두었으니 차근차근 따라해주세요.
애드센스 승인 전에는 2가지만 설정하면 됩니다.
(프로그레스바, 자동목차생성)
- 프로그레스바 코드 복붙하기
- 자동목차생성 코드 복붙하기
- [애드센스 승인 후 적용] 인피드광고 코드 복붙하기
- [애드센스 승인 후 적용] 디스플레이광고 코드 복붙하기
- [애드센스 승인 후 적용] 인덱스페이지 인피드광고 코드 복붙하기
- [애드센스 승인 후 적용] 멀티플렉스광고 코드 복붙하기
- [애드센스 승인 후 적용] 티스토리 링크를 현재 창에서 열리게 하는 코드 복붙하기
✅ CSS 설정방법
CSS 코드는 제가 아래에 첨부한 코드를 그대로 CSS 코드에 붙여넣기 하시면 됩니다. 혹시라도 CSS 코드에 복붙하는 방법이 헷갈리거나 겁나시는 분들은 링크 참고해주세요. 만약을 대비해서 기존의 CSS코드는 메모장에 백업해두시길 권장드립니다.
참고로 CSS코드 변경사항은 아래와 같습니다.
- .post-cover : 글 제목 배경을 어둡게 하여 제목 가시성 향상
- .entry-content h1~h4 : 제목1~3 스타일을 예쁘게 변경
- .entry-content p : 본문 글자 크기를 변경
- .entry-content ul li : 본문 내 단락 스타일 변경
- .entry-content ol li : 본문 내 단락 스타일 변경
- .post-cover : 포스팅 제목 크기 조정
- .post-cover:before : 포스팅 제목 크기 조정
- .post-cover .inner : 포스팅 제목 크기 조정
- .post-cover .category / h1 / a / meta / meta a : 포스팅 제목 크기 변경
- ##tt-body-page #container : 포스팅 제목 크기 조정
- #article-view blockquote[data-ke-style='style1'] : 인용문 글자 크기 조정
- #article-view blockquote[data-ke-style='style2'] : 인용문 글자 크기 조정
- #article-view blockquote[data-ke-style='style3'] : 인용문 글자 크기 조정
- #article-view table td : 표 글자 크기 조정
- #article-view ol li : 리스트 간격 조정
- #article-view ol : 리스트 간격 조정
- #mybar : 프로그레스바 코드 복붙
- #toc 관련 : 자동목차생성 코드 복붙
- .contents_style p a 관련 : 하이퍼링크 스타일변경 코드 복붙
- @keyframes blink : 하이퍼링크 스타일변경 코드 복붙
- .main-slider : 상단 숨겨버리기
✅ 파일업로드 설정방법
파일업로드는 자동목차용 자바스크립트 파일(jquery.toc.min.js) 하나만 업로드하시면 됩니다. 방법이 어렵지 않으니 링크 참고해주세요.
