티스토리 스킨 수정 :: 방문자 통계 그래프 적용 & CSS 수정

안녕하세요 호호만두에요

아직은 블로그가 부족한게 많아서

블로그 다듬기 작업부터 하고 있어요

스킨변경은 완료했어요

그런데 스킨을 바꿧는데 부족한 부분들이 있어서

바꿔보고 있었어요

네이버 블로그와 제일 다른점은 HTML과 CSS를

마음대로 바꿀수 있다는점 아니겠어요???

자유롭게 원하는대로 바꿀 수 있으니 너무 좋은것 같아요

그래서 한번 바꿔보았습니다!!

스킨을 바꾸고 UI를 하나씩 살펴보고 있었어요

그중에서 제일 넣고 싶었던게 방문자 그래프!!

같이 따라해보아요

티스토리 방문자 그래프 추가하는 법

우선 블로그 설정 페이지로 들어가줍시다

설정에서 꾸미기의 사이드바 탭으로 들어가주세요

주소 뒤에 /manage/design/sidebar 붙여주셔도 들어가실수 있어요

들어가시면 위와같은 창이 떠요

지금 사용하고 있는 모듈과 사이드바가 어떻게 구성되어있는지 나오네요

서랍장 버튼을 이용해서 순서를 바꾸거나 

옆의 '-'버튼을 이용해서 필요없는 목록들은 삭제할 수 있어요

뒤에서 플러그인을 추가할거에요

추가하고나면 여기서 확인할 수 있어요

그리고 이번에는 꾸미기 밑에한 플러그인을 눌러세요

이제 방문자 그래프 플러그인을 적용할거에요

그러면 검색버튼을 누르고 '방문자'라고 검색!!!

그러면 아래에 3가가 나오게 되는데

여기서 저희가 사용할것은 방문자 통계 그래프에요

방문자 통계 그래프 클릭!!

그러면 위와 같은 새로운 화면이 또 뜰거에요

위화면에서는 간단한 적용화면을 볼 수 있고

그 밑에는 간단한 설명과 스킨 치자에 대해서 나와있어요

여기서 스킨 치환자 꼭 기억해주세요

이 부분을 HTML에 코드로 추가할거에요

티스토리 방문자 통계 그래프 스킨치환자

크롬/MS엣지 개발자 도구로 기존 스킨 분석하기

이제 스킨은 찾았어요

그런데 이제 이걸 어디다 등록해서 쓸거냐!???

그걸 저희가 마음대로 정할 수 있어요

코드에 위에서 확인한 스킨치환자를 입력하면 끝이랍니다

그전에 위치를 확인하기 위해서 크롬이나 엣지 브라우저를 켜서

F12번을 눌러 개발자도구를 켜주세요

필자는 엣지를 이용하였습니다 크롬도 똑같아요!!

개발자 도구를 누르면 위와 같은 화면이 나와요

창의 오른쪽에 나오게 된답니다

여기서 맨 위의 요소를 눌러 위와 같은 창이 나오게 해주세요

크롬 사용자는 Elements를 눌러주세요

오른쪽 위에 나오는게 지금 띄워져 있는 창의 HTML코드

밑에 부분이 CSS부분이에요

HTML 코드는 쉽게 말하면 창을 만드는 부분이고

CSS는 만든것을 더 예쁘게 다듬는 부분이에요

(몰라도 되요ㅎㅎㅎ)

저는 위의 노란색 박스 부분 즉

방문자 카운터 부분 밑에 방문자 통계 그래프를 넣어줄거에요

그러려면 카운터의 위치를 HTML코드에서 찾고

그 밑에 넣어주면 통계 그래프가 밑에 나오겠죠??

카운터 부분의 HTML코드를 찾기 위해서는

요약 및의 화살표 방향키를 누르면 되요

누르게 되면 왼쪽의 화면을 선택할 수 있어요

그중에서 카운터를 선택하면 카운터 부분에 해당하는

HTML코드로 자동으로 이동시켜줘요

그래서 저는 빨간색 박스로 된 부분을 찾았어요

카운터라고 주석도 달려있네요

이제 수정하러 갑시다!!

잘 모르시겠는 분은 아래 참고하세요!!!

gif로 올리려고 했는데 실패했어요 ㅠㅠㅠ

정말 모르겠는분만 받아보세요 짧아요

bandicam 2019-02-16 13-07-53-096.mp4

블로그 스킨 편집

이제는 꾸미기 탭의 스킨편집으로 들어가줍시다

그리고 빨간박스로 표시된 HTML 편집을 눌러주세요

그리고 나오는 창에서 오른쪽 코드 부분에 커서를 두고

ctrl + f를 눌러서 검색탭을 활성화 시켜주세요

그러면 위의의 화면에서 아까 찾은 코드로 이동하기 위해

카운터 입력

자동으로 찾아왔어요

이제 카운터 모듈 밑에 코드를 넣을거에요

위치를 잘 확인하고 넣어주세요!!!

ㄹㄹㄹ

위의 위치에 넣어주시면 됩니다!!!!

div span을 잘보고 넣어주세요

이제 저장을 누르면 방문자 통계 그래프가

잘 들어갔을거에요

확인하러 가보아여

오... 뭔가 색깔이 이쁘장하진 않지만

위치에 알맞게 들어갔네요

그런데 지금 하나 흠인게

위의 방문자 카운터가 색깔이 흐려서

잘 안보이네요 ㅠㅠㅠ

 이 부분만 같이 수정해야 겠어요

블로그 스킨 CSS 수정

이 부분도 똑같은데 이번에 위에 코드가 아니라

아래 코드 부분을 확인할거에요

아까 처럼 화살표 버튼을 이용해서

카운터 부분을 눌러주면

카운터에 적용된 CSS 속성들이 나오게되요

즉 디자인적인 속성들이에요

여기서 color가 보이네요 체크를 해제해주면

임시적으로 어떻게 변하는지 확인할 수 있어요

체크를 해제하니까 원래 적용되어있던 색깔이 없어지면서

색깔이 진하게 잘보이네요

그러면 스킨편집을 통해서 저 코드를 지워주면 되겠어요

아까 위에서 이동했던 HTML편집으로 이동해서

위에서 HTML이 아닌 CSS 탭으로 이동해주세요

검색을 통해 바로 위에서 확인한

module-visitor를 검색하여 이동!!

그리고 방금전 체크해제해 보았던

color 속성을 제거해줍시다 그리고 저장!!!

그러면 아까 체크해제 했을떄와 똑같이

글씨가 잘 보이겠죠??

이거는 코드를 적용한거에요

이제 시원시원하게 잘보이네요 ㅎㅎㅎ

후... 이번 글 쓰기 힘들었어요 ㅠㅠ

HTML과 CSS를 몰라도 적용할 수 있도록

쉽게 써보려 했는데 어렵네요

그러니 잘 보셨다면 댓글 부탁드려요~~!!

잘 모르겠는 부분도 댓글 달아주세요

모두 티스토리 블로그 예쁘게 꾸밉시다!!