반응형 ▸티스토리 이야기/•티스토리 꾸미기49 티스토리 북클럽 스킨 I 본문 상단 타이틀 수정 및 사이드바와 피드 여백 조정 방법 본문 상단 타이틀 및 여백 조정 방법 티스토리는 다른 블로그와의 다르게 HTML 형식으로 스킨의 변환이 가능합니다. 이번에는 가장 기본적으로 가독성을 높이기 위한 본문 타이틀(제목)을 수정하는 방법을 간단히 알아보겠습니다. 목차 본문 상단 타이틀 수정하는 방법 먼저 아래에 보이는 4곳을 수정하는 방법을 알아보겠습니다. 1. '관리자 홈'에서 '꾸미기 > 스킨 편집 > html 편집 > CSS'로 들어갑니다. 2. CSS에서 Ctrl + F를 이용해 post-cover { 를 검색합니다. post-cover { 3. 변경할 내용은 아래와 같습니다. ① 타이틀(배경화면) 높이 조절 1045번 줄 근처 height: 340px; / 340px 값을 내릴수록 타이틀 높이가 줄어듭니다. (200px 이하 설정이 .. 2023. 3. 7. 티스토리 I 로딩 이미지 만들기 · 로딩 이미지 다운로드 사이트 목차 ·로딩 이미지 코드 추가하는 법 ·로딩 이미지 다운로드 사이트 티스토리에 애드센스 광고를 게재하면서 광고 때문에 포스팅 내용이 늦게 나오는 경험 있지 않으셨나요? 사용자가 원하는 내용을 검색해서 들어왔는데 보고 싶은 내용이 늦게 뜬다면 사이트에 계속 있고 싶지 않을 거예요. 그럼 자연스럽게 사이트 밖으로 나오면서 이탈률이 높아질 수밖에 없습니다. 이런 식의 이탈률을 줄이는 방법으로 로딩 이미지 사용하는 것을 추천드립니다. 포스팅 내용이 나올 때까지 움직이는 이미지가 보임으로 지루함을 줄이고 이탈률도 줄일 수 있습니다. 유료 스킨에는 종종 이런 로딩이미지를 보았는데 무료 스킨에도 적용하는 법을 알게 되어 공유합니다. 로딩 이미지 다운로드 사이트 제일 먼저 로딩에 사용할 이미지를 구해야 합니다. 로딩 .. 2023. 3. 7. 티스토리 북클럽 스킨 I 이미지 지연 로드 설정 방법 티스토리 북클럽 스킨 I 이미지 지연 로드 설정 방법이번에는 티스트로 북클럽 사용자를 위한 꿀팁입니다. 바로 레이지 로딩 (이미지 지연로드) 설정 방법에 대해 자세히 알아보는 시간 가지도록 하겠습니다.이미지 레이지 로딩 (이미지 지연로드)를 설정하는 이유.사이트 속도 개선: 레이지 로딩을 사용하면 페이지가 스크롤되며 이미지를 로딩하기 때문에 사이트 속도가 빨라집니다. 기존에는 페이지 로딩 시 모든 이미지를 한꺼번에 불러와야 하므로 시간이 많이 걸렸지만, 레이지 로딩을 설정하면 실제로 필요한 이미지만 로드되기 때문에 속도가 향상됩니다.구글 SEO 개선: 사이트 속도가 빨라지면 구글 SEO에서도 좋은 평가를 받아 검색 결과 상단에 노출될 가능성이 높아집니다. 많은 분들이 이 방법을 모르거나 설정이 어려워서 .. 2023. 3. 5. 티스토리 북클럽 스킨 I 커버 아이템 뉴스레터 썸네일 정사각형으로 변경 목차 커버 아이템 뉴스레터 썸네일 정사각형으로 변경 홈 설정에서 커버를 선택하고, 커버 아이템을 뉴스레터로 설정 후 뉴스레터의 썸네일 사진의 비율이 마음에 들지 않는다면. HTML과 CSS를 수정하여 아래처럼 직사각형의 썸네일을 정사각형으로 변경할 수 있습니다. 뉴스레터 썸네일 CSS 편집 북클럽 스킨 테마는 썸네일 이미지가 책 표지 비율을 띄고 있습니다. 이 형태도 나쁘진 않지만, 기본적으로 통용되는 1:1 비율의 정사각형 썸네일을 만들어 보도록 하겠습니다. 1. '관리자 홈'에서 '꾸미기 > 스킨 편집 > html 편집 > CSS'로 들어갑니다. 2. ctrl + F 를 눌러서 cover-thumbnail-2 ul li figure 를 입력하여 아래 코드 부분을 찾습니다. cover-thumbnail.. 2023. 3. 2. 티스토리 북클럽 스킨 I 본문 카테고리 썸네일 정사각형으로 수정하기 북클럽 스킨의 장점은 다음과 같습니다.깔끔하고 세련된 디자인 북클럽 스킨은 책을 읽는 느낌을 강조하는 디자인으로, 깔끔하고 세련된 느낌을 주어서 사용자들이 더욱 집중할 수 있도록 도와줍니다.커스터마이징이 용이 북클럽 스킨은 사용자가 쉽게 커스터마이징 할 수 있는 기능들을 제공합니다. 사용자는 색상, 글꼴, 배경 이미지와 커버 홈화면 등을 조정하여 자신만의 독특한 블로그를 만들 수 있습니다.모바일 반응형 북클럽 스킨은 모바일 환경에서도 적절하게 노출되도록 반응형으로 디자인되었습니다. 따라서 모바일 사용자들도 편리하게 블로그를 이용할 수 있습니다.이런 이유 등으로 많은 사람들이 처음 블로그를 시작하시는 분들에게 추천하는 스킨 중 하나입니다. 북클럽 스킨 테마는 썸네일 이미지가 책 표지 비율을 띄고 있습니다... 2023. 3. 1. 티스토리 I 카테고리 목록 '뉴북' 소제목 스타일 변경하기 티스토리 I 카테고리 목록 '뉴북' 소제목 스타일 변경하기 이번에는 조금 민민한 카테고리 목록의 소제목 스타일을 아래처럼 변경해 보겠습니다. 저는 북클럽에낭 적용해 봤지만 아마도 다른 스킨들에도 적용이 가능하지 않을까 하는 생각입니다. 밥법은 '관리자 홈'에서 '꾸미기 > 스킨 편집 > html 편집 > CSS' 탭에서 .list-type-thumbnail .post-header h1 코드를 검색 후 수정해 주시면 됩니다. 목차 카테고리 '뉴북' 소제목 스타일 변경하기 1. '관리자 홈'에서 '꾸미기 > 스킨 편집 > html 편집 > CSS'로 들어갑니다. 2. Ctrl + F를 이용해 .list-type-thumbnail .post-header h1 를 검색합니다. .list-type-thumbnai.. 2023. 2. 28. 티스토리 북클럽 스킨 I 커버 소제목 스타일 변경하는 방법 목차 티스토리 북클럽 (Book Club) 스킨에서 스킨 편집 시 커버 아이템을 설정하고 각 커버 아이템의 타이틀을 지정할 수 있습니다. 커버의 소제목 기본 스타일이 마음에 들지 않는 경우 CSS를 사용하여 커버의 소제목 스타일을 변경할 수 있습니다. 참고로 티스토리 소제목 스타일을 변경하고 싶은 경우 다음 글의 "티스토리 소제목 꾸미기"를 참고하세요. 티스토리 북클럽 스킨의 커버 소제목 스타일 변경 방법 티스토리 북클럽 스킨에서는 홈 설정을 '커버'로 지정하여 홈페이지를 다양하게 구성할 수 있습니다. 또 각 커버 아이템의 타이틀을 지정할 수 있습니다. 북클럽의 커버를 선택하면 아래 그림과 같이 타이틀이 표시됩니다. 기본 제목 스타일이 너무 단조로운 것 같다면 간단한 CSS 코드를 추가하여 스타일을 변경.. 2023. 2. 28. 티스토리 북클럽 스킨 I 상단 메뉴 삭제하기 목차 티스토리 북클럽 스킨 I 상단 메뉴 삭제하기 티스토리 블로그 스킨들 중 북클럽 스킨이 제일 깔끔한 것 같습니다. 깔끔하기는 하지만 조금씩 맘에 안 드는 부분들도 있는데 그 부분을 수정을 해보려고 합니다. 이번에는 블로그 메인 페이지의 상단 메뉴의 '홈, 태그, 방명록'을 삭제해 보겠습니다. 1.홈메뉴 삭제하기 티스토리 '블로그관리 홈'으로 들어가셔서 '꾸미기 > 메뉴'를 클릭합니다. 메뉴에서 '홈, 태그, 방명록'을 모두 삭제합니다. (메뉴 위에 커서를 올려두면 삭제 버튼이 보입니다.) 삭제를 했다면 '변경사항 저장'을 클릭하고 블로그 화면을 '새로 고침'을합니다. 블로그의 메뉴는 삭제되었지만 메뉴의 위치가 여백으로 남아있어서 블로그 제목과의 간격이 많이 떨어져 보이는 단점이 있습니다. 이렇듯 꾸미.. 2023. 2. 25. 티스토리 북클럽 스킨 I 뉴스레터 썸네일 위치 변경 (오른쪽에서 왼쪽으로) 목차 뉴스레터 썸네일 오른쪽에서 왼쪽으로 위치 변경 티스토리 북클럽 스킨의 스킨 편집에서 홈 설정을 커버로 지정하고 뉴스레터 아이템을 배치하면 썸네일이 오른쪽에 표시됩니다. 뉴스레터 아이템의 썸네일 위치를 오른쪽에서 왼쪽으로 변경하고 싶은 경우 간단한 CSS 코드를 사용할 수 있습니다. Book club 스킨 커버 뉴스레터 썸네일 위치 변경 방법 티스토리 북클럽(Book Club) 스킨에서 홈 설정을 커버로 설정하고 뉴스레터 아이템을 추가하면 아래처럼 썸네일이 오른쪽에 표시됩니다. 옆에 사이드바가 있기 때문에 조금 답답해 보인다면 썸네일을 왼쪽으로 이동시키는 것을 고려해 볼 수 있습니다. 뉴스레터 아이템의 썸네일을 오른쪽에서 왼쪽으로 이동시키려면 다음과 같은 CSS 코드를 사용할 수 있습니다. ▼ CSS.. 2023. 2. 24. 이전 1 2 3 4 5 6 다음 반응형