반응형 ▸티스토리 이야기/•티스토리 꾸미기47 티스토리 북클럽 스킨 | "h1 태그가 2개입니다." 문제 원인과 해결 방법 티스토리 북클럽 스킨 SEO 검색 최적화 방법수익형 블로그 또는 블로그 활성화를 위한다면, 티스토리 북클럽 스킨을 사용 중이신 분들은 꼭 적용해야 하는 문제입니다. 모든 글은 검색 최적화 기준에 맞게 작성해야 하는데, 북클럽 스킨에는 h1 태그가 2개가 노출되어 좋은 웹문서로 평가받지 못하고 있습니다. h1 태그는 무엇이며 왜 이런 문제가 발생하는지, 원인과 해결 방법을 알려드리겠습니다. 목차 북클럽 스킨의 H1 태그가 2개인 원인쉽게 말하자면 티스토리 블로그에서 이 부분에서 SEO 이슈를 고려하지 않고 제작된 스킨이기 때문입니다. 아직까지 업데이트가 되지 않았지만 북클럽 스킨을 사용중인 게시자들은 모두 이 문제를 겪고 있기 때문에 언젠가는 업데이트가 되지 않을까 싶기도 합니다. H1태그가 2개인 이.. 2023. 4. 27. 티스토리 | 코드블럭 한번에 꾸미기 part 2(폰트수정, 줄번호, 열기 및 닫기 버튼, 스크롤) 코드블럭 한 번에 꾸미기 #2이번에는 코드블럭에 '폰트수정, 줄번호, 열기 및 닫기 버튼, 세로 스크롤'을 적용하는 법을 알아보겠습니다. 블로그를 시작하며 글을 작성할 때, 코드 블럭이 너무 단조로워 보인다는 생각이 들어, CSS와 HTML을 잘 모르지만 여기저기 블로그들을 참고하여 코드 블럭을 꾸미기 위한 다양한 방법을 모았습니다. 이 글에서는 제가 적용한 코드들을 공유하고자 합니다. 1. 코드블럭 '폰트'수정1. '관리자 홈'에서 '꾸미기 > 스킨 편집 > html 편집 > HTML'로 들어갑니다.2. 아래 코드를 복사 후 위에 붙여 넣기를 해줍니다. 제 코드의 폰트는 구글의 나눔고딕입니다.다른 폰트가 필요하시다면 구글폰트 사이트에 가셔서 다운로드하시기 바랍니다. (구글 로그인은 필수입니다.)ht.. 2023. 3. 23. 티스토리 | 코드블럭 한번에 꾸미기 part 1(복사 버튼, 하이라이트) 코드블럭 한 번에 꾸미기 #1 이번에는 코드블럭에 복사 버튼, 하이라이트, 줄번호, 세로 스크롤바, 열기 및 닫기 버튼, 폰트 중 '복사 버튼 및 하이라이트' 를 적용하는 법을 알아보겠습니다. 아래 코드들은 제가 블로그를 시작하고 글을 하나 둘 올리며 제가 적용 한 코드를 공유하려 하니 코드블럭이 너무 민민한 듯해서 코드블럭을 꾸며보려 CSS나 HTML, Class 등 을 1도 모르는 제가 여기저기 여러 블로그들을 들락 거리며 모은 코드입니다. - highlight.js 등 테마 사이트에서 따로 테마를 다운로드하고 설치하고 하는 건 너무 복잡해서, 플러그인의 'syntax highlight 테마'를 그대로 사용하도록 하겠습니다. - '마우스 오른쪽 클릭 금지' 플러그인도 그대로 사용합니다. 하나하나 적용.. 2023. 3. 23. 티스토리 I 마우스 오버시 썸네일이 움직이는 애니메이션 효과 만들기 티스토리 I 마우스 오버 시 썸네일이 움직이는 애니메이션 효과 만들기이번에는 썸네일이나 설명글에 마우스를 올리면 애니메이션 효과를 가지고 좌우로 움직이는 CSS코드에 대하여 알아보겠습니다. 목차 먼저 사용자 스킨에 따라 섬네일의 class가 다르기 때문에 움직이고자 하는 썸네일에 오른쪽 마우스 클릭 후 검사를 통해 정확한 위치를 파악하는 것이 좋습니다. 제 스킨의 경우는 북클럽스킨의 '뉴북'이라. list-type-thumbnail. post-item. thum img입니다.여러분들도 정확한 위치를 찾으셨다면, 우선 메모장에 저장해 두세요. A. 애니메이션 효과 CSS코드 만들기썸네일의 위치를 메모장에 저장하셨다면, 애니메이션 코드를 만들어주도록 하겠습니다. 1. '관리자 홈'에서 꾸미기 > 스킨 .. 2023. 3. 21. 티스토리 북클럽 스킨 | 태그(Tag) 숨기는 방법 목차 티스토리 사이드바, 하단의 태그(Tag) 숨기는 방법 블로그의 태그는 해당 블로그의 주제나 카테고리를 나타내는 키워드로서, 독자가 원하는 정보를 빠르게 찾을 수 있도록 도와주며, 각 블로그에서 사용되는 태그는 그 블로그의 내용과 주제에 따라 달라집니다. 태그 선택 기준은 블로거나 블로그 운영자가 정하는 것이 일반적입니다. 하지만, 일반적으로 다음과 같은 기준들이 사용됩니다. ○ 주요 주제 및 카테고리 블로그가 다루는 내용 중에서 가장 중요한 주제와 카테고리를 선택하여 태그로 사용합니다. 이를 통해 독자들이 해당 블로그가 다루는 내용을 빠르게 파악하고 찾을 수 있습니다. ○ 검색 엔진 최적화(SEO)를 고려한 키워드 사용 검색 엔진 최적화(SEO)를 위해 블로그가 다루는 내용과 관련된 키워드를 선택하.. 2023. 3. 14. 티스토리 I 이미지파일을 파비콘(ico) 파일과 아이콘(png) 파일로 바꿔주는 사이트 목차 이미지파일을 파비콘과 아이콘 파일로 바꿔주는 사이트 웹 브라우저를 통해 웹사이트에 접속하면 뜨는 아이콘, 익숙하시죠? 이 아이콘을 ‘파비콘’이라고 합니다. 파비콘은 즐겨찾기(favorites)와 아이콘(icon)의 합성어로, 즐겨찾기 아이콘을 뜻합니다. 웹 브라우저 주소창이나 탭, 북마크 등에 표시되는 작은 아이콘으로, 웹사이트를 대표하는 이미지입니다. 파비콘을 설정하지 않으면 브라우저에서 기본으로 제공하는 아이콘으로 보입니다. 파비콘을 등록해 놓는다면 웹사이트에 이동했을 때나 웹사이트를 즐겨찾기 해 놓았을 때 더 돋보일 수 있습니다. 이번에는 JPG나 PNG파일을 ico파일로 변환하는 방법에 대해 알아보겠습니다. 기본적으로 ico파일을 만들기 위해서는 jpg, png와 같은 이미지 파일을 가지고서.. 2023. 3. 11. 티스토리 북클럽 스킨 I 본문 ' 뉴북' 및 커버 '뉴스레터' 제목 잘림 수정하기 본문 카테고리 '뉴북' 및 커버 아이템 '뉴스레터' 제목 잘림 수정하기 북클럽 스킨의 장점 레이아웃이 간결하고 깔끔합니다. 티스토리 북클럽 스킨은 레이아웃이 간결하고 깔끔한 디자인을 가지고 있어, 콘텐츠가 더욱 돋보이게 됩니다. 반응형 디자인을 지원합니다. 티스토리 북클럽 스킨은 모바일 기기에서도 적절한 디자인을 보장합니다. 따라서 모바일 환경에서도 콘텐츠를 편리하게 이용할 수 있습니다. 무료로 제공됩니다. 티스토리 북클럽 스킨은 무료로 제공되기 때문에, 추가적인 비용 없이도 쉽게 사용할 수 있습니다. 이런 장점들 때문에 많은 분들이 북클럽 스킨을 이용하지만, 그래도 조금 부족하거나 마음에 안 드는 부분들도 있습니다. 이번에는 카데고리의 제목이 길어지면 뒷부분이 '...' 말줄임 표시로 나오는 부분을 전.. 2023. 3. 8. 티스토리 북클럽 스킨 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. 이전 1 2 3 4 5 6 다음 반응형
