IT & 기타 710

티스토리 블로그 고래 스킨에 목차 자동 생성하는 방법

하루일기 님이 티스토리 스킨 중 하나인 고래 3.4에서 목차가 생성되지 않는 문제가 발생한다고 하여 고래 3.4 스킨에서 목차를 적용하는 방법에 대해 간단히 정리해보았습니다. 이 방법은 고래 스킨 4.0에서도 동일하게 적용이 가능합니다. 티스토리 블로그 고래 스킨에 목차 자동 생성하기 티스토리 블로그의 스킨에 목차를 자동 생성하는 기본적인 방법은 티스토리 블로그의 모든 글에 자동으로 목차 표시하는 방법에 자세히 설명되어 있습니다. 고래 스킨에도 마찬가지로 방법으로 적용할 수 있습니다. 다만, 약간의 수정이 필요합니다. 1. 자바스크립트 파일 및 js 파일을 로드하는 코드 추가하기 위의 글에 설명된 대로 Js 파일을 업로드하여 티스토리 블로그에서 로드하도록 바로 앞에 아래 라인을 추가합니다. (꾸미기 > ..

티스토리에서 "error":true,"errorCode":null,"data" 오류가 발생하는 경우

평소에는 댓글이 잘 올라가다가 며칠 전부터 한 이웃 티스토리 블로그에 댓글을 달면 "error":true,"errorCode":null,"data" 오류가 발생하면서 댓글이 올라가지 않는 현상이 발생하네요. 티스토리에서 "error":true,"errorCode":null,"data" 오류가 발생하는 경우 대처 방법 한 티스토리 블로그에 댓글을 달면서 댓글 본문에 URL을 추가했더니 URL 때문인지 댓글이 달리지 않았습니다. (댓글에 URL 링크가 추가되면 댓글이 달리지 않도록 설정하는 스팸 필터가 적용된 것 같습니다.) 이후부터는 해당 블로그에서만 댓글을 달려고 시도하면 다음과 같은 오류가 발생했습니다. {"error":true,"errorCode":null,"data":"\ud544\uc218 \uc..

ZenMate VPN 유료 버전 구입

ZenMate는 IP를 우회하여 접속할 수 있도록 해주는 VPN 프로그램 중 하나입니다. 찾아보면 다양한 VPN 프로그램이 있을 것입니다. 특히 우리나라에서 게임 서버를 우회하기 위해 많이 사용하는 것 같습니다. 저는 익숙한 ZenMate VPN 유료 버전을 구입했습니다. ZenMate VPN 유료 버전 구입 최근 싱가포르에서 운영되는 워드프레스 사이트를 해외 웹호스팅 중 하나인 사이트그라운드(SiteGround)로 이전하는 작업을 진행했습니다. 해당 워드프레스 사이트가 싱가포르 현지 웹호스팅 업체에서 호스팅되어 있었는데, 현지에서는 속도가 빠르지만 우리나라에서 사이트에 접속하면 속도가 너무 느려서 워드프레스 관리자 페이지에 접속하여 작업하고 백업본을 다운로드하는 데 너무 많은 시간이 소요되었습니다. 사..

IT & 기타/IT 2020.05.16

올해 들어 네이버 방문자 수가 늘고 구글 방문자 수가 줄었습니다

최근 코로나 사태 때문에 트래픽이 감소하고 일부 분야를 제외한 애드센스 광고량이 줄어든다는 내용의 해외 블로그 글을 본 적이 있습니다. 제 블로그 방문자 수를 체크해보니 올해 들어 네이버 방문자 수가 조금씩 늘고 있는 반면 구글 방문자 수가 5월 들어 크게 줄어든 것을 발견했습니다. 네이버 방문자 수가 늘고 구글 방문자 수가 감소하다 지난 1월 1일부터 엊그제까지의 구글 유입과 네이버 유입을 그래프로 표시해봤습니다. 구글 방문자 수는 4월까지 늘다가 5월 들어 크게 줄어들었습니다. 반면 네이버 방문자 수는 지속적으로 늘고 있습니다. 이 티스토리 블로그는 초기에 네이버 블로그 탭에 노출되다가 몇 년 전 네이버 검색 로직이 바뀌면서 모든 글이 웹사이트 탭으로 이동했습니다. 그 때문에 네이버 유입이 거의 제로..

티스토리 자동 목차: 블로그의 모든 글에 자동으로 목차 표시하는 방법

티스토리 블로그에 목차를 표시하려는 경우 목차 스크립트 파일을 이용하여 목차를 추가할 수 있습니다. 보통의 경우 목차를 표시할 자리에 수동으로 HTML 코드를 추가해야 하는데, 그러면 번거로울 수밖에 없습니다. 저는 H2 태그가 2개 이상인 글에 첫 번째 H2 태그 앞에 목차를 삽입하는 코드를 만들어 사용하고 있습니다. 티스토리 블로그에서 헤딩 태그가 일정 개수 이상(예: 3개 이상)인 모든 글에 목차를 생성하고 싶은 경우 아래의 방법을 이용해보시기 바랍니다. 수동으로 목차 HTML 코드를 개별 글에 추가할 필요가 없기 때문에 편리합니다. ☞고래 스킨에 목차를 자동 생성하는 방법은 티스토리 블로그 고래 3.4 스킨에 목차 자동 생성하는 방법을 참고해보세요. 티스토리 자동 목차: 티스토리 블로그에 H2 태..

티스토리에 목차 표시하는 방법 (북클럽 스킨)

티스토리에는 모든 글에 자동으로 목차를 표시하는 방법은 없지만, 원하는 글에 자동으로 목차를 삽입할 수 있습니다. 헤딩 태그를 인식하여 자동으로 목차를 생성하는 jQuery를 사용할 수 있습니다. 저는 다른 방법으로 목차를 생성하여 삽입하다 lie7님 블로그의 "티스토리 블로그 자동 목차 (TOC) 만들기" 글을 참고하여 TOC 스크립트를 바꾸었습니다. 이 글에서는 티스토리 북클럽 스킨에 목차를 표시하는 방법과 티스토리 헤딩(소제목) 스타일을 변경하는 방법에 대해 간단히 설명하겠습니다. (다른 스킨에서도 그대로 응용이 가능합니다.) ※업데이트: H2 또는 H3 태그 개수를 카운트하여 일정 개수(예: 2개 또는 3개) 이상인 모든 글에 목차를 표시할 수 있습니다. 자세한 방법은 별도의 글에서 다루도록 하겠..

티스토리 북클럽 스킨: 커버 아이템 타이틀 (소제목) 스타일 변경하는 방법

티스토리 북클럽 (Book Club) 스킨에서 스킨 편집 시 커버 아이템을 설정하고 각 커버 아이템의 타이틀을 지정할 수 있습니다. 커버 아이템 타이틀 (소제목)의 기본 스타일이 마음에 들지 않는 경우 CSS를 사용하여 커버 아이템 제목 스타일을 변경할 수 있습니다. ☞참고로 티스토리 소제목 스타일을 변경하고 싶은 경우 다음 글의 "티스토리 소제목 (헤딩) 스타일 변경" 부분을 참고해보세요. 티스토리에 목차 표시하는 방법 (북클럽 스킨) 티스토리에는 모든 글에 자동으로 목차를 표시하는 방법은 없지만, 원하는 글에 자동으로 목차를 삽입할 수 있습니다. 헤딩 태그를 인식하여 자동으로 목차를 생성하는 jQuery를 사용할 수 있습�� avada.tistory.com 티스토리 북클럽 스킨의 커버 아이템 타이틀 ..

CSS로 텍스트의 절반 높이만 형광펜으로 표시하는 방법

요즘 블로그를 구경하다 보면 텍스트에 형광펜 효과를 주는 경우를 종종 봅니다. 보통은 텍스트의 전체 높이에 형광펜 효과를 주는 배경색을 이용하거나, 밑줄 형태로 형광펜 효과를 주는 경우가 사용될 것입니다. 또 다른 방법으로 텍스트의 절반 높이에만 형광펜 효과를 주는 것도 가능합니다. 전체 높이에 형광펜 효과를 주는 것은 일반적인 백그라운드 컬러를 적용하면 되므로 여기에서는 밑줄 형태로 형광펜 효과를 주는 방법과 텍스트의 절반 높이에만 형광펜 효과를 주는 방법에 대해 간단히 설명하겠습니다. 목차 CSS로 형광펜 효과를 주는 방법 밑줄 형태로 형광펜 효과를 주는 방법 밑줄 형태로 형광펜 효과를 주는 방법은 하루일기님의 티스토리 본문 링크 부분 형광펜 밑줄 효과 글을 참고할 수 있습니다. 다음과 비슷한 CSS..

IT & 기타/CSS 2020.05.09

티스토리 북클럽 스킨: 커버 뉴스레터 아이템 썸네일 위치 변경 (오른쪽에서 왼쪽으로)

티스토리 북클럽 스킨의 스킨 편집에서 홈 설정을 커버로 지정하고 뉴스레터 아이템을 배치하면 썸네일이 오른쪽에 표시됩니다. 뉴스레터 아이템의 썸네일 위치를 오른쪽에서 왼쪽으로 변경하고 싶은 경우 간단한 CSS 코드를 사용할 수 있습니다. 티스토리 북클럽 스킨: 커버 뉴스레터 아이템 썸네일 위치 변경 방법 티스토리 북클럽(Book Club) 스킨에서 홈 설정을 커버로 설정하고 뉴스레터 아이템을 추가하면 다음 그림과 같이 썸네일이 오른쪽에 표시됩니다. 바로 옆에 사이드바가 있기 때문에 답답해 보인다면 썸네일을 왼쪽으로 이동시키는 것을 고려해볼 수 있습니다. 뉴스레터 아이템의 썸네일을 오른쪽에서 왼쪽으로 이동시키려면 다음과 같은 CSS 코드를 사용할 수 있습니다. /* 북클럽 스킨: 첫 페이지 썸네일 위치 변경..

티스토리 블로그 글 상단에 구글 애드센스 광고 2개 배치 방법

PC에서 티스토리 블로그 글 상단에 구글 애드센스 광고 2개를 나란히 배치하고 모바일에서는 1개를 배치하고 싶은 경우가 있습니다. 여러 가지 방법으로 PC에서 상단에 2개, 모바일에서 1개 광고를 표시할 수 있습니다. 티스토리 블로그 포스트 상단에 구글 애드센스 광고 2개 배치 방법 잠시 시간을 내어 PC에서는 글 상단에 2개의 애드센스 광고를 표시하고 모바일에서는 지저분하게 보여서 광고를 표시하지 않도록 바꾸었습니다. PC에서 2개, 모바일에서 1개의 광고를 표시하도록 하려면 다음 단계에 따라 광고 코드를 애드센스 플러그인이나 직접 HTML 파일에 추가하면 됩니다. 1. 광고 단위 생성하기 먼저 광고를 생성해야 합니다. 저는 300x250px 크기를 이용했습니다. 편의를 위해 300x250px 크기의 ..