[티스토리] 포스터 스킨 html 수정 - 글 리스트형 썸네일 사이즈 조정

 

오늘은 포스터 스킨을 바탕으로 '목록으로 보기'에서 썸네일 사이즈를 조정해 보자. 

 

 

우선 스킨에 알맞는 썸네일 사이즈 찾는 방법과 썸네일 만드는 과정은 아래 포스팅 참조 -!

[티스토리] (왕초보 맞춤용) Poster 스킨 썸네일 제작 및 스킨 썸네일 사이즈 찾아 맞추기

 

포스터 스킨 썸네일 사이즈를 정사각형으로 하려다 결국 html 해결 못해서 썸네일 사이즈 찾아서 거기에 욱여넣었건만... 역시나 새로운 난관에 봉착했다. 바로 블로그 홈에서 글 목록을 리스트형으로 바꾸면 썸네일이 아래처럼 잘리는 거다... 나처럼 마이너한 감성을 갖고 계신 분들 ㅂㄷㅂㄷ 신경 쓰여서 못 참음. 이건 고쳐보자 싶어 html을 다시 손댔다.

 

---

 

1. 리스트형 썸네일 사이즈 찾기

 

마찬가지로 썸네일 사이즈 찾는 곳을 들어가 뭐가 문제인지 봤다. 아래에서 썸네일 칸의 크기는 195x148인데 왼쪽에 여백이 있고, 위에는 짤리는 걸 확인했다.   

 

 

그렇다면 문제점은 두 가지.

 

첫째, 왼쪽 여백.

둘째, 자동으로 스케일 다운이 안됀다는 것.

 

 

 

2. 왼쪽 여백 없애기

이건 검색해보니 CSS로 해결해야 한다. 

 

위에서 웹페이지 Inspect 한 곳에서 아래 빨간 박스를 주목하자. 

오른쪽에 style.css 라고 쓰여있고, 왼쪽에 .post-item.thum img{  어쩌고 가 보인다. 거기서 margin에 맨 끝 -23.5px 이 수상해보임. 

css 코드를 뒤지기 위해 ".post-item.thum img" 복사하고 스킨 편집 창으로 넘어간다. 

 

 

티스토리 관리 -> 스킨 편집 -> html 편집 -> CSS

 

 

 

 

 

 

Ctrl + F 누르고 복사한 ".post-item.thum img" 붙여넣어 어디 있는지 찾기

 

 

 

수상한 숫자 -23.5px -> 0px 변경! 그랬더니 아래 그림처럼 옆에 여백이 없어져 잘렸던 부분이 보인다! 

 

3. 썸네일 사이즈 비율 변경하기

기본적으로 포스터 스킨은 C260x200 사이즈로 썸네일이 돼있다. 여기서 'C'가 중요한데, 아래 치환자 꿀팁을 참조하자.

아래 치환자 팁은 이 포스팅에서 따왔다.

 

<썸네일 치환자>
C (Crop) - 원본 이미지 비율 유지, 지정된 사이즈 외의 부분은 잘라냄.
P (Portrait) - 지정된 사이즈 안에 원본 이미지가 들어오도록 비율 자동 조절. 여백은 흰색으로 채움.
R (Resize) - 원본 이미지 비율과 관계 없이 사이즈에 맞춤. 비율이 안 맞으면 이미지의 distortion 생김.
S (Snapshot) - C과 같은 기능. GIF 파일의 경우 이미지를 집어 썸네일로 사용하는 특수 기능. 

 

내 썸네일 이미지 사이즈는 이전 포스팅에서 봤듯이 207x157px 이다. 그리고 리스트형 썸네일 사이즈는 195x148px. 그래서 윗부분이 잘리는 거다. 위에 여백을 더 주기는 싫고 두 사이즈 차이가 크게 안나기도 하고 해서 R(Resize)로 선택. 

 

이거는 html에서 변경해준다.

Ctrl + F  "" 로 찾아준다.

그리고 원래 C264x200이었던 걸 R264x200으로 변경하면 완료!

 

 

 

갤러리형 썸네일도 같은 방법으로 비율 맞춤을 하려고 했는데 아래처럼 썸네일 하나만 바뀌고 하나는 안 바뀌길래 이것저것 시도하다 포기했다. 혹시나 해결법 아시면 댓글 부탁드릴게요 :)

 

 

 

 

 

그럼 오늘도 감사합니다~ 다들 블로그 파이팅!