본문 바로가기
라이프

티스토리 리스트 목록 스타일 변경 들여쓰기 조정 방법

by 밋돌세 2023. 12. 17.

 

목록조정

 

티스토리나 워드프레스 블로그의 경우 목록 또는 리스트의 들여 쓰기가 생각보다 과하게 되어 이를 수정하고자 하신다면 참고해 보시기 바랍니다. 오늘은 티스토리의 경우 수정하는 방법을 살펴보겠습니다.

 

리스트 기본 들여쓰기

티스토리의 경우 리스트는 기본적으로 다음과 같은 정도의 간격이 적용되어 있습니다.

 

리스트조정

 

PC나 태블릿등 화면이 넓은 경우에는 가독성이 좋지만 휴대폰처럼 화면이 작은 모바일의 경우는 내용이 조금만 길어지면 줄이 넘어가게 됩니다.

 

블로그 사용자들의 경우 PC보다는 모바일로 검색, 조회하는 경우가 훨씬 많기 때문에 되도록 모바일 화면 기준으로 컨텐츠를 꾸미는 게 좋습니다.

 

 

리스트 들여 쓰기 수정

리스트의 들여쓰기 설정을 변경하려면 티스토리 테마의 CSS 파일을 수정하면 됩니다.

 

  • 티스토리 관리 > 꾸미기 > 스킨 편집
  • 스킨 편집 화면에서 html 편집 > CSS 탭 선택

 

리스트수정
[CSS 파일]

 

많이들 사용하시는  북클럽 기준으로는 CSS 파일에서 'entry-content ul li' 를 검색 후 다음과 같이 코드를 추가합니다.

 

.entry-content ul li {
  position: relative;
  margin-bottom: 10px;
  font-size: 0.9375em;
  line-height: 1.5714;
  color: #666;
  list-style: inherit;
  margin-left: -1.0em;
}

 

추가된 항목은 아래쪽 라인에 margin-left 항목입니다. 수치는 변경해 보면서 원하시는 값을 찾으시면 됩니다. 변경 전과 변경 후의 차이를 비교해 보겠습니다.

 

리스트수정리스트수정
[좌: 변경전, 우: 변경 후]

 

우측의 사진이 -1.0em 수치가 적용된 경우입니다. -값을 더 큰 값으로 변경하면 들여 쓰기가 더 줄어서 좌측으로 붙게 됩니다.

 

[함께 읽으면 좋은 글]

워드프레스 특성이미지 가운데 정렬, 썸네일 중앙 정렬 방법

 

워드프레스 특성이미지 가운데 정렬, 썸네일 중앙 정렬 방법

워드프레스를 이용하여 블로그를 운용하고 계신 많은 분들께서 generatepress 테마를 많이 사용하십니다. 심플하며 속도가 빠르기 때문인데요, 오늘은 특성이미지라고 불리는 썸네일 이미지의 정

meetallse.dpstory.com

 

갤럭시 공장 초기화 방법, 구글락 해제, 기기 전체 초기화 방법

 

갤럭시 공장 초기화 방법, 구글락 해제, 기기 전체 초기화 방법

갤럭시 스마트폰을 중고로 판매 하거나 구매 할 계획이라면 기기 전체 초기화, 갤럭시 공장 초기화 방법과 구글락 해제 하는 방법을 확인해보시기 바랍니다. [구글락] 구글락은 스마트폰을 도난

meetallse.dpstory.com

 

ChatGPT 4.0 챗GPT 신규 가입 방법, 대기 없이 바로 가입하기

 

ChatGPT 4.0 챗GPT 신규 가입 방법, 대기 없이 바로 가입하기

챗GPT 4.0의 경우 최근 기능이 많이 업그레이드 되었습니다. 훨씬 뛰어난 기능과 이미지 생성 까지도 가능 해졌습니다. 현재 신규 가입이 막혀 있는 상태이며 3.5 버전만 사용이 가능합니다. 4.0 이

meetallse.dpstory.com

 

 

댓글