티스토리를 접한지도 2달이 넘어가는데 포스팅수는 50여개 뿐입니다. 1일1포스팅을 목표로 하고 있지만 습관들이기가 쉽지 않고, 부동산 블로그라는 특성상 정확한 자료수집 및 분석을 통해 포스팅을 하나하나 검수 해야하다보니 글쓰는 속도도 느려지고, 자꾸 먹방 관련 포스팅글들을 심심찮게 올리는 것같습니다. 마음속으로는 그날그날 어떤 포스팅을 쓸지 컨셉을 생각하며 카테고리를 정해보지만 쉽지만은 않은 일입니다.
첫 포스팅을 4월29일 작성하고 나서 애드센스 기준을 맞추기 위해 이곳저곳을 뒤적거리며 많은 정보와 노하우를 습득하고, 구글애드센스 기준에 맞는 광고를 삽입하기 위해 접해보지도 못한 코딩이라는 것도 알아보게 되어 2달간은 나름 보람된 하루하루를 보냈던 것 같습니다. 이정도 정성이였으면 네이버 블로그에서 일조회수는 꽤 나왔으리라 생각을 해보지만 저는 티스토리에 이미 심취해 있습니다.
티스토리는 코딩을 이용하여 블로그를 홈페이지 처럼 꾸밀 수 있어 네이버와는 차별화된 무언가가 있는 것 같습니다. 무엇보다 우리들에게 치킨을 사먹게해주는 구글애드센스(치킨전용)라는 것이 있기 때문에 더욱 애정을 갖고 티스토리에 매진하는게 아닌가 싶습니다.
각설하고 포스팅에만 전념하면 얼마나 좋겠냐만은 아무리 양질의 글을 써도 가독성이 낮다거나 사람들에게 검색노출이 안된다면 이것또한 의미 없는 일이 아닌가 싶습니다. 또한 우리는 치킨을 먹기 위해 구글애드센스를 어떻게 잘 노출시켜야 하는지 꾸준히 생각해야하는 것 같습니다.
그 동안 티스토리를 운영하면서 저에게는 유용했던 팁으로 남들이보면 미세먼지급 팁이라 할 수 있는 몇가지 정보들을 포스팅 해드리도록 하겠습니다.
CSS로 폰트수정(poster스킨 기준)
포스팅을 쓰면서 미리보기를 통해 어떤 폰트를 적용해야 가독성이 좋을지 꾸준히 생각하게 되었습니다. 결론은 폰트, 크기, 문단간격에 따라 가독성의 차이가 난 다는 것을 알게 되었습니다.
제블로그 특성상 유입되는 주연령층이 40~50대인 만큼 깨알만한 글씨체는 안어울려 18포인트에 굴림체를 시도해봤지만 오히려 가독성이 현저하게 떨어진다는 것을 알게되었고, 여러가지 시도끝에 'Notos Sans Kr'(본고딕) 체가 가장 잘어울리며 14pt에 문단간격은 150%정도가 가장 적합하다는 결론을 내리게 되었습니다.
하지만 티스토리 설정에서 폰트와 크기를 설정하고나서 미리보기와는 전혀다르게 나온다는 점을 알게되어 CSS를 통해 수정하기로 했습니다. 티스토리 버그라고하는데 빨리 고쳐졌으면 합니다. 저도 몰랐을때는 그냥 쓰다보니 제가 원하는 폰트로 안나오는 경우가 많았습니다.
본고딕 폰트가 없다면 위의 코드를 CSS상단에 입력하면 아주간단하게 적용시킬 수 있습니다.
본고딕코드.txt
검색창에 'font-family'를 찾아서 위에 나오는 것 처럼 'Noto sans KR','Malgun gothic',dotum sans-serif; 를 입력해줍니다. 저는 본고딕을 하고 싶었기 때문에 수정했지만 원하는 폰트가 있다면 맨앞에 폰트를 바꿔주시면 됩니다.
뒤에 나오는 폰트는 본고딕이 적용 안됐을 시 그 다음 순번대로 적용되는 순서입니다. 'font-family'를 전부찾아서 저런식으로 바꿔버렸습니다. 포스팅 글씨는 고딕인데 카테고리나 나머지 부분들이 고딕이 아니면 안어울릴 것 같아 수정해버렸습니다. 귀찮으신분들은 전부찾아서 수정하길 바랍니다.
'entry-content p'를 찾아 폰트사이즈를 1.15em(대략14포인트)으로 바꿔주었고 컬러는 141414로 바꿨는데 그냥 검정색이 아닌 진한 회색으로 바꿨습니다. 진한 검정보다는 진한 회색이 눈의 피로도가 적다고 합니다.
모바일 폰트크기 수정(poster스킨)
애널리틱스를 통한 기기별 유입률을 보면 평균적으로 모바일60%, 데스크탑40% 정도 인듯합니다. 그래서 모바일로 많이 보시는 분들을 위해 모바일 폰트크기를 수정해주었습니다.
CSS에서 media screen-Mobie를 찾아주고 크기와 문단간격 컬러를 수정해줍니다. 767px보다 낮게 나왔을시 적용된다 보시면 됩니다. 크기는 1.206em으로 컬러도 마찬가지고 141414 회색계통으로 설정해주었습니다.
모바일 폰트크기를 조절해주면 확실히 눈에 들어오는게 달라집니다. 모바일 폰트크기가 너무 커서 싫다면 1.12 나 1.15 정도를 해보시길 바랍니다.
광고 짤림현상 해결
포스팅 올리면서 중간중간에 열심히 애드센스 광고를 넣었지만 어느순간 모바일을 통해 확인해보니 짤림 현상이 생기는 것을 발견 했습니다. PC버전이야 잘 노출되지만 모바일은 반응형인데도 불구하고 짤림 현상이 일어나 이것 저것 찾아본 결과 해결방법을 알아냈습니다.
구글애드센스 광고단위 디스플레이 수평형 같은 경우 반응형으로 적용시켜도 짤림 현상이 있었지만 위에 보시는 것처럼 광고코드에서 "true"를 "false"로 수정 시켜주시면 됩니다.
수정전에는 반정도가 안나오는 현상을 보였다면 수정후에는 작지만 규격에 맞게 노출이 된 모습을 볼 수 있습니다. 그동안 삽입했던 광고를 일일이 수정하기에는 너무 번거롭고 잦은 수정으로인한 저품질이 두려워 몇개만 수정 시켰습니다.
표 짤림현해결
제 블로그 특성상 표를 많이 이용하는데 모바일에서 짤림 현상은 그냥 당연하다는 생각을 했었습니다. 좌우로 넘겨서 볼 수는 있지만 검색해서 보시는분들은 그냥 '짤렸구나' 라고 생각할 것입니다. 해결방법이 있는지도 몰랐는데 역시나 간단했습니다.
'width'는 폭,넓이를 의미하는 것으로 764로 되어있는 것은 최대 넓이가 764px이라는 뜻입니다. 이를 100%로 바꿔주면 모바일에서 짤리지 않고 모바일 크기에 맞춰서 노출이 됩니다.
보시는 것 처럼 수정전에는 6칸중에 3칸정도가 짤림 현상이 일어났다면, 수정후에는 6칸 모두가 짤리지 않고 노출이 됩니다.
모바일웹 연결해제하기
모바일웹 자동연결(좌) 모바일웹 자동연결 해제(우) 입니다. 다들 아시다시피 반응형 스킨은 모바일웹 자동연결을 해줄 필요가 없습니다. 자동연결을 해제해야 스킨이 재대로 적용되어 PC버전처럼 볼 수 있어 좋습니다. 그러니 반응형이신분들은 모바일웹 자동연결을 해제하시길 바랍니다.
좋은 정보 얻어가셨다면 구독+공감♥ 내용이 잘못되었거나 수정이 필요하다면 댓글 남겨주세요^^
