더보기
티스토리 팁
스킨 편집을 되돌리는 방법 (초기화)
스킨을 잘못 편집한 경우 되돌릴 방법은 거의 없습니다. 하지만 방법은 몇 가지가 있습니다. 주로 CSS를 자유롭게 다루지 못하는 초보자가 겪을 수 있는 상황인데 몇 가지 방법을 소개해보려고 합니다. 초기 스킨의 CSS를 활용 처음 등록한 스킨의 CSS는 아래의 방법으로 저장가능합니다. 티스토리 관리자 페이지에 접속합니다. "꾸미기" - "스킨 변경"에 들어갑니다. "다운로드"를 누르면 사용중인 스킨의 초기버전이 다운로드 됩니다. 초기 업로드한 스킨을 사용하면 중간에 바꾼 변경작업들이 모두 날라가니 주의해야합니다. 많이 바꾸지 않았다면 이 방법을 권장합니다. Google 색인된 데이터를 이용한 방법 (3시간 이내에만 가능) 구글에 "site:블로그 주소"를 검색합니다. 먼저 개발자도구(F12)를 켠 뒤 "..
"티스토리의 더 나은 광고를 위한 안내" 공지 대응하기
원글은 https://notice.tistory.com/2608 이곳에 있습니다. [중요] 티스토리의 더 나은 광고를 위한 안내 광고의 품질은 콘텐츠의 소비와 직결됩니다. 구글 서치콘솔의 환경보고서에서 "더 나은 광고 표준 위배로 인한 광고 필터링" 안내 메시지가 있었습니다. 구글 크롬 정책상 루트도메인 단위로 표 notice.tistory.com 설명이 조금 미흡하다 보니, 블로거들이 댓글로 다시 문의하네요. 화면의 30퍼센트 면적 초과? 브라우저에서 f12를 눌러 콘솔(Console)에서 다음 코드를 실행하면 화면 면적의 몇 퍼센트인지 확인 가능합니다. 대부분의 자동 광고 사용유저와 글자 수 1000자당 1~2개를 넣는 블로거라면 문제없습니다. PC에서 3000자에 15개 넘게 넣어야 간당간당한 것 ..
티스토리 댓글 차단 팁
티스토리를 운영중이라면 댓글 차단 한번쯤 이용해보셨을 수 있습니다. 어떻게 차단할지 감이 안잡히시거나, 작성자 차단/IP 차단 무엇을 해야될 지 모르겠다면 이 글을 읽어주세요. 댓글 차단 방법1 댓글 차단은 티스토리 관리페이지의 댓글·방명록 -> 댓글 관리 및 방명록 관리에서 가능합니다. 댓글 목록에 마우스를 올려보면 차단버튼이 있습니다. 작성자 차단과 IP차단을 선택할 수 있습니다. 방법2 댓글 차단은 티스토리 관리페이지의 댓글·방명록 -> 설정에서 또한 가능합니다. 스팸필터에서 IP 차단, 사이트 차단, 본문, 이름을 차단가능합니다. 각 필터에 대해 알아봅시다. IP 필터링 : 입력한 값(리스트)과 정확히 일치하는 IP의 댓글을 차단합니다.(특정 IP의 방문 차단이 아님) 사이트 필터링 : 티스토리 ..
사이트맵 관련 구글 문서 오류
오류 발견 계기 최근에 큰 사이트맵이 필요한 다른 사이트를 새로 개설했는데 사이트맵 관련하여 오류가 여러번 나길래 공식문서상 규칙을 모두 지켜도 오류가 나더군요. 공식문서상에 잘못된 부분을 확인하였습니다. 구글은 사이트맵 제한을 크기 50MB이하와 URL 50,000개 이하로 제한한다고 안내합니다. 이 의미는 두가지 조건을 모두 충족해야한다는 의미입니다. 영어문서에서도 이와 유사하게 설명되어있습니다. 무엇이 잘못되었는가? 실제로 구글의 사이트맵 제한은 크기 10MB이하 그리고 URL 50,000개 이하입니다. 50MB라면 이것저것 많은 태그들을 사용가능하지만 10MB라면 url과 추가로 태그 하나정도 더 쓸수밖에 없는 양입니다. https://hi098123-skin.tistory.com 2020-09-..[중요] 티스토리 API의 Implicit 방식의 제거 이유?
티스토리에는 OPEN API라는 기능이 있습니다. 외부 프로그램에서 티스토리에 글을 작성하거나, 수정등 티스토리 활용을 도와주는 기능입니다. 최근(2020-09-02)에 Implicit 인증방식이 제거되었던 이유는 바로 보안문제 때문이었습니다. 어떤 보안 문제가 있었나? 악의적인 해커는 여러분의 티스토리 글을 모두 스팸으로 바꾸거나 모두 삭제하거나 스팸글을 새로 작성 할 수 있었습니다. 현재는 임시로 Implicit 방식을 제거하여 방지가 되나, 사용자가 모르고 클릭하는 경우 문제가 발생할 수 있습니다. 아래 링크에 자세히 설명하였으며, 확장프로그램등 방화벽으로 API관련 주소를 막으면 전혀 문제가 없습니다. 관련글 hi098123.tistory.com/327 티스토리 API 보안 취약점 공격 난이도 쉬..
더보기
티스토리 HTML
티스토리 에디터 html 코드 넣기
생긴지는 한두달 된 기능인것 같은데, 따로 홍보도 없고 안내도 없어서 이번에 이걸 사용해서 글을 작성한 김에 내용을 소개하려고 한다. 티스토리 HTML블럭 티스토리 에디터의 고질적인 단점. html코드를 수정후 기본모드에서 편집시 일부 코드가 사라진다. 처음 봤을때 이걸 방지하려고 만든 기능임을 짐작했다. 조금전 작성한 글에서 이 기능을 사용했는데 결과는 아래와 같다. 에디터상의 코드 결과로 출력되는 코드 원리라고 하면 이런것 같다. 에디터가 코드블럭은 안건듦 코드블럭 내에 사용자 입력 html 데이터를 별도로 저장 글을 열람시에는 서버에서 처리되어 html데이터를 그대로 출력 이런 기능은 잘 만든것 같다. https://tistory.hi098123.com/36 이런 글에서의 html 본문 코드 활용을..티스토리 스킨 변경사항, 광고 치환자
12일 전, 티스토리 스킨 관련 문서가 변경되었습니다. 수익 메뉴 관련하여 치환자가 새로 생겼는데, 무엇이 바뀌었나 알아봅시다. 공통 광고치환자 revenue_list_upper : 블로그 홈/목록 상단 revenue_list_lower : 블로그 홈/목록 하단 위의 두 가지 항목이 추가되었습니다. RSS구독 태그 방명록 사용 예시는 위와 같고, 블로그 홈 화면의 광고를 관리하는것으로 보입니다. 아마도 적용되는 광고를 치환하는 예시인것 같습니다. 문서가 그닥 친절하지 않아서 + 저는 수익 메뉴를 연동하지 않아서 따로 설명드릴수있는 내용이 없을것 같습니다. 이 내용을 잘 아시는 분은 댓글로 남겨주세요.
티스토리에서 리스트 활용법
티스토리에서 글을 쓸때 저는 리스트 태그를 많이 사용합니다. 주된 이유로는 검색엔진이 받아들이기 쉬운 태그여서 그냥 글로 풀어쓰는것 보다 좋기 때문입니다. 로봇은 1., 2.과 같이 의미없는 글을 싫어하기도 합니다. 대신에 태그를 사용하면 로봇의 이해도 쉬워집니다. Google에서 스니펫에 올라가는 경우 태그의 내용을 우선적으로 색인하기도 합니다. 리스트 기본 활용법 그냥 순서대로 글을 쓴 뒤 리스트를 눌러 리스트를 생성하거나, 리스트를 누른 뒤 내용을 추가 할 수 있습니다. 글을 드래그합니다. 상단 글 메뉴에서 리스트를 누릅니다. 완성! 리스트 중급 활용법 리스트 안에 리스트를 넣고 싶다면 어떻게 할까요? 일단 리스트를 생성하고 글을 선택하고 키보드의 Tab키를 누르면 리스트의 자식으로 만들 수 있습니..
움직이는 이미지 mp4로 표시하기
GIF는 MP4에 비해 모든면에서 안좋다. 화질 용량 최적화 CPU사용량 때문에 GIF이미지를 mp4로 변경하여 사용하는 사이트가 요즘 늘어나는 추세다. FFMPEG와 같은 미디어인코더를 통해 서버에서 GIF를 MP4로 변환시키거나. 사용자 브라우저에서 WASM기술을 이용해 인코딩할수도 있다. 이렇게 변환한 파일을 gif.mp4라고 가정하고 설명한다. GIF를 MP4로 변환했다면 아래와 같이 mp4파일을 autoplay loop muted playsinline 옵션을 준다면 GIF와 동일하게 동작한다. Video태그 각 옵션에 대해 설명 autoplay 자동재생을 한다. GIF도 로딩과 동시에 움직이는 이미지로 보인다. loop 무한 반복을 한다. 보통 GIF는 무한반복을 이용한다. muted 음소거를 ..
HTML 기초 : title attribute 툴팁을 만들자.
이번 글의 주제는 title 속성값이다. title태그와는 다른 속성에 들어가는 값이다. 들어가기 앞서.. HTML 속성(attribute)이란? hi098123-skin:타이틀 속성 위와 같은 html 구조에서 href="URL", target="_blank" 부분을 의미한다. href는 속성(attribute)으로 a태그에서 어디로 향할지 주소를 입력할 수 있다. href의 값(value)은 https://hi098123-skin.tistory.com/29 로 웹 주소이다. TITLE 속성(attribute) 알아보기 여기의 title은 hi098123-skin 이에요 미리보기 여기의 title은 hi098123-skin 이에요 title 속성(attribute)에 적힌 hi098123-skin이라는..
더보기
티스토리 CSS
티스토리 이미지 유튜브 링크 꾸미기
흔히 유튜브를 공유할때 퍼가기 기능을 이용해서 공유를 합니다. 그러나, 이렇게 공유시 유튜브 리소스를 로딩하여 사이트 속도가 약간 저하될 수 있는데 사이트 내에서 영상을 재생해야하는 경우 위 방법을 어쩔수 없지만 사용해야됩니다. 유튜브로 이동하여 시청하게 할 때 이 글은 사이트(또는 티스토리 블로그) 외부로 나가 유튜브에서 시청하도록 하는 경우에만 해당됩니다. HTML구조가 아래와 같을때 (일반적인 티스토리 이미지 구조) figure a img CSS를 아래와 같이 설정합니다. figure>a[href*="//www.youtube.com"]:before, figure>a[href*="//youtube.com"]:before, figure>a[href*="//youtu.be"]:before{ positio..티스토리 접은글 꾸미기
접은글 티스토리의 접은글 문구를 바꾸고 싶은데 못바꾸시는 분들 많을것으로 생각됩니다. CSS 코드만으로 접은글에 들어갈 문구를 바꿀 수 있습니다. 원리를 보면 기존 글자는 배경색으로 만들어서 안보이게 만들고(또는 font-size:0과 같이 만들고 :before 기능을 이용해서 글자를 넣는 방법입니다.) div[data-ke-type='moreLess'] a.btn-toggle-moreless, #tt-body-page div[data-ke-type='moreLess'] a.btn-toggle-moreless{ color:transparent; /*또는 font-size:0*/ } div[data-ke-type="moreLess"].open>a.btn-toggle-moreless:before { cont..간단하고 깔끔한 제목 CSS로 꾸미기
제목을 간단하고 깔끔하게 꾸며보고자 합니다. 여러 디자인이 있겠지만 아래와 비슷한 느낌으로 꾸며보고자 합니다. 제목 CSS 코드 border-left 값으로 왼쪽 엣지를 꾸밀것이고 background-color로 배경색상을 줄것이고 padding으로 내부 여백을 줄것입니다. border-left 저는 PC, Mobile 모두 5px이 깔끔해보여서 5px으로 설정해보았습니다. border-left: 5px solid #FF9800; background-color 원하는 색상을 입력하시면 됩니다. background-color: #FFF3E0; padding 내부 여백입니다. 저는 10px이 깔끔한것 같아 10px으로 설정하였습니다. padding: 10px; 미리보기 제목 미리보기 h2{ padding: ..
티스토리 링크 미리보기, 투명이미지 버그 고치기
티스토리 링크 미리보기 티스토리에 링크를 걸고 링크 문장에서 엔터를 치면 아래와 같은 미리보기가 뜹니다. 위의 두 사진에서 차이가 보이시나요? 1번 이미지는 기본형태고, 2번 이미지는 이 글에서 소개할 내용을 적용한 이후의 이미지 입니다. 네 그렇습니다. 기본형태에서 티스토리 아이콘이 겹쳐보이네요. 이는 썸네일 이미지가 투명배경일때 발생하는 버그입니다. 투명 이미지 버그 고치기 투명색상 썸네일인경우 미리보기 이미지가 겹쳐보이는 문제가 발생하는데 위의 상황을 말끔히 없애줄 단 한줄의 코드가 있습니다. 관리 페이지에서 "꾸미기" - "스킨 편집"에 들어갑니다. HTML 편집에 들어갑니다. CSS에 들어가서 다음의 코드를 입력하시고 적용을 눌러 설정을 저장합니다. 코드는 아래와 같으며 복사가능합니다. figu..
CSS Selector로 외부링크 선택하기
CSS를 보통은 초보자가 배우고 쓰기 때문에 CSS Selector OOO 선택하기 시리즈로 글을 써볼까합니다. 이 글은 링크()중 외부링크만 선택하는 방법입니다. 선택에 앞서 기초내용부터 한번에 다룹니다. 때문에 잘 몰랏어도 한번 정독하면 사용할 수 있을것입니다. CSS의 외부링크 선택법 사실 저는 초보자를 위한 글을 잘 쓰지 못합니다. 그냥 방법을 순차적으로 쓸것인데요. 공부에는 도움이 되지는 않아도 실제 쓸때는 도움은 될겁니다(?) 먼저, 태그 선택법 a{text-decoration: none;} Selector 자리에 태그명을 입력한다면 입력한 태그가 선택된다. 위의 코드는 a태그를 선택하여 스타일로는 글자 꾸미기 = none 를 줬다. 둘째, Attribute 선택방법 (속성 선택자) a[hre..
더보기
티스토리 JS
[2022년 11월] 티스토리 변경사항에 따른 유저 스크립트 소스 변경 필요사항
기존 DOMContentLoaded로 작동하던 코드는 document.addEventListener('DOMContentLoaded', function); 앞으로는 readystatechange에서 확인해야 안전합니다. document.addEventListener('readystatechange', function(event) { if(document.readyState=='complete'){ //기존 function } } 티스토리 UI관련 코드들이 모두 defer(IE9+)형태로 변경되어, 비동기로 로딩되어 실행되는데.. 비동기로 실행되는 UI변경은 DOMContentLoaded이후에도 실행되어 충돌가능성이 있습니다.
티스토리 이미지를 Avast가 차단한다?
어제 티스토리 이미지가 Avast백신으로 부터 차단된다는 의견을 보았습니다. 당연히 Avast가 잘못 차단한것으로 보이는데, 방법은 Avast가 블랙리스트를 제거하거나 티스토리에서 다른 url으로 이동하는 방법도 있습니다. 티스토리같은 블로그 단점이 같은 도메인을 사용하기 때문에 일부 제재해야될것을 전체로 받는경우가 가끔있는것 같습니다. 저는 Avast백신을 안써서 잘 모르겠는데 이렇게 해결될거같다면 댓글남겨주세요. 이 문제는 해결 되었습니다. 문의도 해놓았었는데 공식적으로 답장이 왔습니다. 다음카카오는 알고 있을까요? 다음(daum.net)의 메인에서도 img1.daumcdn.net을 사용하는데요. 어베스트 백신이 img1.daumcdn.net을 차단한 이후일것으로 추정되는데, 일부 이미지를 img2...iframe간 CORS무시? postMessage
다른 도메인이어서 CORS가 걸려있어도 로딩한 iframe과 통신할 수 있는 한가지 방법이 있다. (window.open 팝업등도 가능하다.) 대신 두 통신할 도메인 여기에서는 aa.com과 bb.com으로 예를 들겠다. aa.com bb.com : CORS aa.com bb.com : X-frame-options "allow-from https://aa.com/" iframe으로 통신시 서버상에서 iframe을 로드할수없게 만드는 기능이 꺼져있어야된다. postMessage targetWindow.postMessage(message, targetOrigin, [transfer]); targetWindow targetWindow의 예시로는 아래의 내용이 있다. Window.open (새 창을 만들고 새 ..
티스토리 2차도메인 댓글 문제 임시 해결하기
간단 해결 방법 다음의 코드를 스킨편집 - HTML편집에서 넣어줍니다. head, body 어디든 상관없습니다. HTML 삽입 미리보기할 수 없는 소스 2020-08-07 업데이트 : 어디에 위치하던 동작하나 body의 맨끝에 위치시 조금더 실행속도가 빨라집니다. 적용을 한 후 2차도메인 티스토리에 접속하면, 댓글달기를 알아서 찾아 다음 문구를 보여줍니다. 티스토리 로그인이 해제 되었나요? 로그인하여 댓글 남기러가기 로그인 버튼을 클릭하면 "000.tistory.com/주소"로 연결됩니다. (로그인이 안되어있다면, 티스토리 로그인 페이지로 이동합니다. 직접유입으로 표기될 수 있습니다.) 연결 후 바로 댓글달기 위치로 자동으로 스크롤 됩니다. 디자인을 변경하시려면 해당 질문 상자는 아래의 구조를 가집니다...
티스토리 댓글에 링크달기
이전에 작성한 글이 있어서 링크를 겁니다. hi098123.tistory.com/215 티스토리) 댓글에 링크 달기 댓글에 링크를 달 수 없을까? 아래와 같이 간단한 소스로 만들수있다. newTab (새탭으로 열기 true,false) comm 값 (CSS selector와 같은 방식으로) whitelist 값 (자바스크립트 배열 [] 로) 변형해줘야됩니다. 3 hi098123.tistory.com 페이지 하단에 아래의 script를 넣으면 댓글에 링크가 걸립니다. 아래의 whitelist설정에 따라 자신의 블로그 링크만 링크가 걸립니다. (function() { var newTab=true; // 새 탭으로열기 true, false var comm=document.querySelectorAll(".co..
더보기
티스토리 설정
티스토리 글 URL (숫자, 문자) 설정하기
티스토리의 글은 두 종류로 URL 사용 가능합니다. 숫자 주소 문자 주소 설정 방법 관리 페이지에서 관리-블로그에 들어갑니다. 주소 설정에서 원하는 주소형태로 사용가능합니다.
티스토리 2차 도메인 연결하는 법
티스토리에는 2차 도메인 설정이 가능합니다. 설정중 연결이 안 되거나, SSL 발급이 안 되는 등 오류가 발생할 수 있습니다. 오류가 왜 발생했는지, 어떻게 해결되는지도 다룹니다. 어떻게 할수있나요? 만약, 이렇게 뜬다면? 도메인의 설정 정보를 확인할 수 없습니다. DNS 서비스의 설정 정보를 다시 확인해주세요. DNS 설정은 이렇게 이해하시면 쉽습니다. DNS(Domain Name Service : 전화번호부와 유사)는 도메인을 ip와 매칭 시켜줍니다. google.com은 2020-08-24 기준 따라 다음의 ip를 가집니다. 172.217.12.174 (미국) 172.217.175.110 (한국에서 접속하는 일본 서버 중 하나) 이외에도 많습니다. DNS를 등록해서 도메인과 서비스가 연결되었더라도 ..
RSS 50개 설정하기
RSS는 Sitemap과 비슷하게 검색엔진에 도움이 될수있습니다. 관리 -> 블로그 -> 기타 설정 -> RSS 50개 -> 저장을 하면 된다. 글로는 복잡한데 아래의 사진으로보면 한눈에 보인다. RSS설정시 크롤러가 쉽게 사이트에 접근이 가능합니다. RSS가 어떤 역할을 하나요? 사이트의 여러 페이지 주소와 글(제목, 내용, 작성일, 작성자, 카테고리 등)을 포함하고 있습니다. 크롤러가 웹 사이트를 알기 쉽게 도와주는데요 더 쉽게 비유를 한번해보자면, 크롤러는 시험을 보는 학생이라 한다면? RSS는 시험 족보라고 보시면 좋을것 같습니다. 웹 사이트를 파악하는데 많은 도움이 됩니다.
모바일 페이지 제거하기
티스토리 관지자 페이지에 접속합니다. 꾸미기 박스에 있는 모바일에 들어갑니다. 사용하지 않습니다. 설정 후 저장 왜 모바일 전용페이지를 안쓰나요? 여러 이유가 있을 수 있습니다. 대표적인 이유는 아래에 나열해보겠습니다. 꾸며진 모바일 스킨을 사용하기 위해 반응형 스킨인 경우 꾸며진 모바일 스킨을 사용하기 위함이 있습니다. 반응형으로 만들었는데 기본 티스토리 모바일버전을 사용하긴 좀 그렇죠.. (당연히 원하는 디자인으로 꾸며진 페이지를 쓰면 좋습니다.) 검색 순위 향상을 위해 검색엔진에 다른 페이지로 두개가 등록되기 때문에 검색이 분산되어 순위오르기 어려울 수 있습니다. 같은 내용으로 /주소 /m/주소 이렇게 두개가 경쟁을 하기 때문에 사용자가 분산되어 검색엔진에서 순위는 오르기 어려울 가능성이 큽니다. ..