자신이 만든 블로그에 많은 방문자들이 와주길 바라는 마음은 누구나 같을 것입니다. 어떤 형태의 블로그던지 늘어나는 방문자의 데이터를 보는 것은 블로그를 운영하는 사람들에게는 큰 위안과 더 큰 도전을 할 수 있게 해주는 원동력이 되죠... 블로그가 성장하는 방법에는 좋은 키워드와 양질의 글이 많은 영향을 미치지만 방문자가 내 블로그에 왔을 때 바로 나가지 않고 머물게 하려면 블로그 대표 이미지에도 신경을 써야 합니다.
여러분들이 포스팅을 마치고 발행을 클릭했다면 웹사이트 영역과 블로그 영역 내에서 대표 이미지가 잘리지 않고 정확히 잘 나와야 방문객의 호기심을 자극할 수 있습니다. 앞선 글꼴 포스팅에서 사람은 5가지 감각 중 시각의 영향을 가장 많이 받는다는 내용을 다룬 적이 있는데요.. 실제로 대표 이미지가 어떻게 노출되는가에 따라 방문자수가 정해진다는 전문가의 조언을 들은 적이 있습니다. 그래서 오늘은 가장 쉽고 빠르게 대표 이미지 사이즈를 수정하여 노출이 되는 모든 영역에서 반듯하고 깔끔한 이미지가 나올 수 있는 방법에 대해서 포스팅을 진행하겠습니다.
대표 이미지의 문제점
아래 사진은 대표 이미지의 사이즈가 직사각형으로 고르지 않고, 이미지의 일부가 잘림으로써 시각적으로 보기에 굉장히 안 좋은 상태입니다. 이것을 정사각형의 모양에 이미지 사진이 잘리지 않게 해줘야 합니다.
HTML, CSS 수정하기
사이즈를 보정하고 이미지를 수정하려면 HTML과 CSS를 같이 수정해줘야 합니다. 지금부터 수정해보겠습니다!!
스킨 편집을 클릭합니다.
먼저 CSS를 수정해보겠습니다.
CSS에서 쭉 내려보면 대략 2250~2300 사이에 'list-type-thumbnail. post-item. thum img { ' 이 부분이 보일 것입니다. 같은 북클립 스킨이라고 해도 조금씩 차이가 있으니깐 잘 찾아보시면 됩니다. 그리고 width: 126px;, height: auto;의 값을 수정해 줄 것입니다.
▣ 변경 전
width: 126px;
height: auto;
▣ 변경 후
width: 150px;
height: 150px;
대소문자 구분 확실히 해주셔야 합니다.
변경하셨으면 적용을 눌러봅니다.
그럼 아래와 같이 티스토리 블로그 메인 화면에 갔을 때 대표 이미지 사이즈가 수정된 것을 확인할 수 있습니다. 직사각형 보다 훨씬 깔끔하고 정돈된 느낌이 납니다.
다음은 이미지 사진을 보정해보겠습니다. HTML에서 대략 380~400 사이에 아래와 같이 'daumcdn.net/thumb/C 230x300/? fname='를 찾아봅니다. 여기서 C 230x300을 수정해보겠습니다.
▣ 변경 전
/C230x300/
▣ 변경 후
/R200x200/
수정하셨으면 적용을 클릭해봅니다.
입력값을 수정하실 때 대소문자의 구분을 잘해주셔야 하는데
'R200x200'을 'R200X200' 이렇게 쓰게 되면
아래와 같이 이미지 인식을 못하니 주의하시기 바랍니다.
모든 수정이 끝나면 아래와 같이 블로그 메인 페이지에 접속했을 때 대표 이미지가 잘리지 않고 깔끔하게 나오는 것을 확인할 수 있습니다:)
그리고 다음에서 제 티스토리 주소를 검색해보면 아래와 같이 대표 이미지 사진도 깔끔하게 나오는 것을 확인할 수 있습니다.
마치며..
오늘은 대표 이미지 수정하는 방법에 대해 알아보았는데요. 북클럽 스킨 외에 다른 스킨에는 어떻게 적용되는지는 모르겠습니다. 조금 알아보니깐 HTXL과 CSS 값이 달라서 스킨마다 다르게 해 줘야 될 것 같긴 한데 다른 것도 한번 해봐야 될 것 같네요.북클럽 스킨을 쓰시는 분들은 꼭 이 포스팅을 보시고 수정해 보시길 바랍니다. 날씨가 아침저녁으로는 쌀쌀하네요. 일교차에 감기 조심하시고 외출하실 때 마스크 착용 꼭 하시길 바랍니다. 읽어주셔서 감사드리고 저는 더 좋은 포스팅으로 찾아뵙도록 하겠습니다:)
'블로그 > 티스토리' 카테고리의 다른 글
구글 웹 마스터 도구 사이트/검색 등록하는 방법 (2) | 2020.04.27 |
---|---|
사이트맵(sitemap)과 RSS 뜻에 대해서 알아봅니다. (5) | 2020.04.27 |
티스토리 스킨 변경 후에 애드센스 메타태그 찾는 방법 (14) | 2020.04.23 |
[티스토리] 아이콘 파인더를 활용해 파비콘 만들기/다운로드 (2) | 2020.04.21 |
티스토리 애드센스 중복계정 해결/탈퇴/사이트 추가 방법 (9) | 2020.04.03 |
무료 이미지 다운로드 사이트 2개 강력추천!! (3) | 2020.03.25 |
블로그 꾸미기!?(feat. 글상자 서식) (0) | 2020.03.19 |
티스토리 블로그 꾸미는 방법(마우스 커서) (8) | 2020.03.08 |
댓글