티스토리 오픈 API아래 링크를 통해 API 설정을 합니다. 여러가지 이유에서 API가 필요할 수 있습니다. 한 번에 다 하는 것보다는 한 가지씩 진행하는 것이 좋습니다. 오늘은 API등록을 하는 것부터 시작하겠습니다. 아래 링크를 통해 앱등록을 진행하도록 해보겠습니다. Tistory좀 아는 블로거들의 유용한 이야기www.tistory.com오픈 API 앱등록서비스명: API를 사용하고자 하는 블로그 이름서비스 URL: 블로그 전체주소 (https://)서비스 형태: 원하는 서비스 선택 (웹서비스)서비스 권한: 원하는 권한 선택 (읽기, 쓰기)CallBack: 서비스 URL과 동일하게 입력 (https://)이상 없이 모든 값을 입력하였다면 제일 하단에 있는 등록버튼을 눌러 마무리합니다.오픈 API 앱 ..

이미지 모바일 확대티스토리 모바일에서 이미지를 보게 되면 확대해서 특정 부분을 확대해서 보고 싶을 때도 있는데요. 팝업으로 띄워서 이미지만 볼 수는 있지만 확대는 되지 않아 뭔가 2% 부족한 느낌. 그래서 찾았습니다. 간단하게 아래 코드만 수정해 주시면 이미지를 확대해서 볼 수 있는 기능을 사용할 수 있습니다.이미지 확대 코드티스토리 HTML편집 화면에서 Ctrl + F를 눌러 viewport를 찾습니다. viewport 찾고 아래 안내해 드리는 코드로 교체하시면 되는데 뭔가 불안하신 분은 기존 소스를 삭제하지 말고 감춰두고 사용하세요. 그리고 아래 코드로 대체하시면 되겠습니다.결과확인 및 팁코드를 교체하시고 모바일에서 이미지를 확인해 보시면 이쁘게 확대기능이 되는 것을 확인하실 수 있습니다. 간단한 방..

방문자 카운트 효과티스토리 블로그를 꾸미다가 보면 신기한 기능을 많이 발견하고는 합니다. 그중에 방문자 카운트가 숫자만 보여주는 것이 아니라 애니메이션처럼 보여주는 것도 신기했습니다. 카운트 애니메이션 효과를 적용방법을 알려드리도록 하겠습니다. Github 참고하였습니다. GitHub - bfintal/Counter-Up: Counter-Up is a lightweight jQuery plugin that counts up to a targeted number when the number becomCounter-Up is a lightweight jQuery plugin that counts up to a targeted number when the number becomes visible. - GitH..

Lazy LoadingLazy Loading은 페이지 렌더링 시점에 중요하지 않는 리소스 로딩을 추후에 필요할 때 로드가 되도록 하는 것을 말합니다. 한 마디로 블로그 속도개선에 도움되는 효과입니다. 큰 효과를 볼 수 있는 것은 아니지만 데이터는 쌓이고 쌓여 좋은 결과를 낼 수 있기 때문에 미리 준비해 두면 좋을 것으로 예상합니다. 그럼 적용방법에 대해 알아보겠습니다. 일단 아래 파일을 다운로드하여 티스토리 스킨에 업로드합니다.더보기적용방법파일을 업로드하셨다면, 파일의 링크 주소를 복사하여 아래 스크립트 해당 위치에 붙여 넣어 줍니다.링크주소를 붙여 넣고 완성된 스크립트는 HTML편집 사이에 붙여 넣습니다. 완성되었습니다. 확인해 보시면 크게 다른 점은 못 느끼실 수 있으나 아주 좋은 효과를 얻으셨습니..

카테고리 괄호 지우기티스토리 카테고리에 기본적으로 적용되어 있는 괄호()를 지우고 원하는 스타일로 바꾸는 방법입니다. 자신의 블로그의 class명과 id명 확인을 합니다.확인을 하셨으면, #category c_cut 부분을 자신의 스킨에 맞게 수정하여 /body 위쪽에 붙여 넣습니다.카테고리 괄호 디자인이제 괄호는 삭제되었습니다. 이제 아래 CSS 코드 작성으로 괄호대신 사용할 자신만의 디자인을 합니다./* 카테고리 글 수 커스텀 */#sidebar #category .tt_category .link_item .c_cnt,#sidebar #category .tt_category .link_sub_item .c_cnt { font-weight: initial; --tw-bg-opacity: .1; b..

애드센스 검색버튼 삭제구글 애스센스에서 제공하는 버튼인 건 알겠다. 그런데 왜 달렸는지는 모르겠다. 블로그 화면에 보이는 위치가 거슬린다. 그래서 안 보이게 하기로 했습니다. 검색 버튼이 왜 달렸는지 아시는 분은 댓글로 알려주시면 감사하겠습니다.검색 버튼 제거 코드/* 구글 검색 버튼 제거*/.auto-prose-wrapper, .autoprose-search-button { display:none !important;}검색 버튼 삭제 방법은 티스토리 CSS 편집에 위 코드를 넣어주시면 안보입니다.

티스토리 목록 광고티스토리 스킨을 사용하다가 보면 목록 상단광고와 하단에 치환자가 없는 경우가 있습니다. 그때 치환자를 수동으로 추가하여 광고송출을 할 수 있는 방법입니다.상 하단 치환자// 목록 상단 치환자[#_revenue_list_upper_#]// 목록 하단 치환자[#_revenue_list_lower_#]티스토리 목록 광고 치환자 사용 시 양쪽에 #하나씩 추가하셔서 사용하세요.치환자 위치 찾기// 목록 치환차 찾기[_list_conform_]티스토리 Html 편집에서 Ctrl + F를 눌러 치환자 위치를 찾습니다. list_conform 기준으로 위쪽이 상단 아래쪽이 하단입니다. 목록 하단의 경우 각 스킨마다 다를 수 있습니다. 천천히 위치를 찾아 광고 치환자 코드를 입력하세요.마무리목록 상단과..

빙 웹마스터 도구티스토리 블로그 또는 웹사이트 관리를 위해 빙 웹마스터 도구를 활용하면서 가장 많은 발생을 하는 오류 중 하나인 "너무 짧은 제목" 해결방법을 알아보겠습니다.사이트 검사를 통해 원활한 URL을 제공하려고 하였으나 아래 이미지와 같은 오류가 발생합니다. 이유는 '너무 짧은 제목'이라는 SEO 문제였습니다.오류 발생 이유   무엇에 관한 문제입니까? 이 페이지의 제목 길이가 15자 미만입니다. 제목이 너무 짧으면, 페이지의 관련성을 이해하는 데 필요한 정보를 당사와 사용자에게 충분히 제공하지 못할 수 있습니다. 어떻게 수정하나요? ..

모바일 비활성화 왜 하나?티스토리 모바일웹은 스킨 편집이 불가능합니다. 거의 대부분 티스토리 사용자들은 반응형 블로그를 사용하고 있습니다. 하지만 티스토리는 모바일 비활성화 대한 방법을 제공하지 않습니다. 모바일웹을 비활성화하게 되면 일관된 디자인을 보여줄 수 있습니다.다른 블로그 자료와 다른 점다른 블로그에서 제공하는 코드의 경우 게시글은 리디렉션 되지만 홈페이지는 모바일웹으로 보이는 경우가 많습니다. 하지만 지금 제공해 드리는 코드는 위와 같은 문제가 없습니다제공하는 코드의 장점모바일 웹 홈페이지에 접속해도 PC버전으로 리디렉션 됩니다. 티스토리 어플을 사용하셔도 모바일 화면으로 보이지 않습니다. 개발자 콘솔 오류가 발생하지 않습니다.비활성화 적용방법아래 자바스크립트 코드 파일을 다운로드합니다. 스크..

페이드인 효과지금 저의 티스토리 블로그에는 Fade-in 효과가 적용되어 있습니다. 게시글을 표현할 때 가장 예쁘게 표현할 수 있는 방법이 아닐까 생각합니다. 저와 같은 생각을 가지고 계신 분들에게 이글이 도움이 되었으면 합니다./*이미지 스크롤 효과*/figure.imageblock,#tt-body-page figure.imageblock,.image-container { opacity:0;}위에 있는 CSS 코드를 복사하여 스킨편집 CSS 영역에 붙여 넣어줍니다. Fade-in 기능이 적용되는 범위는 이미지와 이미지를 2~3장 붙여 나열하는 imageblock과 container 두 가지입니다.페이드인 적용 방법 위코드는 HTML 편집영역에서 코드 바로 위에 붙여 넣어주시면 완료입니다.페이드인 ..

자동화의 필요성같은 작업을 반복하다 보면 점점 익숙해져 실수가 줄어들게 됩니다. 하지만 가끔 순간적으로 작업을 빠뜨리는 경우가 생기곤 합니다. 예를 들어, SEO 최적화를 위해 "alt" 태그를 입력해야 하는데, 이를 잊어버리는 일이 발생할 수 있습니다. 이런 실수를 방지하기 위해서는 자동화 방법을 찾아보는 것이 효과적일 수 있습니다. 자동화 도구나 스크립트를 활용하면 반복적인 작업을 더 효율적으로 관리할 수 있고, 실수를 최소화할 수 있습니다. 이렇게 하면 작업의 일관성을 높이고, 더 나은 결과를 얻는 데 도움이 될 것입니다.Alt 지동 입력 스크립트위 코드는 티스토리에 첨부된 이미지에 alt 태그를 자동을 입력해 주는 기능을 가지고 있습니다.적용방법자신의 티스토리 스킨폅집에 접속합니다.HTML편집 >..

unicode-range 활용웹 디자인에서 다양한 언어와 문자에 적합한 폰트를 적용하는 것은 사용자 경험을 향상하는 중요한 요소입니다. 이 글에서는 CSS의 unicode-range 속성을 사용하여 한글, 영어, 숫자에 각각 다른 폰트를 적용하는 방법을 설명하겠습니다.unicode-range란unicode-range는 CSS 디스크립터로, @font-face로 정의된 폰트를 특정 문자 범위에 적용할 수 있도록 설정합니다. 이를 통해 언어별로 적합한 폰트를 선택적으로 사용할 수 있습니다.유니코드 범위 예시다음은 다양한 문자 범위를 나타내는 유니코드 예시입니다.기본값: U+0-10FFFF (모든 글자에 적용)영문, 숫자, 특수문자: U+0020-007E영문 대문자: U+0041-005A영문 소문자: U+00..