티스토리 북클럽스킨 썸네일을
PC에서 사각형으로 수정하고 체크해 보니
모바일에서는 여전히 직사각형으로 이미지가 변경되지 않아
속상하신 적 있으실 겁니다
모바일은 적용이 늦게 되는 줄 알고
한참을 기다리시기만 하셨나요?
PC에서 변경해 준 것처럼
모바일에서도 수정을 해주어야 합니다
저번시간에 썸네일 정사각형으로 만드는 방법에 이어
PC버전과 동일하게
모바일에서도 정사각형으로 만드는
방법에 대해 말씀드리겠습니다
북클럽스킨 썸네일 모바일에서 정사각형으로 수정하는 방법
원래 북클럽스킨은 모바일과 PC를 구별하지 않는
반응형 스킨입니다
그런데 왜 PC에서 수정한 항목이
모바일에서도 적용이 안될까요?
이럴땐 모바일에서의 부분을
수정해주면 문제 해결입니다
아주 간단하게 수정가능하니 따라오시면 되겠습니다
1) 티스토리 HTML 스킨편집
티스토리관리 > 꾸미기 > 스킨편집 화면으로 이동합니다
ctrl +F 키를 눌러 검색창에
article_rep_thumbnail을 찾습니다
대략 440번대에 있네요
C230 ×300을 C200x200로
변경해 줍니다
자 이제 정사각형에 글자가 모두 담긴
썸네일이 완성되었습니다
모바일 화면도 자동적용이예요!
(단, 관리 꾸미기 모바일에서
모바일 웹 자동연결 안 하신 분만 해당됩니다)
2) CSS 소스 수정
이제 CSS화면으로 이동한 뒤 대략 2550 줄의
list-type-thumbnail. post-item. thum img
부분을 수정해 줄 건데요
ctrl +F를 누르고 검색해 줍니다
list-type-thumbnail. post-item. thum img 부분을
대략 2259 그리고 2260 줄의
wdith와 height부분을 150px로
각각 수정해 줍니다
이제 모바일 썸네일이 정사각형으로 바뀌었습니다
관련글 썸네일 직사각형으로 수정하기
본문 하단에 있는
관련글 썸네일은 아래위가 긴 직사각형 형태입니다
이것도 정사각형으로 수정해 보려고 합니다
HTML의 대략 488번대이지만
ctrl+F 눌러서 related_rep_thumbnail 검색해 줍니다
여기서 C176x120을
C150x150으로 수정합니다
이런! 제목이 썸네일 안에 들어가 있네요?
여기서 한 번 더 수정해줘야겠어요
CSS로 들어가셔서
ctrl+f 먼저 누르신 후
대략 1380대의
related-articles ul li fingure 검색하여
height를 0에서 3 rem으로 변경해 주면 끝입니다
이제 글제목이 제자리를 찾았습니다
당연히 모바일 화면도 적용이 되었어요
(단, 관리> 꾸미기> 모바일에서 모바일 웹 자동연결 안 하신 분만 해당)
답답했던 모바일 속 썸네일 화면이 바뀌셔서 마음에 드시죠?
이번 이미지 수정으로
여러분의 블로그를 보는 분들이
조금이나마 편리하게 이용하실 수 있었으면 좋겠습니다~
'알아두면 플러스' 카테고리의 다른 글
| 티스토리robots.txt 차단 guestbook 오류 해결방법 (0) | 2023.05.11 |
|---|---|
| 페이지 색인생성 robots.txt에 차단됨 해결방법 (0) | 2023.05.11 |
| 티스토리 블로그 사진 모바일에서 확대축소 수정방법 (0) | 2023.05.09 |
| 애드센스 기존 하위도메인 삭제 바로알기 티스토리 (0) | 2023.05.08 |
| 티스토리 북클럽스킨 썸네일 정사각으로 수정하기 PC (0) | 2023.05.07 |
댓글