티스토리 오픈그래프(Open Graph) CSS 2021. 10. 27. 티스토리 블로그에서 오픈그래프 디자인을 수정하기 위해서는 상위 부모 블록에서 하위 블록으로 선택자를 잡아 적용하면 된다. 호버 기능을 활용하기 위해서는 :hover로 적용한다. 상위 부모의 클래스가 다른 경우, 클래스명을 수정한 다음 적용해준다. 티스토리 블로그 설정 티스토리 블로그 설정 티스토리 블로그 관리자 설정 티스토리를 개설하고 처음 스킨까지 적용할 때, 어느 정도 변경해줘야 하는 설정 값이 있다. 티스토리 관리자 화면에서 어떤 부분들을 수정해야 하고, 어떤 의미를 creativestudio.kr 티스토리 블로그 만들기 티스토리 블로그 만들기 이번에는 티스토리 블로그를 어떻게 개설하고 운영하면 좋을지 간단하게 정리해보고자 한다. 티스토리 블로그는 만들기 어렵지 않다. 카카오 이메일만 있다면 다음이..

티스토리 블로그 프로필 이미지 리사이징 2021. 7. 24. 대부분의 스킨에서 썸네일 리스트에는 이미지 리사이징 적용되어 있다. 이러한 리사이징 코드들은 용량을 줄여주고 필요한 만큼의 사이즈로 적절하게 이미지를 보여준다. 크기가 줄어들지 않고 그대로 첨부한 이미지가 적용되면 웹페이지 속도가 상당히 느려진다. 4G 또는 5G 환경이라고 해도 모바일에서는 데이터 부담이 커질 수 있고 웹페이지가 로딩되는 시간이 길어진다. 그렇게 되면 검색엔진에도 악영향을 끼치게 될 수 있다. 의외로 이 문제는 쉽게 해결할 수 있다. 대부분의 이미지 치환자엔 적용되어 있지만 댓글이나 방명록에 적용된 프로필 이미지나 로고 이미지에는 리사이징 코드가 적용되어 있지 않은 경우가 많다. 또는 치환자는 블로그 프로필 이미지를 가져온다. 자신의 블로그 스킨 구조에서 프로필 이미지는 블로그 프로필 ..

티스토리 기본 웹폰트 2021. 7. 13. 티스토리의 숨겨진 폰트 스타일시트 티스토리에서는 사실 기본적으로 웹폰트를 제공하고 있다. 대부분 노토 산스, 즉 본고딕을 웹폰트로 활용하는 경우가 많은데, 아이러니하게도 티스토리에서는 기본적으로 웹폰트로 본고딕을 사용하고 있다. 그것도 다양한 굵기를 지원한다. 티스토리에서는 이러한 사실을 왜 공지하지 않는지 이해할 수 없지만, 티스토리의 기본적인 기능들을 제공하기 위한 소스가 필요하고, 이에 따라 본고딕으로 웹폰트를 지정 및 표시하고 있다. https://t1.daumcdn.net/tistory_admin/assets/blog/tistory-187d01c0d459bcea39d4cb7a696afc4a2f7af3bf/blogs/style/manage/font.css 따라서, 블로그를 꾸미기 위해 굳이 웹폰트..

티스토리 썸네일 이미지 배지 다는 방법 2021. 7. 9. 티스토리 썸네일 이미지 배지 다는 방법 - 스타일을 활용한 방법 티스토리 스킨을 꾸밀 때, 상상했던 것들이 실제로 구현되면 그만큼 또 재밌는 경우가 없다. 내 경우에도 여러 가지 방법으로 티스토리 디자인을 수정하곤 하는데, 각 티스토리 콘셉트에 맞는 요소가 다를 수밖에 없다. 기존에 썸네일 치환자로 Post-item이 뿌려지기 때문에 해당 요소에 클래스를 추가해서 간단하게 배지를 다는 방법이다. 이렇게 배지 요소를 추가한 다음에는 자바스크립트로 인기글이나 최신 글에만 적용하는 방법을 활용할 수 있을 것이다. 다만, 일단은 썸네일 이미지에 뱃지 요소를 추가하거나 기타 다른 요소를 추가하는 방법은 매우 간단하게 구현할 수 있으며, 이를 응용해서 다양한 이미지를 구현할 수 있을 것이다. 썸네일 뱃지 요소 추가..

