며칠 전 FastBoot 스킨에서 JB 스킨으로 갈아탄 뒤 올라오기 시작한 모바일 친화성 오류가 계속해서 증가하고 있습니다. 아래의 이미지는 구글 콘솔에서 스프레드시트로 오류 개수를 받아본 화면인데 스킨 교체 후 이전에 전혀 없었던 모바일 친화성 오류가 꾸준히 증가하고 있음을 보여줍니다. 현재의 상태는 76개의 오류를 보이고 있으며 내일이면 아마도 또 늘어나 있을 것 같습니다. 오류의 형태로 보아 개별 페이지 수정으로는 감당이 안될 것 같은데 도대체 스킨의 무엇이 문제를 일으키는 것인지 찾아내야 할 것으로 보입니다. 아래는 5월 2일 기준 구글 콘솔의 오류 출력화면입니다. 구글에서 이 오류에 대하여 언급하고 있는 주요 내용은 아래와 같습니다. 1. 데이터 정보 구글 콘솔 오류 표에는 최대 1,000행까지..
포토스케이프는 MS 포MS 포토스케이프(PhotoScape X)토스케이프(PhotoScape X)스토어에서 다운로드 할 수 있는 GIF 만들기와 사진편집에 효과적인 무료 그래픽 프로그램입니다. 포토스케이프 X(PhotoScape X)는 사진을 쉽게 향상, 보정, 편집하는 "재미있는 사진편집 프로그램" 입니다. 올인원 사진 편집기로 사진 편집 + 일괄 편집 + 사진 뷰어 + 오려내기 + 콜라주 + GIF + 이어붙이기 + 인쇄 + 화면 캡처 + 색상 검출 + RAW 이미지 지원 등을 할 수 있습니다. 무료 버전과 유료 버전이 있으며 무료 버전명은 PhotoScape X 이며, 유료 버전명은 PhotoScape X Pro 로 불립니다. MS 스토어에서 다운로드할 수 있으나, 제작사의 홈페이지 에서도 다운로드..
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 스킨은 기본 폰트가 돋움으로 가독성도 조금 뒤쳐지는 듯 느껴지는데 모바일에서는 더욱더 그러합니다. 예를 들자면 다음 포털에서 뉴스를 읽다 제 블로그로 들어가보면 그 차이가 확연히 느껴집니다. 마치 클리어 타입의 다음 폰트를 보다 클리어 타입이 아닌 제 블로그의 폰트를 보는 듯한 느낌입니다. 이번 포스팅에서는 티스토리 FastBoot 스킨에서 기본 폰트인 돋움을 가독성 좋은 구글 무료 폰트로 바꾸어 보도록 하겠습니다. 먼저 구글 폰트로 들어갑니다. - 링크 : https://fonts.google.com/ 언어를 한국으로 바꾸고 폰트를 살펴보도록 하겠습니다. 이제 한글을 지원하는 폰트들만 보여주는데 저는 모바일에서 가독성이 좋은 폰트를 구하고 있는 지라 가장 가독성이 좋아 보이는 폰트로 N..
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가지입니다. 물론 가장 큰 영향을 주는 것은 아마도 스킨자체를 가벼운 스킨으로 바꾸는 것이겠지만, 일단 스킨을 선택..
저의 사용환경은 윈도우즈10 64비트, 브라우저는 익스플로러, 엣지, 크롬이 설치되어 있고 티스토리 포스팅작업은 자동저장기능이 풀리지 않는 익스플로러를 이용하고 있습니다. 그런데 익스플로러 브라우저의 경우만의 문제는 아닌듯하지만 가끔 포스팅 도중에 "사진 올리기가 정상적으로 완료되지 못하였습니다"라는 플래시 오류로 사진올리기가 정상적으로 진행되지 못하는 경우가 종종 발생합니다. 이 경우의 해결방법에 관하여 알아보도록 하겠습니다. 가장 일반적인 경우의 해결 방법은 티스토리 편집작업(특히 사진올리기가 행해지는 브라우저)을 주로 하는 브라우저 기준의 플래시 최신 버전을 다운로드하여 설치하는 방법일 것입니다. 먼저 아래의 사이트로 갑니다. https://helpx.adobe.com/kr/flash-player...
티스토리 블로그를 개설하고 나면 제일 먼저 하는 것이 사이트맵을 만들고 구글, 네이버, 빙의 순서로 웹마스터에 등록하는 일입니다. 그런데 요즘은 구글도 그렇고 모바일 친화성을 굉장히 중요하게 여기는 쪽으로의 흐름들이 있습니다. 대세는 pc보다는 모바일이고 블로그가 얼마나 모바일에서 부드럽게 로딩되고 각각의 크기에 따른 잘림이나 이상현상 없이 잘 반응하느냐 하는 문제가 중요해졌습니다. 우리가 사이트맵을 빙에도 등록했다면 빙 웹마스터에 진입한 뒤, 진단 및 도구 항목에 들어가 보면 모바일 지원 수준 테스트라는 세부 항목이 보입니다. URL 입력란에 자신의 블로그 중 테스트할 임의의 페이지 URL을 입력하고 분석을 클릭하거나 탭 하여 Bingbot이 페이지가 모바일 친화적인 것으로 간주되는지 여부를 확인할 수..