IT/티스토리 48 구글 Page Speed Insights 웹페이지 속도 측정 (광고 철거하고) PageSpeed Insights (google.com) 블로그 초기 페이지 로딩 속도가 너무 느려서 조금씩 코드와 이미지의 용량을 수정하고 개선하면서 속도를 측정하고 있습니다. 1. 전혀 손대지 않고 있는 그대로 사용한 처음 상태입니다. 모바일 / 데스크톱 2. 1주일 정도 정리 작업을 진행한 후의 수치입니다. 모바일 / 데스크톱 현재 구글과 카카오의 4개 광고 등록한 상태입니다. - 이미지 크기 축소 - 투명 배경이 필요하지 않은 내용에서는 압축률이 떨어지는 PNG를 GIF, JPG로 교체 - 사용 폰트 줄이고 폰트 소스 파일을 계정에 업로드 - 필요 없는 자바 스크립트와 jQuery를 제거하고 JQuery 소스파일 계정에 업로드 - 구문이 잘못되지 않고, 눈에 띄는 오류를 일으키지는 않지만, 리소스.. 2021. 2. 20. 티스토리 연동 광고 overflow로 인한 블록 깨짐 방지 티스토리에 등록한 애드핏, 애드센스 광고 배너 크기로 인하여 페이지의 틀이 깨질 때 사용하는 방법입니다. 티스토리의 '블로그 관리 홈'에서 2가지 광고를 연동시켰을 때 사용하는 것입니다. 티스토리와 연동시키지 않고 광고 배너 코드를 직접 소스 페이지에 입력하는 경우는 적용되지 않습니다. 이미지 2개를 예제로 등록하였습니다. 현재 티스토리에 연동된 배너 광고의 크기는 고정형입니다. 웹브라우저의 높이와 폭의 크기를 변동시키면 배너가 있는 문단의 크기에 맞게 변경되지 않습니다. 그래서 왼쪽 캡처 이미지와 같이 페이지의 다른 구역을 침범하여 전체적인 페이지의 디자인이 깨지는 현상이 발생합니다. 다행스러운 것은 구글 애드센스, 카카오 애드핏 배너 광고의 HTML 코드가 "" 태그를 사용하고 "revenue_uni.. 2021. 2. 19. Tistory 블로그 사이드바에 프로필 정보 창 추가하는 요령 (북클럽 스킨) ※ 20210303 등록 방법의 오류 수정 및 반영 ※ 20210220 "skin.html" 파일에 추가하는 코드 수정 티스토리에서 2020년에 제공한 공식 스킨 "Odyssey"에는 사이드바에 블로그의 정보를 전달하는 작은 창을 달 수 있습니다. skin.html을 검색하면 'box-profile'이라는 'class'를 사용합니다. 프로필 정보 창 이미지입니다. 사이드바의 상단입니다. 알기 쉽게 파란색 박스로 블록 처리하였습니다. Odyssey 스킨을 사용한 문화재청의 블로그를 샘플로 전시하여 사용자에게 정확한 스킨 디자인 포인트를 알려 주고 있습니다. 이 프로필 창을 "Book Club" 스킨에 적용하는 요령을 설명하겠습니다. 다른 스킨 사용자는 코드를 자신이 사용하는 스킨에 맞게 수정을 해야 할 것.. 2020. 12. 27. Tistory 모바일 앱에서 구글 애드센스 광고 구현 티스토리 모바일 앱에서 구글 애드센스 광고를 보여 주기 위한 설정 방법에 대한 설명 글입니다. 카카오 티스토리 블로그에는 기본적으로 구글 애드센스와 카카오 애드핏 광고를 게재할 수 있습니다. 일정 자격을 취득한 후 등록한 광고의 뷰 혹은 클릭을 통하여 가변적인 수익을 얻을 수 있는 구조입니다. 자신이 운영하고 있는 티스토리 블로그에 광고를 등록하는 방법은 최소 4가지 이상 가능합니다. - 티스토리에서 제공하는 기본 스킨 '북클럽'을 기준으로 설명합니다. 1. 티스토리 제공 기본 스킨의 'skin.html' 파일에 광고 코드를 직접 삽입하는 방법 2. '블로그 관리 홈'의 '사이드 바'에 광고 관련 모듈을 등록하는 방법 3. '블로그 관리 홈'의 '플러그인'에서 Google Adsense와 Kakao Ad.. 2020. 12. 10. 티스토리 블로그에 구글 검색 엔진 추가 구글 애드센스 가입자는 애드센스 검색엔진을 자신의 블로그나 사이트에 등록하여 이용이 가능합니다. Google 기반 검색엔진을 내 블로그나 사이트에 손쉽게 추가하여 1. 내 블로그 글만 검색 2. 인터넷 검색 마음대로 설정이 가능합니다. 가장 유용한 기능은 블로그에 검색엔진을 장착하고 검색을 하면 검색 결과를 바로 밑에 제시하고 블로그 페이지의 본문 내용을 하단으로 위치 변동합니다. 검색 결과를 별도 페이지에 제시하는 것이 아니라 블로그 본문과 어울리게 보여 주기 때문에 검색을 하기 위하여 블로그를 벗어날 필요가 없습니다. 티스토리 북클럽 스킨 사용하고 있습니다. ※ "skin.html" 파일의 구글 검색엔진 코드입니다. 코드를 많이 수정하여 왼쪽의 라인 숫자는 일치하지 않을 것입니다. 동일한 스킨을 사용.. 2020. 11. 30. 티스토리 script.js GNB 오류 수정 ※ 2020.11.27: 블로그 반영 ※ 2024.03.26: 아래 링크한 알릭2님의 블로그에 원본 소스를 수정하는 자세한 이유와 설명이 기재되어 있습니다. 북클럽 스킨 - GNB 메뉴 현위치 버그 (tistory.com) 원본 (오류) $(window).load(function(){ $gnb.find("li").each(function(){ gnbWidth = gnbWidth + $(this).outerWidth() + 1; if ( window.location.pathname.indexOf($(this).find("a").attr("href")) != -1 ){ $(this).addClass("current"); } }); $gnb.find("ul").width(gnbWidth); if ( $gnb... 2020. 11. 18. 티스토리 블로그 코드 편집 오류를 대비한 백업 저와 같이 프로그램 언어를 전문적으로 공부하지 않은 블로거에게 적용할 수 있는 요령입니다. 다른 좋은 방법도 있을 것입니다. 제가 나름대로 사용하는 방법입니다. 블로그 편집할 때, 1. 원본 백업 2. 코드 수정 3. 수정본 백업 4. 코드 재수정 5. 재수정본 백업 이 과정을 항상 준수합니다. 정상적으로 수정한 것으로 확신하였는 데, 나중에 점검하다 보면 미처 생각하지 못한 변수를 적용하지 않아서 오류가 발생하는 페이지나 항목이 다수 발견됩니다. 그럴 때에는 이전 백업본과 현재 오류가 발생한 파일을 서로 비교하여 오류를 수정하거나 이전 버전의 파일로 교체하고 다시 그 단계부터 편집 작업을 다시 진행합니다. 북클럽 스킨에는 "style.css, skin.html, script.js"와 같은 중요 스킨 파.. 2020. 10. 9. 티스토리 북클럽 스킨 사이드바 공지사항, 댓글 길이 조정 티스토리 블로그의 북클럽 스킨에 사이드바 블록을 사용할 때, 공지사항, 최근 글, 최근 댓글의 표시 길이를 조절할 수 있습니다. 아래 이미지는 "공지사항"을 25글자, 32글자, 40글자로 조정했을 때, 블록에 표시된 글자의 길이 변화를 보여 줍니다. 여백을 최대한 활용하여 전달하는 정보의 양을 적당하게 늘리는 것이 좋겠습니다. 글자는 'Byte'를 나타내어 영어와 숫자는 1글자 1바이트, 한글은 1글자 2바이트입니다. 영어 기준으로 설정되어 있습니다. 30글자로 설정하면 한글 15글자가 들어갈 수 있습니다. 25 글자 32 글자 40 글자 "최근글"의 글자 길이와 리스트의 개수 조정 조정하는 옵션이 숨겨진 메뉴를 찾아서 들어가겠습니다. 본인의 블로그에 로그인합니다. '블로그 관리 홈 / 사이드바 '를 .. 2020. 9. 20. 티스토리 북클럽 스킨의 댓글 관련 코드 오류 일부 수정 티스토리에서 제공한 'Book Club' 스킨에 댓글 관련 코드의 일부가 누락되었습니다. 댓글의 등록, 수정, 삭제 과정에 오류가 발생합니다. 모든 오류를 수정하지는 못하고 댓글을 등록하고 새로 고침을 하지 않으면 페이지의 내용이 갱신되지 않는 증상은 고칠 수 있습니다. 수정에 필요한 정보와 소스 코드는 티스토리 관련 페이지를 참고했습니다. 티스토리 / 스킨가이드 / 댓글 티스토리, 치환자 구조, 댓글 리스트입니다. 댓글주소 수정/삭제 댓글쓰기 댓글주소 수정/삭제 Book Club 스킨, 'skin.html' 파일의 455~497 라인입니다. 더보기 댓글주소 수정/삭제 답글 더보기 댓글주소 수정/삭제 2개의 코드를 비교해 보면 북클럽 'skin.html' 파일에 2개의 오류와 1개의 차이점이 발견됩니다... 2020. 9. 13. 티스토리 블로그 "안전하지 않은 콘텐츠" 경고문 https://forbes.tistory.com/486 티스토리 "Forbes"님 블로그 링크입니다. 마이크로소프트 엣지 웹브라우저로 제 블로그를 접속했는 데, "안전하지 않은 콘텐츠", "안전하지 않음" 경고문이 뜹니다. 인터넷을 검색하고 Forbes님 블로그에서 원인을 찾았습니다. 자세한 설명이 있으니까 접속해서 읽어 보세요. 웹브라우저가 업데이트되면서 모든 비보안 접속 HTTP를 차단하는 추세입니다. 기본적으로 웹페이지의 소스를 HTTPs 보안 접속으로 로딩해야 합니다. 현재는 무조건 차단하지 않지만 앞으로는 HTTP 비보안 접속은 불가능할 것입니다. "이 웹사이트는 안전하지 않음" 경고문이 접속자에게 뜨기 때문에 블로그에 다시 방문을 하지 않게 됩니다. 이 보안 오류를 수정하려면 블로그 소스 중에.. 2020. 8. 29.
