네이버 블로그를 운영하다가 티스토리 블로그로 옮기고 나니,

가장 아쉬운 점이 바로 방문자 통계 분석툴이다.

 

네이버 경우에는 단순 방문자 수 뿐 아니라 검색유입분석도 잘 되어있고

포스트별 조회수도 분석할 수 있다.

이 모든 것이 일간/주간/월간으로 분류해 볼 수도 있고.

 

하지만 티스토리는 자세한 기능은 생략한다!!

방문수만 알 수 있고, 검색어의 경우에는 알 수는 있지만 ... 기간별로 보거나 할 수는 없다.

 

 

이런 단점을 해소하기 위해서 네이버 애널리틱스를 사용하고 있다. 

네이버 아이디만 있다면 누구나 사용할 수 있고, (몇가지 단점이 있지만..) 분석도 정확한 편인 것 같고, 보기도 편하다.

 

 

계속 애널리틱스를 쓰고 있었는데.. 스킨을 바꾸면서 해제됐는데 그걸 모르고 있다가....

어제 다시 설치해 보았다.

 

 

애널리틱스 페이지로 고고!!

analytics.naver.com

 

오른쪽 상단에 '바로 시작하기' 버튼을 눈러준다.

 

 

그리고 다시 오른쪽 상단에 '설정'아이콘을 눌러 사이트관리에 들어가...

'사이트등록' 버튼을 눌러 사이트를 등록해준다. 

URL에 블로그 주소를 입력하면 !

............이 아니다!!

 

분석하기 위한 스크립트를 블로그 html에 넣어줘야한다.

.....아무리 네이버에 등록을 해봤자 분석은 안되고... 내 사이트에 분석기를 설치해야 비로소 분석이 된달까.... 뭐 암튼 그렇게 생각하자. 

 

 

등록된 사이트 목록에서 스크립트 보기를 클릭하고,

스크립트를 복사해준다. 

 

그리고 티스토리 - 블로그 관리 - HTML/CSS편집

skin.html 안에 붙여넣어주면 된다.

 

이때, <head></head> 사이에 넣어준다.

잘 모른다면.... ctrl + f를 눌러 head를 찾아준다.

그리고 바로 <head>뒤나... 바로 </head> 앞부분에 붙여넣으면 된다.

 

 

 

다시 애널리틱스 화면에 들어가본다.

 

정상적으로 스크립트를 넣어줬다면, 실시간분석이 되고 있는 것을 확인할 수 있다! 

 

실시간 그래프가 돌아가고, 드나드는 사람이 있으면 표시된다.

 

 

 

그날의 방문 통계는 하루가 지나야 분석된 차트를 받아볼 수 있다.

실시간분석은 되면서 왜 그건 안되는건지~ 모르겠지만, 아무튼 다음날 사이트현황을 확인할 수 있었다.

 

 

7일로 설정돼 있지만 실질적으로 어제 하루 데이터밖에 없으므로 최근1일=7일=30일인 상태다 ㅋㅋㅋ 

어제의 방문자 수, 페이지뷰,

시간대별 분포와

유입검색엔진, 접속환경까지 표시되고~

유입검색어 순위도 알 수 있다.

TOP10 페이지도...!

 

 

 

그런데,

티스토리 자체에서 카운팅 해주는 방문자수와는 다르다는 것을 알 수 있는데....

왜냐하면 네이버 애널리틱스는 블로그 주인의 접속수도 함께 카운팅한다.ㅋㅋㅋㅋㅋㅋㅋ

어제 잘 적용되고 있는지 보겠다고 한 서른번 넘게 왔다갔다 했는지... 30번 정도 차이가 난다.

특정 IP나 아이디는 배제하는 기능이 있었으면 좋겠는데~ 아직은 없다.

 

그리고 모바일스킨 접속의 경우 카운팅하지 못한다고 하는데,

나 같은 경우엔 반응형 스킨으로 바꾸며 모바일웹 스킨은 off로 해두어서인지 함께 세어지고 있는 것 같다.

 

방문자수의 경우는 어쩔 수 없이 오류가 있을 수밖엔 없는 것 같다.

그런면에서 총 방문수는 티스토리 자체에서 카운팅해주는 수치를 믿고 있지만,

적어도 검색유입의 경우에는 믿을만한 지표인 것 같다.

 

 

 

 

20141219

 

하루종일 티스토리 블로그 스킨 교체작업을 했다.

아무래도 난 공순이가 되었어야 했다는 생각이 심하게 들었다^.^ㅎㅎㅎ

 

마크쿼리 반응형 블로그 스킨을 적용시켜 보았다.

