오늘은 오디세이 스킨에서 글 목록에 표시되는
썸네일 위치를 바꿔보겠습니다
이런 식으로 썸네일 위치가 오른쪽에서 왼쪽으로 변경하였습니다
티스토리 스킨 편집 - 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 코드를 수정하여 깔끔한 티스토리 블로그를 만들어보세요
[다른 꾸미기 강좌]
티스토리 오디세이 스킨 제목 배경 제거하기
오디세이 스킨에서 글을 작성하면 제목 영역에 배경 이미지가 생기면서 많은 영역을 차지하게 됩니다 디자인 부분에서 마음에 들지 않아 이 부분을 제거해 봤습니다 해당 사진을 이번 시간에
mu-sa.tistory.com
티스토리 오디세이 스킨 메뉴 위치 변경하는 방법
안녕하세요 오늘은 티스토리에서 지원하는 오디세이 스킨 왼쪽 사이드 메뉴를 오른쪽으로 옮겨보도록 하겠습니다 아무래도 한국 사람들은 대부분 왼쪽부터 글을 쓰고 읽기 때문에 이런 점을
mu-sa.tistory.com
티스토리 인용구 색상과 폰트 설정하기
오늘은 티스토리에서 지원하는 인용구 blockquote를 수정하여 인용구에 폰트와 디자인을 입맛대로 설정해 봅시다 해당 인용구를 사용했을 때 폰트와 디자인을 변경할 겁니다 1. 인용구에 적용할
mu-sa.tistory.com