티스토리 이동경로·카테고리 경로(Breadcrumb navigation) 적용 2021. 6. 28. 해당 적용 위치는 카테고리 리스트 페이지 내에서 적용할 수 있습니다. 카테고리 이동 경로와 카테고리 타이틀을 지정할 수 있습니다. 기본적으로 리스트 치환자를 활용하여 적용합니다. 로봇에게 사이트를 훨씬 구조적으로 인식하게 합니다. 방문자에게 쉽게 이전 카테고리로 이동할 수 있게 합니다. 카테고리 리스트와 게시글 본문에 적용할 수 있습니다. Breadcrumb은 무엇인가? 빵 부스러기라는 뜻으로 사이트 이동경로를 보여줍니다. 각 카테고리 리스트 페이지 또는 게시글 본문에 적용함으로써 사이트가 훨씬 구조적으로 보일 수 있습니다. 이는 로봇도 마찬가지이므로, 수집로봇이 사이트를 방문했을 때, 사이트를 훨씬 더 잘 수집할 수 있고 구조적으로 높은 점수를 주기 때문에 사이트의 SEO 점수도 올라가는 효과를 볼 수..

[웹폰트 CDN] 렉시새봄 / 이롭게바탕/ 나눔고딕 / 본고딕 / PT Sans / 서울한강 2021. 4. 3. 렉시새봄 / 이롭게바탕/ 나눔고딕 / 본고딕 / PT Sans / 서울한강 /* Font */ @font-face { font-family: "Iropke Batang"; font-style: normal; font-weight: 400; src: url( "https://cdn.jsdelivr.net/gh/jbfactory/jb-skin-fonts/fonts/IropkeBatangM.woff" ) format( "woff" ); } @font-face { font-family: "LexiSaebomR"; font-style: normal; font-weight: 400; src: url( "https://cdn.jsdelivr.net/gh/jbfactory/jb-skin-fonts/fonts/LexiS..

[jQuery] 티스토리 중복 댓글 방지 2021. 1. 12. 티스토리에서 버튼 입력을 누르다 보면 실수로 연달아 클릭하게 되는 경우가 있다. 이럴 때, 티스토리 댓글이 중복으로 남기게 된다. 일종의 찌꺼기가 남는 셈이다. 이를 JQuery로 버튼 클릭을 제어함으로써 중복 댓글을 방지할 수 있다. jQuery 일반적으로 티스토리 스킨들은 jQuery 2.1.3 버전을 사용하고 있는 경우가 많기 때문에 스크립트 주소가 작성되어 있다면 생략한다. 본문(body)에 적용 var fewSeconds = 3; $("button[type=submit]").click(function() { var btn = $(this); btn.prop("disabled", true); setTimeout(function() { btn.prop("disabled", false); }, few..

티스토리 저자(블로거) 프로필 카드 HTML&CSS 2021. 1. 5. 프로필 카드의 HTML 구조 게시글 본문 댓글 요소의 바로 윗 부분이나 태그 하단에 위의 HTML 구조를 적용하고, 티스토리 치환자로 블로거의 이미지인 을 삽입한다. 블로거의 닉네임은 로 적용하고, 그 설명으로는 로 구현한다. 티스토리 치환자의 적용은 게시글 본문 하단에 저자의 정보를 기입함으로써, 개인적인 블로그의 아이덴티티를 강조하고 방문자들로 하여금 블로거의 이미지를 각인시키는데 그 목적이 있다. 스타일시트의 적용 스타일시트는 각 블로그의 특징에 따라 적용하고 변형해서 사용한다. 일반적인 구조에서는 왼쪽에 이미지가 원형으로 삽입되고 왼쪽 정렬의 형태로 나란히 블로그의 닉네임과 설명이 구현된다. .permalink__author { overflow: hidden; border-top: 1px soli..

티스토리 단축키 추가방법 2020. 10. 5. 티스토리에는 기본적으로 메인에서 사용할 수 있는 단축키가 있다. 바로 관리페이지로 이동하거나 이전 글, 다음 글로 이동하는 단축키다. 사용방법은 아래와 같다. Q : 관리 페이지 / 블로그 메인 페이지 A : 이전 글 S : 다음 글 티스토리 메인에서 사용하면 해당 단축키를 사용할 수 있다. 하지만, 이외에 단축키를 추가하려면 어떻게 해야할까? 예를 들어, 자주 나의 블로그를 확인하면서 글을 쓰는 타입이라면 메인에서 단축키 하나만 눌러도 글쓰기 페이지로 이동하게 하고 싶다. 그리고 그 단축키를 ['W']로 지정할 것이다. 만약, 2차 도메인의 경우에는 앞에 도메인 주소를 입력해줘야 한다. 위와 같은 코드를 스킨편집을 통해서 작성하면 새로운 단축키를 추가할 수 있다. 같은 원리로 다른 방식의 단축키를 추가..