http://markquery.com/

 

 

이전부터 반응형 스킨에 도전해보고 싶었는데, 드디어 짬이 나서 시도...!!

 

 

반응형 스킨이란?

화면 크기에 따라 스킨의 크기가 자동으로 바뀌는, PC 외에도 모바일 등 화면이 작은 디바이스 환경에 알아서 최적화되는 스킨

 

그래서 이렇게 창이 작아져도 깔끔하게 표시가 된다.

'

 

 

 

여기저기 뜯어보며 수정했는데... 적응하기 좀 힘들었다.ㅜㅠㅜㅠ

그래도 여차저차 해서 마음에 드는 수준으로까지는 완성했다.

아직 조금 복잡한 것 같아서 다듬을 생각.

 

 

 

수정한 부분들

 

일일이 야매로 한거라....... 블로그가 돌아가는 게 놀랍다^_^

 

상단 커버 이미지

커버이미지는 cover.jpg를 따로 제작해서 넣으면 된다.

다만 가로/세로 비율을 지정해 입력해 줘야 한다.

(참고: http://markquery.com/docs/responsive-cover-image/)

 

네비게이션바

skin.html에 <div id="menu-layout">~~~를 검색해 이런 애들을 추가해주면 된다.

  <li role="menuitem"><a href="/location">Location</a></li>
  <li role="menuitem"><a href="/media">Media</a></li>
  <li role="menuitem"><a href="/guestbook">Guestbook</a></li>

 

 

T, A+, A- 부분

원래있던 SNS 공유 부분은 삭제하고, 프린트 버튼도 삭제했다.

 

타이틀 폰트

style.css에 이런 애를 추가했다.

.entry-title {
font-weight:lighter ;  FONT-FAMILY: 휴먼편지체,나눔고딕,돋움,Sans-serif; font-size: 25px;}

옛날에 어디 블로그에서 알게됐는데....!

아무래도 제목을 휴먼편지체로, 휴먼편지체가 없으면 나눔고딕으로.... 돋움으로... 표시해주는 걸로 기억한다.

 

 

관리자 메뉴

노란색으로 경고창처럼 뜨는게 싫어서~ 아예 밀어버리고 다른 스킨에서 떼어왔다.

<!-- Entry : admin
================================================== -->
뒷부분을 싹 밀고 이걸로 대체 

<s_ad_div>
<div class="article_admin">
 <a href="">수정</a> : <a href="#" onclick="">수정(창으로)</a> | ()→ <a href="#" onclick=""></a> | <a href="#" onclick="">관련글(트랙백)</a> | <a href="#" onclick="">삭제</a>
</div></s_ad_div>
</p></p>

 

사이드메뉴에 캘린더 추가

사이드메뉴에서 Link같은 쓰지 않는 건 지우고, 태그 뒤에 캘린더를 추가했다.

캘린더를 잘 쓰는지라~

  <s_sidebar_element>
 <!-- Calendar -->
 <div class="widget">
  <div class="widget-inner">
  <h3>Calendar</h3>
   <ul>
    <s_rctrp_rep>
    <li>
    

«   2024/03   »
1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30
31
</span></a>
    </li>
    </s_rctrp_rep>
   </ul>                        
  </div>
 </div>
 </s_sidebar_element>

 

 

캘린더 꾸미는 건, style.css로 수정해야 한다.

근데 뭘 잘못했는지 줄간격이 달라서.......... 수정을........... 하........아.......... 

 

+) 캘린더수정

위엘 보면, div class가 widget-inner로 되어있다. 이 class 로 설정되어 있으니 링크에 효과가 걸리면서.... 줄간격이 흐트러졌다.

어떻게 수정하면 될지 모르겠어서 아예 class를 바꿔버렸다. CSS 부분을 뜯어보니, widget-feed-inner라는 게 있길래..

<div class="widget-feed-inner">

로 그냥 바꿔버렸다! 그랬더니 잘 출력된다^_^다행

ctrl+f로 찾아봤을 때 widget-feed-inner는 안쓰였던데.. 원래 뭘위해 만들어진 feed-inner인지를 모르겠다 ㅋㅋㅋ  (지워버렸나?)

되기만하면 됐지.

 

그밖에 CSS부분에 추가해서 꾸미기 요소를 추가 해줬다.

