티스토리 #1 스킨 - 리스트 썸네일 위치 변경하기

이번에는 티스토리 #1 스킨에서 기본적으로 보여지는 리스트 썸네일의 위치를 변경해보도록 해보겠습니다.

티스토리 #1 스킨을 적용하면 기본적으로 썸네일은 오른쪽으로 보여지게 됩니다.

HTML / CSS  편집 페이지 열기

---

먼저 블로그 관리페이지에서 사이드바 메뉴 항목에 보면 HTML / CSS 편집 항목이 있습니다. 

다음 항목을 클릭하여 HTML/CSS 편집 페이지를 열어주세요.

CSS에 소스 코드 수정

---

CSS 항목으로 이동하여 Ctrl + F를 눌러 thumbnail_post를 입력하여 다음 코드를 찾아줍니다.

.list_content .thumbnail_post { float:right; width:150px; height:150px; margin:6px 0 5px 30px }

위 코드를 다음과 같이 변경을 합니다.

.list_content .thumbnail_post { float:left ; width:150px; height:150px; /*margin:6px 0 5px 30px*/ margin-right: 30px; }

여기까지만 하면 PC화면에서만 썸네일이 오른쪽에 띄워진 상태에서만 보이고, 모바일에서는 붙어있는 상태로 보입니다.

thumbnail_post 단어로 Ctrl+G 눌러서 다음 항목을 찾으시면 밑에 부분에 모바일 썸네일 항목이 있습니다.

그 부분을 다음과 같이 변경합니다.

/* 리스트 */

   .list_content {max-height:113px;padding:21px 15px 20px}

   .list_content .thumbnail_post,

   .list_content .thumbnail_post img { width:76px; height:76px }

   .list_content .thumbnail_post { /*margin:8px 0 8px 30px*/ margin-right:30px; }

이 부분을 변경하시면 모바일에서 썸네일이 제대로 나오는 것을 확인할 수 있습니다.

위와 같이 소스를 변경 후 저장하고 페이지를 새로고침 하시면 다음과 같이 바뀐 모습을 확인할 수 있습니다.

＃만약 지금까지 쭉 작업을 따라했는데도 화면이 바뀌지 않았다면 페이지에 캐시를 삭제해주세요.

http://app-developer.tistory.com/17 (캐시 지우는 방법)