티스토리 오디세이(Odyssey) 이미지가 왼쪽인 글 목록 만들기 - 베이직 타입

티스토리 오디세이(Odyssey) 이미지가 왼쪽인 글 목록 만들기 - 베이직 타입

티스토리 블로그의 무료 반응형 스킨 중 하나인 오디세이 스킨. 이 스킨의 베이직 타입 글 목록은 제목+내용 이 먼저 나오고 오른쪽에 썸네일이 위치해 있습니다. 해당 스킨의 최근글, 인기글도 썸네일이 왼쪽에 배치되어 있는데 유독 글 목록만 반대로 뒤 바뀌어 있지요. 오늘은 이 썸네일과 제목+내용의 위치를 반대로 바꾸는 스킨편집 방법에 대해 알아보도록 하겠습니다.

 

 

오디세이 - 베이직 타입 미리 보기

들어가기에 앞서, 먼저 오디세이 베이직 타입 최초 설정 시 블로그 메인에서 글 목록이 어떻게 보이는지 확인해보도록 하겠습니다. 이는 블로그 관리자 화면에서 [꾸미기 - 스킨 변경]에서 원하는 스킨을 미리 보기를 통해 본인의 블로그에서의 화면도 확인하실 수 있으니, 변경 전 충분히 검토하시고 변경하시기 바랍니다.

 

베이직 타입의 오디세이는 전체적으로 깔끔하고 정갈한 느낌의 스킨이지만, 아래 화면과 같이 최근글과 인기글은 왼쪽에 썸네일이 있는 반면, 정작 글 목록은 썸네일이 오른쪽에 자리 잡고 있습니다. 이를 동일한 구조로 보이도록 변경해 주어야겠습니다. 저는 최근글, 인기글의 썸네일의 구도가 더 안정감 있어 보이기 때문에 글 목록의 구조를 수정하였습니다.

 

변경 전 글 목록

 

티스토리 스킨 편집 도구 열기

이 글은 앞서 안내해드린 바와 같이 오디세이(Odyssey) 스킨의 베이직 타입 스타일에 대한 내용입니다. 스킨 및 스타일이 다를 경우 수정방법이 달라지므로 동일한 스킨, 스타일인지 확인 후 진행해 주세요.

 

스킨 편집을 위해 티스토리 블로그 관리자에서 [꾸미기 - 스킨 편집]을 선택하여 스킨 편집 도구를 열어주세요. 또한 스킨 편집 도구에서 현재 설정된 기본 목록 스타일이 베이직 타입인지 확인합니다.

 

[꾸미기 - 스킨편집] 베이직 타입

 

CSS 편집

오른쪽 상단의 html 편집 버튼 클릭 후, CSS 탭 메뉴를 선택해 주세요.

 

CSS  편집 메뉴 열기

 

CSS 편집 문서에서 다음과 같은 코드를 찾아주세요. 키보드의 Ctrl + F 버튼을 클릭하여 아래 검색어를 입력하시면 조금 더 쉽게 찾을 수 있습니다. 제 CSS 편집기 기준 2410라인, 2417라인 코드입니다만, 이미 개인이 수정한 코드가 있을 경우 라인의 위치가 다를 수 있으니 참고해 주세요.

 

검색어 (줄 바꿈 있는 채로 검색하세요.)

.article-type-,
.article-type-thumbnail 

 

변경 전 CSS 코드

위의 코드를 찾으셨다면, 아래 이미지를 참고하여 총 2개의 코드를 변경해주도록 합니다. 

 

첫 번째

변경 전) flex-direction: row-reverse;

변경 후) flex-direction: row;

 

두 번째

변경 전) margin-left: 40px;

변경 후) margin-right: 40px;

 

변경 후 CSS 코드

 

편집 후 1차 스킨 확인

코드를 올바르게 수정하였다면, 블로그 스킨 편집 도구의 오른쪽 맨 위의 '적용' 버튼을 클릭한 다음, 새로 고침 하여 글 목록을 보면 원하는 대로 글 목록에서 썸네일이 왼쪽에 자리 잡은 것을 확인하실 수 있습니다. 하지만 여기서 끝이 아닙니다.

CSS 편집 후 오디세이 베이직타입 글 목록

 

모바일 용 CSS 편집하기

요즘은 웹보다 모바일을 통해 인터넷을 이용하는 경우가 더 많습니다. 웹 화면보다 모바일 화면을 더욱 신경 써야 하는 이유가 바로 그것이죠. 위에서 수정한 화면을 모바일에서 보는 것과 비슷하도록 화면을 줄이면 썸네일을 기준으로 양쪽에 너무 많은 여백이 생긴 것을 확인하실 수 있습니다.

 

편집 전 모바일에서의 글 목록, 양쪽 여백이 많다

과한 여백을 없애고 정돈된 글 목록으로 만들기 위해 다시 한번 CSS를 편집해주어야 합니다. CSS 편집화면으로 이동하여 아래 검색어를 입력하여 화면과 같은 코드를 찾아주세요. 이번 코드의 라인 정보는 2465 라인입니다.

 

 

검색어 (아래 줄 바꿈, 띄어쓰기 그대로로 검색하세요.)

.article-type- .thumbnail,
    .article-type-thumbnail .thumbnail 

 

CSS 편집 전 코드 확인 - 2465 라인

 

코드를 찾으셨다면 아래와 같이 변경해 주세요. 

 

변경 전) margin-left: 18px;

변경 후) margin-right: 18px;

 

CSS 편집 후 코드 확인

 

모바일에서의 스킨 확인

위에서 코드를 수정하였다면, 다시 한번 편집 도구 오른쪽 맨 위의 '적용' 버튼을 클릭하여 모바일에서의 여백이 사라졌는지 확인해 봅니다. 엉뚱한 코드를 수정했을 경우 키보드의 Ctrl + Z 키를 눌러 되돌려주세요. (너무 많이 누르면 안 됩니다.)

 

CSS 편집 후 모바일 글 목록

 

코드를 모두 수정한 이후의 오디세이 스킨의 모바일 글 목록 화면입니다. 불필요한 여백이 사라지고 왼쪽에 가지런히 정렬되어있는 썸네일을 보니 제 마음이 다 편해지네요. 😊 뿌듯

 

이상으로 오디세이 스킨, 베이직 타입 글 목록의 썸네일을 왼쪽으로 옮기는 방법에 대해 알아보았습니다.

 

블로그에 방문해주신 분들에게 모두 감사드리며, 제 글이 부디 도움이 되셨기를 바랍니다.

오늘도 건강하고 행복한 하루 보내세요!