/* 달력 월 표시 */
.cal_month {color:#959595; font-size: 14px; background:#f6f6f6; font-weight:bold; font-family:Tahoma, Verdana, sans-serif; margin:10px}
.cal_month a {color:#959595;}
/* 달력 요일 표시(th 영역) */
.cal_week1 {color:#767676; text-align: center; font-weight: normal; font-size: 13x; padding:5px;
border-bottom:1px solid #d5d5d5; }
/* 달력 일요일 표시(th 영역) */
.cal_week2 {color:#dc0a25; text-align: center; font-weight: normal; font-size: 13px;
border-bottom:1px solid #d5d5d5; }
/* 달력 Week(tr 영역)  */
.cal_week {}
.cal_current_week {}
/* 달력 Day(td 영역) */
.cal_day {color:#959595; text-align: center; font-size: 13px; font-family:Tahoma, Verdana, sans-serif; padding:5px;}
/* 달력 Day, 일요일 (td 영역)  */
.cal_day_sunday {}
.cal_day_sunday a {}
/* 달력 지난 달 날짜 표시(td)   */
.cal_day1 {}
/* 달력 다음 달 날짜 표시(td)   */
.cal_day2 {}
/* 달력 이번 달 날짜 표시(td) */
.cal_day3 {}
/* 달력 오늘 날짜 표시(td) */
.cal_day4 {color:#dc0a25; font-weight: bold; text-decoration:underline;}
/* 달력 글쓴 날 링크 스타일 */
a.cal_click:link {color:#868686; font-weight: bold; text-decoration:underline;}
a.cal_click:visited {color:#868686; font-weight: bold; text-decoration:underline;}
a.cal_click:hover {color:#868686; 딕-weight: bold; text-decoration:underline;}

 

 

페이징

페이지 버튼을 수정하고는 싶은데, 모르겠어서~ 마크쿼리 커뮤니티에서 능력자님의 댓글을 참고해서 고쳤다.

.pagination li a, .pagination li span {
    padding: 6px;
    line-height: 1.42857;
    text-decoration: none;
    margin-left: -1px;
    position: relativer;
    border: medium none;
    color: #000;
    font-size: 12px;
    border: none;
}

 

여기서 아마 밑에 ul.pagination .interword 에서

  border: 어쩌고 저쩌고~~ 라고 되어있을텐데,

  border: none; 으로 바꿔줘야 '...'부분에 필요없는 밑줄이 사라진다.

 

footer

<footer role="contentinfo">를 검색해 원하는 부분을 고치면 된다.

 

그밖에 링크폰트 색상교체

링크가 파란색 계열로 표시되는데, 너무 튀는 것 같아 회색으로 고쳤다.

style.css에서 global link style.. 뒷부분을 고치면 된다.

내가 아는거랑 좀 달라서.... 잘 모르겠어서 그냥 밀고 다시 썼다.

 a:link {color: #000000; text-decoration: none;}
      a:visited {color: #000000; text-decoration: none;}
      a:hover {color: #8c8c8c; text-decoration: underline;}
      a:active {color: white; background-color: #f4f4f4;}

 

걱정됐는데 다행히 정상적으로 출력됨 ㅎㅎㅎㅎ

visited는 방문했던 링크, hover은 마우스 올렸을 때, active는 실행될 때 상태이다.

 

+) 키워드 기능을 사용하게 되면서,

본문 내의  키워드도 모두 하이퍼링크이다보니... 싸잡아서 바뀌게 되는게 싫었다. 그 과정에서 Style.CSS 부분에 키워드 부분은 위 소스를 따르지 않게 다음을 추가했다.

/* 키워드 */

.key1 { color: inherit ; border-bottom: 1px dotted #000000; }

'inherit'의 의미는 정해진 스타일을 그대로 따르겠다는 뜻이다. 그러니 본문에서 장한 색상을 따르게 하려면 inherit으로 해주면 된다.

관련글: 키워드기능 사용하기 포스팅<-클릭

 

태그에 마우스 올리면 파란색으로 변하는 것도 시행착오를 거치며... 수정하면 된다.

Such a 노가다

 

티에디션도 반응형으로

이부분은 정말 잘 모르겠어서~ 하라는대로 했다. ㅎㅎㅎ 동영상 강의를 참고하세요.

참고 : http://markquery.com/docs/tistory-responsive-tiedition-patterns/

 

제발!!!!!! html/css수정하기 전에!!! 티에디션 해제하고 수정하세요!!!

하루 종일 이것 땜에 삽질 ㅎㅎㅎㅋㅋㅎㅋㅎㅋㅎㅋㅎㅋㅎㅎㅋ

해제 안하고 건들이면... 폭이 줄어들어서 다 다시 해야합니다ㅜㅠㅜㅠ

Such a 노가다2

인간은 같은 실수를 반복 ㅠㅜㅠㅜㅠㅜㅠㅜ

 

 

 

 

+ Recent posts