썸네일 스킨 CSS 수정
티스토리 블로그를 운영하다 보니 썸네일 사이즈가 마음에 들지 않아서 약간의 수정을 해보려고 합니다.
엄청 어렵지 않으니 차근차근 따라 해 주시면 됩니다.
스킨 수정 시 명확하게 알아 두셔야 하는 부분이 있습니다.
웹 화면에 보이는 구조적인 이미지 사이즈를 조절하려면 CSS를 수정하셔야 되고
이미지가 잘려 보인다면 HTML을 수정하셔야 합니다.
구글에서 검색을 해보면 대부분 이렇게 하면 됩니다. 라고만 하지 CSS와 HTML이 어떻게 다른지 알려주지 않습니다. 그래서 내가 스킨 수정을 제대로 한 것이 맞나? 의구심이 들 때가 많았습니다.
이왕 스킨 수정을 할 거, 테스트하면서 명확하게 CSS와 HTML이 어떻게 다른지 알아보고자 합니다. 어떻게 다른지 알아야 추후 스킨을 내 마음대로 커스터 마이징이 가능할 것입니다.
우선 CSS 수정하는 것에 대해 알아보겠습니다. CSS는 위에서도 언급했듯이 구조적인 이미지 사이즈를 수정하는 것입니다. 웹 화면에서 보이는 사진 크기를 크게 보여 줄지 작게 보여 줄지를 정합니다. 텍스트로 이해되지 않기 때문에 아래 예시를 보고 이해해보도록 하겠습니다.
< CSS에서 수정하는 것은 웹 화면에 보이는 구조적인 사이즈 수정 >
list-type-thumbnail .post-item .thum img를 ctrl+f 검색으로 찾으셔가지고
width, height를 수정해주면서 웹 화면에 보이는 변화를 살펴보도록 하겠습니다. 우선 250px으로 수정해 줍니다.
250px 일 때 아래와 같이 홈 메인에서 보이는 전체 글 리스트에 썸네일 이미지가 크게 보입니다.
width와 height를 150px으로 변경하겠습니다.
메인 홈 전체 글 리스트에 표현되는 썸네일 크기가 확연히 줄어든 것을 확인하실 수 있습니다.
(현재 스킨에 적용되어 있습니다)
썸네일 스킨 HTML 수정
썸네일 이미지의 해상도를 조절해 보겠습니다. 해상도는 HTML을 수정하셔야 합니다. s_article_rep_thumbnail을 검색해서 C230을 C50x50으로 변경해보겠습니다.
메인 홈 전체 글의 썸네일의 해상도가 현격히 떨어졌습니다. 이것으로 HTML 수정은 해상도 설정이라는 것을 알 수가 있습니다. 화면에 보이는 썸네일의 크기는 같은데 해상도만 떨어졌습니다.
해상도를 올려 보도록 하겠습니다.
C300x300으로 수정
리스트의 썸네일의 해상도가 높아진 것을 볼 수가 있습니다. 현재 스킨에 적용되어 있습니다.
대부분 C200으로 설정하시던데, C200보다 C300이 해상도가 높아 이미지가 그나마 조금 더 선명하게 보입니다.
여기서 C말고 R로 설정하실 수가 있는데, R은 전체 이미지를 줄여서 보여주는 것이기 때문에 성능의 지장을 줄 수 있습니다. 뭐 엄청나게 차이 나지는 않겠지만 구글은 홈페이지의 반응 속도가 높은 것을 선호한다고 합니다.
현재 쓰고 있는 북 스킨은 150px에 C300의 해상도를 가지고 있습니다.
관련글 썸네일 스킨 CSS/HTML 수정
본문 아래의 관련글의 스킨을 설정 할 수가 있습니다.
HTML에서 s_article_related_rep을 검색해서 C50으로 설정해보겠습니다.
관련글 썸네일의 해상도가 떨어졌습니다.
C300으로 설정해보겠습니다. (현재 스킨에 적용되어 있습니다)
관련글 해상도가 높아졌습니다.
개인적으로 관련글의 이미지 크기가 커서 줄이고 싶어서 아래 절차와 같이 진행했습니다. 그런데 굳이 관련글은 수정 안 하셔도 됩니다. 위에 이미지 해상도만 설정해 주세요. 여기서 잘못 건드리면 관련글이 이상하게 나타납니다. 그러니 익숙하지 않으시는 분은 하지 마세요.
여기저기 검색을 해봤는데, 관련글은 없애는 분도 많으시고 이미지 수정을 잘 안 하세요.
왜냐면?!!! 이미지만 줄여서는 관련글 스킨이 이쁘게 나타나지 않은 것입니다.
결국 글자도 줄여야 하고 여백도 조절해야 됩니다.
CSS에서 related-articles ul의 width을 85%으로 수정하고, related-articles ul li figure의 width, height, margin-bottom을 캡처 화면처럼 수정합니다.
related-articles ul li figure img의 값을 150px으로 변경합니다.
아래 캡처 화면처럼 똑같이 수정하시면 됩니다. 다른 건 지우지 마시고 수정만 하시는 겁니다.
아래 그림처럼 소스들이 나란히 있지 않습니다.
여기저기 떨어져 있고, 일일이 찾아서 수정하셔야 합니다.
해당 값을 모두 조절하면 아래처럼 관련 글의 썸네일이 작게(150px) 나옵니다.
꼭 해야 될 필요는 없으니 참고하시기 바랍니다.
스킨 수정을 하다 보니 어느새 시간이 다 가버렸습니다. 네이버는 포스팅에만 초점을 맞추었는데, 티스토리는 포스팅 말고도 해야 할게 무궁무진하게 많네요. 특히 스킨 수정이 어렵기는 하지만 재미도 있습니다. 나름 공부하는 즐거움이 있네요. 앞으로도 티스토리 스킨에 관련된 내용을 종종 포스팅하겠습니다.
참고하면 좋은 글
'블로그운영' 카테고리의 다른 글
| 티스토리 블로그 다음 저품질 통누락 조치 방법 (1) | 2022.03.07 |
|---|---|
| 네이버 블로그 복사해서 티스토리에 넣기(구글 SEO) (0) | 2022.01.12 |
| 블로그 조회수 늘리기 위한 키자드 등록하기(네이버 , 티스토리, 백링크 SEO 최적화) (0) | 2021.12.05 |
| 티스토리 블로그 크롬 웹스토어 확장 프로그램으로 캡처 해보자(Awesome Screenshot) (1) | 2021.11.30 |
| 티스토리 블로그 조회수 늘리는 방법 (3) | 2021.11.25 |
댓글