구글 애드센스에 블로그를 연결시켜 광고를 싣고 있는 모든 분들에게 정말 뭔 말인지 이해도 안 가는 큼지막한 영어나 일본어 광고가 떡하니 내 블로그에 자리를 차지하고 있는 것을 보면 화가 나기도 합니다. 사실 수익율을 떨어트리는 주된 원인일지도 모르겠다는 생각을 했습니다. 블로그 유입자의 거의 대부분이 한국인인데 광고의 절반이 영어 광고가 나오면 이게 과연 효율적일까요? 사실 이런건 애드센스에서 알아서 처리해 줬으면 하는데 그런 건 아직 안되나 봅니다. 자 이제 본론으로 들어가서 외국어 광고 차단 방법을 알아 보돌록 하겠습니다. 구글링을 해보니 대부분이 메타태그 이야기를 하시더군요. 모르겠습니다. 이게 효과가 있는지는 그래서 저는 패스했습니다. 주관적이지만 가장 확실한 방법은 구글 애드센스 광고심사센터에서..
FastBoot 스킨에서 JB 스킨으로 교체후 이틀정도 지난뒤에 구글콘솔에서 메일이 왔습니다. 모바일 사용자 편의성에 문제가 발생했다고 알려주는 메일이었습니다. 에러의 종류는 두가지 였습니다. - "텍스트가 너무 작아서 읽을 수 없음" - "클릭할 수 있는 요소가 서로 너무 가까움" 문제를 하나씩 찿아가다 보니 위의 두가지 오류는 어느 하나만 수정하면 다른 것은 동시에 수정되는 경우가 거의 대부분이었습니다. 아래의 그림에서는 오류가 2개이지만 또 다른 운영 블로그에서는 30개 가까이 나온터라 대부분이라는 용어를 사용하였습니다. 이 문제는 워낙 상대적인 개념이라 이러한 에러는 이런 부분을 이렇게 고쳐주면 된다 라고 정의할 수 없습니다. 오류를 일으키는 페이지의 상황에 따라 같은 오류 메시지라고 하더라도 원..
티스토리 블로그는 본문의 가장 하단에 있는 하트 모양의 공감, 공유 버튼이 좌측 정렬을 기본 설정으로 하고 있습니다. 그런데 이러한 정렬 방식이 마음에 들지 않아 가운데 정렬로 변경하고 싶은 분들이 많으시리라고 생각합니다. 이하의 내용에서는 아래의 그림처럼 좌측 정렬되어 있는 공감, 공유 버튼을 중앙 정렬시키는 방법과 공감 버튼의 아래에 있는 SNS 글 보내기 버튼 및 페이스북 좋아요 버튼의 삭제에 대하여도 설명하고자 합니다. 1. 가운데 정렬을 위한 text-align 속성 적용 코드 .container_postbtn .postbtn_like { float: none !important; display: inline-block; } 2. 가운데 정렬 속성 적용 코드 .container_postbtn {..
이번에 겪은 티스토리 블로그 에러는 특이한 케이스라서 혹시 또 겪을 분이 계실지도 몰라 제 경우의 해결 방법을 올립니다. 크게 두가지의 증상이 일어 났는데 두개의 증상 모두 하나의 원인때문에 발생한 것이었습니다. 1. PC화면에서만 사이드바가 아래로 내려가 버리는 현상 우측에 사이드바가 있고 좌측에 내용 목록이 있는 블로그의 경우에 우측 사이드바가 좌측 본문이 끝나는 지점의 우측까지 내려가 버리는 현상이 언제부터인가 일어났습니다. Html 코드와 Css 코드며 티스토리 블로그 설정까지 모두 검토했지만 원인을 찿을 수 없었습니다. 심지어 스킨을 여러차례 교체하고 초기화 시켜보아도 증상이 사라지지 않았습니다. 특이한건, 모바일 화면에서는 정상적으로 보여지고 있었습니다. 2. 공감버튼이 뭉개지면서 좌측으로 세..
FastBoot 스킨에서 본문의 폰트크기와 줄간격은 html 편집의 CSS에서, 자간은 html 탭에서 하게 됩니다. 하나씩 설명하여 드리겠습니다. 1. 본문 폰트 크기 수정 CSS탭에서 "@post-body-font-size" 가 써있는 부분을 찿아간 뒤 아래의 그림처럼 나오는 부분에서 폰트 사이즈를 원하는 사이즈로 바꾸어 주면 됩니다. 바꾸신 뒤 저장까지 눌러 주셔야 변경된 내용이 적용됩니다. 2. 본문 줄간격 수정 CSS탭에서 line-height 값을 변경해주면 되는데 주의할 점은 px과 같은 절대값을 주게 되면 폰트 크기 변경시에 줄이 겹쳐지거나 하는 부자연스러운 외관을 보여줄 수도 있게 됩니다. 1, 1.5, 2 등과 같은 상대값을 사용해야 합니다. 만약, line-height가 1이라면 폰트..
티스토리 블로그의 최적화중 페이지 로딩 속도 최적화에 관하여 알아보도록 하겠습니다. 블로그 최적화중 로딩 속도의 최적화는 기본중의 기본이라고 말할 수 있습니다. 아무리 컨텐츠 내용이 훌륭하고 알차다고 하더라도 보는 입장에서 클릭했는데 페이지가 보여지는 데 오랜 시간이 걸린다면 고 퀄리티의 글은 읽혀보지도 못한채로 사장되고 말것입니다. 더불어 그러한 블로그 유입자들의 들락날락하는 패턴이 반복된다면 블로그 지수에 있어서도 좋지 못한 점수를 받을 것은 뻔한 일입니다. 블로그 로딩 속도 최적화는 3가지 부분에서 이루어져야 합니다. html 소스의 압축, css 소스의 압축, 이미지 파일 최적화의 3가지입니다. 물론 가장 큰 영향을 주는 것은 아마도 스킨자체를 가벼운 스킨으로 바꾸는 것이겠지만, 일단 스킨을 선택..
티스토리 블로그를 개설하고 나면 제일 먼저 하는 것이 사이트맵을 만들고 구글, 네이버, 빙의 순서로 웹마스터에 등록하는 일입니다. 그런데 요즘은 구글도 그렇고 모바일 친화성을 굉장히 중요하게 여기는 쪽으로의 흐름들이 있습니다. 대세는 pc보다는 모바일이고 블로그가 얼마나 모바일에서 부드럽게 로딩되고 각각의 크기에 따른 잘림이나 이상현상 없이 잘 반응하느냐 하는 문제가 중요해졌습니다. 우리가 사이트맵을 빙에도 등록했다면 빙 웹마스터에 진입한 뒤, 진단 및 도구 항목에 들어가 보면 모바일 지원 수준 테스트라는 세부 항목이 보입니다. URL 입력란에 자신의 블로그 중 테스트할 임의의 페이지 URL을 입력하고 분석을 클릭하거나 탭 하여 Bingbot이 페이지가 모바일 친화적인 것으로 간주되는지 여부를 확인할 수..
티스토리 글쓰기 에디터는 글쓰기 도중 직접 표를 만들어 넣을 수 있는 표 만들기라는 훌륭한 도구를 가지고 있습니다. 다양한 표서식도 포함하고 있어 고급 워드 프로세서 수준의 표를 간단하게 만들어 넣을 수 있습니다. 그런데 표만들기를 통해 만들어진 표들은 작성 당시의 픽셀 크기를 기준으로 HTML 코드로 들어가게 되어 있습니다. 우리가 구글 애드센스의 광고를 고정형 광고와 반응형 광고로 나누듯이 티스토리 에디터의 표 만들기 기능은 입력한 고정형 픽셀 단위로 코드가 삽입되게 됩니다. 따라서 티스토리 에디터에서 열심히 도표를 만들고 수치를 입력하고 디자인을 꾸민뒤 업로드하고 PC 화면에서 보았을 때 일부 표들은 아래와 같이 잘려 보이게 됩니다. 이제 이 문제를 수정해 보겠습니다. 티스토리 관리자 페이지에서 이..
티스토리에서는 티스토리 블로그에서 포스팅을 작성할 경우에 수식입력의 편리를 위해 상단 메뉴중 수식입력 메뉴를 제공하고 있습니다. 아래의 그림과 같이 상단 메뉴중에 수식입력이라는 메뉴가 보일 것입니다. 첨자의 오류를 설명드리기 위하여 임의의 숫자로 예를 들어 설명하여 보겠습니다. 임의의 숫자로 20의 -9승 이라는 숫자를 입력해야 한다고 가정해 보겠습니다. 상단메뉴의 수식입력 도구를 이용하여 입력하면 이런식으로 나오게 됩니다. 수식편집기상의 입력은 모든 것이 오류없이 입력되었고 결과 모습도 정상적으로 보이는데 편집창에 입력이 되고 나면 위쪽으로 볼록하게 튀어 나와 있어 매우 보기에 좋지 않은 모습으로 있습니다. 대부분은 포스팅을 발행하고 나면 브라우저에 따라 약간씩의 차이가 있을 수는 있지만 정상적으로 표..
네이버 웹마스터에서 티스토리 블로그 최적화중 유일하게 최적화 되지 않던 항목인 "앱링크-페이지와 연동되는 모바일 앱 링크가 존재하지 않습니다" 에러를 해결해 보도록 하겠습니다. 사실 뭐 작년말 이후로 네이버 검색에서 티스토리 블로그들이 밀려난 후로 거의 거들떠 보지 않던 항목들인데요, 오늘은 한가해서 한번 손대볼까 합니다. 이런 최적화가 티스토리 블로그의 네이버 노출에 의미가 있을지는 모르겠습니다. 자신의 네이버 계정에 로그인한 후 네이버 웹마스터 페이지로 갑니다. 최적화 페이지에서 자신의 블로그를 최적화 정도 확인을 위해 확인 버튼을 누릅니다. 결과 페이지에서 보면 아마도 FastBoot스킨을 쓰시는 분들은 거의 대부분이 그러시겠지만 아래처럼 앱링크 부분에서만 최적화가 잘 이루어지지 않습니다. 이제부터..