안녕하세요.
오늘은 티스토리 블로그에서 썸네일 크기 변경하는 방법에 대해 알아보도록 하겠습니다.
<글쓴이의 한 줄>
티스토리를 하다 보면 썸네일이 직사각형으로 보여서 썸네일이 잘려 보이는 경우가 있습니다.
정사각형으로 예쁘게 보이게 하고 싶은데말이죠.
그래서 오늘은 아주 간단하게 썸네일 크기를 바꾸는 방법에 대해 설명드리겠습니다.
글을 천천히 정독하시면 따라 하시는데 30초도 걸리지 않는 매우 쉬운 작업입니다.
그럼 바로 시작해 보겠습니다.
주요 검색어는 아래 미리 적어 놓겠습니다.
1. HTML에서 s_article_rep_thumbnail를 검색
2. CSS에서 list-type-thumbnail 를 검색
(이미지는 누르시면 크게 원본으로 보실 수 있습니다.)
티스토리 스킨 썸네일 사이즈 크기 변경방법
오늘 저희가 해야 할 작업은 간단하게 2개입니다.
첫 번째, 썸네일 정사각형으로 만들기
두 번째, 정사각형 썸네일을 좀 더 크게 키우기
시작하겠습니다.
1. 스킨편집 모드
먼저 티스토리 홈 메뉴에서 아래로 스크롤해서 꾸미기를 찾습니다.
꾸미기 아래 스킨 편집을 눌러 들어갑니다.
스킨 편집 화면에서 우측에 보시면 html편집이 보입니다.
html편집을 눌러 입장합니다.
편집모드에 입장을 하면 아래 사진 왼쪽과 같이 html모드로 나오는 것을 볼 수 있습니다.
여기서 빈 공간을 마우스로 찍고 컨트롤키와 F키를 동시에 눌러 오른쪽 화면과 같이 검색창이 뜨게 만듭니다.
검색창이 나오면 그곳에 s_article_rep_thumbnail을 입력하여 검색을 합니다.
총 4개가 검색이 될 겁니다.
<s_article_rep_thumbnail>
<img src="//i1.daumcdn.net/thumb/C230x230/?fname=https://blog.kakaocdn.net/dn/bQdigj/btslaRWO5Bk/yHhKL37SjacaCyEPukyg41/img.jpg" alt=""> </s_article_rep_thumbnail>
저희는 첫 번째 아래에 보이는 C230x300 이 부분만 C230x230으로 수정을 해 줍니다.
2. 사이즈별 크기 모습
그런데 사이즈를 230x230 말고 300x300으로 하면 안 되나요?
해도 무방합니다. 사이즈는 둘 중에 어느 것을 하던지 동일합니다.
여러분을 대신하여 제가 사이즈별 어떻게 보이는지 미리 해보았습니다.
아래 사진과 같이 제일 왼쪽 처음이 기존 직사각형 원본 사이즈입니다.
정사각형으로 사이즈 변경 시 큰 값을 주던 작은 값을 주던 동일한 내용을 표현하고 있습니다.
정사각형으로 변경 시에는 보이는 크기는 작아지지만 표출되는 내용은 더 많아집니다.
하지만 너무 작아서 답답함이 느껴지죠.
일단 먼저 정사각형으로 변경 후 크기를 더 키우는 작업을 진행해 보도록 하겠습니다.
HTML에서의 작업은 여기까지가 끝입니다.
간단하죠.
저는 230x230으로 수정하고 적용을 눌렀습니다.
3. CSS 크기 편집
이제는 썸네일을 크게 키울 차례입니다.
HTML 바로 옆에 있는 CSS를 눌러서 마찬가지로 빈 공간을 클릭하고 CTL+F로 검색창을 열어줍니다.
여기에 list-type-thumbnail 를 복사해서 넣으시고 검색을 해줍니다.
총 14개가 검색이 되실 겁니다.
수량은 중요한 것이 아니고 그중에서 아래 2개만 수정을 할 겁니다.
그림으로 보시죠.
왼쪽이 순정 상태의 widh 크기 값입니다. 빨간색 체크 박스 둘 다 126px로 되어있죠.
저희는 오른쪽 파란색 체크 박스처럼 160px로 수정을 하면 됩니다.
밑에 높이 height 166px는 auto 자동으로 수정해 주세요.
어떤 넓이의 사진을 넣어도 높이는 자동으로 맞춰질 수 있도록 말입니다.
자, 이제 CSS에서도 작업은 끝났습니다.
위에서도 마찬가지로 제가 여러 사이즈를 비교해 드렸었죠.
여기서도 궁금해하실 것 같아 미리 사이즈값을 여러 개 넣어 크기를 보여드리겠습니다.
아래 사진에서 순서대로 순정 126의 크기입니다.
160일 때와 190을 적용했을 때에는 크기 차이가 꽤 나죠.
저는 시원한 크기가 좋아서 190으로 최종 수정하였답니다.
여러분들도 마음에 드시는 크기를 조정하시면 됩니다.
230까지는 표현이 가능하니 커스터마이징 해보세요.
그런데 제가 해보니 막상 190 이상은 넘어갈 필요가 없겠습니다.
너무 크면 생뚱맞아 보이기도 하고 썸네일이 커질수록 설명란의 글자수가 줄어듭니다.
크기는 이렇게 참고해 주시기 바랍니다.
이렇게 오늘 하기로 한 2가지 모든 작업이 완료되었습니다.
정말 간단하죠?
이제 여러분들도 썸네일 때문에 스트레스받지 마시고 크기를 자유롭게 조정하셔서 사용하시기 바랍니다.
그럼 이만 글을 마치도록 하겠습니다.
아래 추천글도 많은 관심 부탁드립니다.
좋은 하루 보내세요.
감사합니다.
추천글
키워드 검색량 조회 방법 및 사이트 TOP3 끝판왕
안녕하세요. 오늘은 키워드 검색량 조회가 왜 중요한지, 키워드 검색량 조회 방법, 키워드 검색량 조회 사이트 등에 대해 전부 알아보도록 하겠습니다. 여러분들께서 키워드 검색량 조회를 하는
googlethx.tistory.com
쿠팡파트너스 쉬운 가입방법(추천인 AF4784325)
안녕하세요. 오늘은 쿠팡파트너스 가입하는 방법에 대해 아주 쉽고 간단하게 알려드리겠습니다. 왕초보도 글만 읽을 줄 알면 할 수 있습니다. 아주 쉽게 설명해 놔서 1분만 읽어 보시면 할 줄 아
googlethx.tistory.com
구글 애널리틱스 티스토리 설치 및 설정방법(왕초보)
안녕하세요. 오늘은 구글 애널리틱스를 어떻게 설치하고 설정하는지 그 방법에 대해서 말씀드리겠습니다. 구글 애널리틱스. 뭔가 거창하고 어려워 보입니다. 하지만 가만히 있으면 계속 어려울
googlethx.tistory.com
티스토리 블로그 여러계정 구글서치콘솔에 등록하는 방법
안녕하세요. 오늘은 티스토리를 개설하고 나서 구글서치콘솔에 등록하는 방법에 대해서 알아보겠습니다. 오늘은 구글서치콘솔 등록하는 방법 중간에 꿀팁을 하나 알려드릴까합니다. 바로 티스
googlethx.tistory.com
'IT컴퓨터' 카테고리의 다른 글
| 티스토리 다음 고객센터 저작권침해 신고 최고의 일처리 속도 (0) | 2023.06.28 |
|---|---|
| 구글애즈 키워드플래너 CPC 광고단가 확인방법 (1) | 2023.06.25 |
| 쿠팡파트너스 링크주소 우회방법 3초면충분 (0) | 2023.06.24 |
| 키워드 검색량 조회 방법 및 사이트 TOP3 끝판왕 (0) | 2023.06.20 |
| 구글 애널리틱스 티스토리 설치 및 설정방법(왕초보) (3) | 2023.06.15 |
댓글