안녕하세요.
오늘은 티스토리 메인 페이지 썸네일 사이즈 정사각형으로 변경하는 방법에 대해 공유하고자 합니다.
제 블로그 사이트 썸네일 이미지 입니다.
보시는 것처럼 정사각형으로 썸네일을 제작했지만, 위아래가 잘려 보기 좋지 않습니다.
이런 게 거슬린다 하시는 분들 있으실 텐데요.
쉽게 변경할 수 있습니다.
크게 정리하면 코드 수정인데요.
디테일한 이유와 코드의 의미는 생략하고 수정방법만 간략히 포스팅하겠습니다.
- HTML 접속 -> 사이즈 수정
- CSS 접속하기 -> 퍼센트 수정
입니다.
그럼 아래 내용을 따라주세요.
Capter : 1
- HTML 접속하기
티스토리 관리자 모드 -> 꾸미기 -> 스킨 편집 -> HTML 모드
윈도우 : ctrl + t
맥 : command + f 를 눌러 주세요.
그럼 검색 칸이 뜹니다.
검색칸에 cover-thumbnail-list 를 검색해 주세요.
검색한 내용에 해당하는 코드들이 보입니다.
수정할 부분의 내용
↓
*영역 코드 중 img src ←를 찾아보시면, 숫자가 적인 부분이 있습니다.
숫자가 적힌 칸을 지우고 C250x250(원하는 사이즈) 로 수정합니다.
* 썸네일 사이즈를 변경하고 싶은 비율로 입력하면 됩니다.
단, 앞에 붙는 알파벳은 대문자, 가운데 x는 소문자 로 적어주세요. (치환자 종류 : C, R, P, S)
|
|
C (Crop)이미지 비율 유지하며 지정된 사이즈 외는 잘라낸다. |
|
P (Portrait)
지정된 사이즈 안에 이미지가 모두 들어가도록 비율을 맞추고, 남은 영역은 흰색배경이 깔린다. |
|
R (Resize)
이미지 비율과 상관없이 지정된 사이즈에 맞추기 때문에 이미지 비율과 썸네일 비율이 다른 경우, 이미지가 변형되어 보인다. |
|
S (Snapshot)
C(Crop)과 동일한 기능과 원본 GIF 파일 시 이미지로 썸네일로 저장된다. |
코드 수정 후 적용 -> 새로고침을 해주세요.
Capter : 2
- CSS 접속하기
윈도우 : ctrl + t
맥 : command + f 을 눌러
검색 칸에 cover-thumbnail-list ul li .thum 를 검색해 주세요.
cover-thumbnail-list ul li .thum 3가지 내용 중
첫 번째 코드에서 padding-bottom 을 찾아주세요.
padding-bottom: 75.757575757575758% -> 100% 으로 변경해주세요.
코드 수정 후 적용 -> 새로고침을 해주세요.
그럼 썸네일이 정사각형으로 수정되었습니다.
저는 250x250으로 했지만 각자 원하는 사이즈로 변경해서 꾸며보세요.
혹시 모르니 백업을 하시고 작업하시길 바랍니다.
도움이 되었길 바랍니다.
다음 글에서 만나요~
'일확천금을 꿈꾸는 사람들에게' 카테고리의 다른 글
| 내 블로그 구글에서 노출시키는 간단한 방법 (0) | 2024.01.06 |
|---|---|
| 애드센스 미국 세금정보 입력하는 방법 (3) | 2024.01.06 |
| [티스토리] 애드센스 ads.txt 티스토리 문제 해결방법 (0) | 2023.06.29 |
| [티스토리] 공감 & 신고 버튼 쉽게 삭제하기 (0) | 2023.06.28 |
| [티스토리] 파비콘 제작 사이트 추천 & 등록방법 (0) | 2023.06.27 |
