티스토리 오디세이 스킨 글 목록 썸네일 이동하기

오늘은 오디세이 스킨에서 글 목록에 표시되는

썸네일 위치를 바꿔보겠습니다

이런 식으로 썸네일 위치가 오른쪽에서 왼쪽으로 변경하였습니다

 

티스토리 스킨 편집 - CSS 수정

 

 

[블로그 관리 홈] > 꾸미기-스킨 편집 > html 편집 - CSS 항목을 클릭하여

ctrl+f를 눌러 .article-type-thumbnail를 검색해 주세요

 

flex-direction: row-reverse;로 되어있을 텐데 row로 고쳐주시면 됩니다

그러면 썸네일 위치가 왼쪽으로 변경이 되는데,
썸네일과 글 사이의 간격이 좁게 나오게 됩니다 이를 해결하기 위해서
margin-left 값은 주석 처리를 하고

밑에 margin-right: 30px이라는 간격을 추가해 줍니다

 

border-radius는 사진 테두리를 둥글게 만드는 역할을 합니다

 

현재 PC 부분 간격만 설정하였습니다

이제 모바일 버전도 수정해 봅시다

 

모바일 버전도 똑같이 margin-left 값을 주석 처리를 하고

margin-right 와 border-radius 값을 추가했습니다

수정된 코드를 적용하면

이렇게 정상적으로 썸네일 위치가 바뀌게 됩니다

 

추가로 사이드바에 있는 최근 글과 인기글도 테두리도 설정해 봅시다

 

.list-recent  .thumbnail 검색 후

border-radius 값만 추가해 주세요

 

이렇게 오디세이 스킨에 글 목록 썸네일 위치를 변경해 봤습니다

간단하게 CSS 코드를 수정하여 깔끔한 티스토리 블로그를 만들어보세요

[다른 꾸미기 강좌]

 

티스토리 오디세이 스킨 제목 배경 제거하기

티스토리 오디세이 스킨 메뉴 위치 변경하는 방법

티스토리 인용구 색상과 폰트 설정하기