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

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

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

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

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

Tistory Skin [웹폰트 CDN] 렉시새봄 / 이롭게바탕/ 나눔고딕 / 본고딕 / PT Sans / 서울한강 4년 전 렉시새봄 / 이롭게바탕/ 나눔고딕 / 본고딕 / 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..