[공유경제] 티스토리 Odyssey 스킨 썸네일 사이즈 CSS 수정하기 (그대로 따라하기)

Intro

티스토리(Tistory)의 Odyssey 스킨을 이용하시는 분이라면 썸네일이 잘리시는 경우가 있는데요. 지금부터 정사각형으로 깔끔하게 보여질 수 있도록 CSS에서 수정하는 방법을 공유하고자 합니다.

 

아래의 순서대로 천천히 읽어보시고 그대로 따라 하시면 됩니다!

 

▤ 목차

 

1. 스킨 편집

☞ 티스토리 관리 → 꾸미기 → 스킨편집 → HTML 편집 클릭(오른쪽 상단)  → CSS 클릭

 

☞ 포스팅한 글의 대표 사진을 선택하게 되면 아래의 사진과 같이 왼쪽 섬네일이 잘려서 보입니다.

☞ 이것을 정사각형으로 해결하기 위해 HTML 편집 → CSS에서 수정을 진행합니다.

---

원하는 크기로 변한하는 시작 화면

 

2. CSS에서 .thumbnail 을 찾기 & 수정

☞ Ctrl + F 누른 후 검색창이 나타나면 .thumbnail 입력합니다.

☞ .article-type-thumbnail .thumbnail  (2410번에 위치)

---

 

 

☞ 위에서 'width & height' 부분의 숫자를 150px로 수정합니다.

---

 

☞ 미리보기를 클릭하면 아래와 같이 썸네일이 정사각형은 되었지만 이미지가 잘려있음을 볼 수 있습니다.

---

정사각형이 되었지만 이미지가 잘려있음을 볼 수 있음

 

3. CSS 에서 .img-thumbnail 을 찾기 & 수정

☞ css 에서 .img-thumbnail 을 찾기하여 .article-type-common .thumbnail .img-thumbnail {  곳으로 이동

☞ 2163번에 위치하며 아래와 같습니다.

---

 

☞ 여기서 'display: none;' 앞 뒤로 /*  */ 을 사용하여 주석처리를 해주고 2번과 같이 내용을 추가합니다.

---

 

☞ 미리보기를 클릭하면 아래와 같이 썸네일이 정사각형으로 변한것을 알 수 있습니다.

---

썸네일이 정사각형안에 잘림없이 된 것을알 수 있음

 

4. 웹화면은 완성, 하지만 모바일은 다름

☞ 웹 화면에서는 썸네일이 정사각형에 잘림 없이 넣을 수 있음을 확인 했습니다.

☞ 하지만 태블릿, 모바일 등은 잘림과 겹침으로 보여 집니다.

---

모바일은 다르게 보여지는 것을 확인

 

5. 또다른 .thumbnail 찾아서 수정

☞ CSS에서 (2454번) @media screen and (max-width: 1060px) 블록 안에 수정을 진행합니다

☞ .artcle-type-thumbnail .thumbnail 을 찾아가 'width, height, margin-left' 수정합니다.

(width와 height 은 90px로 margin은 18px로 함)

---

수정 전(왼) 수정 후(오)

 

☞ 3번에서 작성했었던 .img-thumbnail 의 내용들을 @media 블록 안에 똑같이 복사 붙이기 합니다. (2460번 밑에 하면 됨)

---

3번의 내용 추가 (복사 붙이기 한 형식)

 

☞ 미리보기를 클릭해서 확인합니다.

---

미리보기 적용 후 확인

 

6. 적용하기 누르고 끝!

☞ '적용' 누르면 끝!!!

☞ 위에 단계를 진행할 때는 적용을 하지 말고 단계별 미리보기를 클릭하면서 진행하면 좋습니다.

 

※ 요약 정리 ※

1. 티스토리 관리 → 꾸미기 → 스킨편집 → HTML 편집 클릭(오른쪽 상단)  → CSS 클릭

 

2. CSS에서 .thumbnail 을 찾고 수정

** .article-type-thumbnail .thumbnail  (2410번에 위치)

** 'width & height' 부분의 숫자를 150px로 수정

 

3. CSS 에서 .img-thumbnail 을 찾기 & 수정

** .article-type-common .thumbnail .img-thumbnail (2163번에 위치)

** 'display: none;' 앞 뒤로 /*  */ 을 사용하여 주석처리

 

4. 모바일 썸네일 수정을 위해  또다른 .thumbnail 찾아서 수정

** .artcle-type-thumbnail .thumbnail 을 찾아가 'width, height, margin-left' 수정 (2454번)

** 3번에서 작성했었던 .img-thumbnail 의 내용들을 @media 블록 안에 똑같이 복사 붙이기 (2460번 밑으로)

 

5. 미리 보기 후 적용하면 끝

 

END

티스토리(Tistory)의 Odyssey 스킨을 이용하시고 위의 순서대로 진행하셨다면 썸네일이 잘리지 않아 깔끔하게 보일 것입니다.  정사각형으로 깔끔하게 보여질 수 있도록 CSS에서 수정하는 방법을 공유드렸는데요. 도움이 되셨으면 공감 한번 부탁드립니다.

 

 

 

※ 본 내용은 제 부 계정으로 직접 진행하며 기록한 것이며, 개인 정리용도로 작성하였습니다.