반응형 티스토리 블로그5 [티스토리 블로그] SEO를 위한 블로그 타이틀 조정 사실 굳이 건드리지 않아도 무방한 부분입니다. 시멘틱 웹을 지향하는 분이라면 그래도 바꿔주는 것이 좋겠죠? h1은 한 페이지를 대표하는 헤드라인을 지정합니다. 티스토리에서는 보통 내 블로그 타이틀 부분, 그리고 포스트 글 제목 두 개를 h1으로 잡습니다. Book Club 스킨 역시 예외가 아닙니다. h1이 한 페이지에 여러 개 존재한다고 해서 딱히 큰 영향은 없습니다. 다만, SEO 관점에서 보면 보다 명확하게 키워드를 전달할 수 있다는 장점이 있습니다. 이러한 이유로 저는 블로그 타이틀은 h2로 한 단계 낮추고 포스트 글 제목만 h1으로 가져가 보도록 하겠습니다. 관리 화면에서 스킨 편집>html편집>CSS탭으로 들어갑니다. HTML 편집창에서 태그만 변경했다가는 레이아웃이 다 사라져 버릴 수 있기 .. 2021. 8. 20. [티스토리 블로그] 이미지 썸네일 정복하기 티스토리는 이미지를 링크할 때 사이즈 옵션을 줄 수 있습니다. 썸네일을 생성할 때 아주 편리한 기능입니다. 모든 사이즈에 대응하진 않지만, 일정 비율 or 일정 사이즈에 따라 이미지를 자르거나 줄이는 데 활용하기 좋습니다. 각 옵션 내용은 다음과 같습니다. 옵션 의미 기능 C Crop 사이즈 조절 후 이미지 중앙에서 정해진 사이즈로 자른다. S Snapshot Crop과 동일하지만 캡쳐하듯 이미지를 자르므로 기본 이미지 정보는 사라진다. 움직이는 GIF, 투명 PNG 정보 등이 사라진다. P Portrait 원본 이미지 비율 그대로 사이즈 조절 후 남는 부분을 흰색으로 채운다. R Resize 잘려나가는 부분 없이 이미지 사이즈를 물리적으로 줄이거나 늘린다. 잘리는 부분이 없어 원본과 비율이 달라지면 왜.. 2021. 8. 7. [티스토리 블로그] 썸네일 다루기 심화편 ③ 커버 썸네일 수정 여기서 다루는 내용은 Book Club 스킨에 한정합니다. 스킨마다 구조가 다르기 때문에 반드시 확인하셔야 합니다. 심화편 ①에서는 각 설정별 구조를 살펴보았고, ②에서는 기본 목록의 썸네일 이미지를 조정하는 법을 살펴보았습니다. 이번에는 관리>스킨편집>홈설정이 커버일 때 커버 아이템별로 썸네일 이미지를 조정하는 방법을 살펴보겠습니다. 심화편 ①에서 찾은 커버 아이템별 HTML 구조는 다음과 같습니다. 섬네일리스트 뉴스레터 커버갤러리1 커버갤러리2 첫 화면 div.cover-thumbnail-1>ul>li>a>figure>img div.cover-thumbnail-2>ul>li>a>figure>img div.cover-thumbnail-3>ul>li>a>figure>img div.cover-thumbna.. 2021. 8. 5. [티스토리 블로그] 썸네일 다루기 심화편 ② 기본 목록 여기서 다루는 내용은 Book Club 스킨에 한정합니다. 스킨마다 구조가 다르기 때문에 반드시 확인하셔야 합니다. 지난번 썸네일 다루기 심화편 ①에서 환경 설정에 따른 스킨의 구조를 살펴보았습니다. 그 내용을 토대로 오늘은 기본 목록 썸네일에 대해 자세히 살펴보도록 하겠습니다. 관리 메뉴 중 스킨편집에서 홈설정이 최신글(목록+내용)인 경우와 블로그의 기본 목록에서의 썸네일은 구조가 동일하다는 것을 알 수 있었습니다. div.post-item>a>span.thum>img 이것이 기본 구조였죠. 썸네일 사이즈를 제어하는 것은 어떤 부분인지 자세히 살펴보겠습니다. CSS 부분을 살펴보면, span.thum 요소는 부모 요소에서 넓이를 제어하고 높이는 0으로 잡아두고 실질 높이는 padding-bottom으로.. 2021. 7. 28. [티스토리 블로그] 썸네일 다루기 심화편 ① 티스토리는 군데군데 치환자도 많고, 공식 문서가 상세하지 않아서 자세히 파헤쳐 볼 필요가 있는 것 같습니다. 여기서 다루는 내용은 Book Club 스킨에 한정합니다. 스킨마다 구조가 다르기 때문에 반드시 확인하셔야 합니다. 가장 많이들 쓰시는 스킨이기도 하고, 저 역시 사용하고 있기 때문이죠. 기본에 가장 충실하면서 필요한 기능은 모두 갖추고 있기 때문이기도 합니다. 스킨 내에서 섬네일 구조 파악 HTML 구조를 파악하면 쉽게 필요한 부분을 찾을 수 있습니다. 저는 참고로 크롬 브라우저를 사용합니다. 해당하는 위치의 썸네일 이미지에 마우스를 대고 오른쪽 버튼을 클릭하여 '검사'를 눌러 파악할 수 있습니다. 같은 방법으로 썸네일이 들어가는 곳의 HTML 구조를 모두 파악해보도록 하겠습니다. 스킨 편집에서.. 2021. 7. 25. 이전 1 다음
