CSS5 글 목록의 글꼴 크기와 줄간격 수정, 글 제목과 요약문의 줄 수 제한 | hELLO 스킨 커스터마이징 004 이 글에서는 블로그 첫 화면에서 리스트 형식으로 표시되는 글 목록의 글꼴 크기와 줄간격을 수정하고, 리스트는 물론 그리그 형식으로 표시되는 화면에서 글 제목과 요약문의 줄 수를 제한하는 CSS 코드를 삽입하였다. 추가로 모바일 환경에서 글과 글 사이 간격을 넓혀서 명확히 구분되도록 수정하였다. 결과물 미리보기 블로그 첫 화면에서 글 목록의 글꼴 크기와 줄간격을 수정하고, 글 제목과 요약문의 줄 수를 제한한 결과 화면은 아래 그림에서 보는 바와 같다. 글 목록 (리스트) 의 글꼴 크기와 줄간격 수정하기 우선, 수정할 부분의 HTML 또는 CSS 코드를 찾아서 편집하는 방법은 아래 링크를 참조하면 좋다. 사이드바 카테고리 "분류 전체보기" 삭제 | hELLO 스킨 커스터마이징 002 사이드바 메뉴 정리 사이.. 2023. 8. 11. 사이드바 카테고리 "분류 전체보기" 삭제 | hELLO 스킨 커스터마이징 002 사이드바 메뉴 정리 사이드바 카테고리 "분류 전체보기" 를 삭제하기 전에, 우선 사이드바에서 필요하지 않은 부분은 과감히 제거했다. 물론 영원히 삭제하는 것은 아니고, 나중에 다시 가져와서 표시할 수도 있다. 정리한 사이드바 메뉴와 정리하게 된 간략한 이유는 아래와 같다. 블로그 메뉴: 지금 당장은 필요 없음 공지사항: 지금 당장은 필요 없음 인기 글: 지금 당장은 필요 없음 태그: 사이드바 공간을 너무 많이 차지해서 앞으로도 사용하지 않을 예정 최근 댓글: 지금 당장은 필요 없음 (댓글 거의 없 ㅠㅠ) 최근 글: 블로그 첫 화면으로 대체 가능하니 앞으로도 사용하지 않을 예정 살아남은 사이드바 메뉴는 프로필, 방문자 수, 검색, 카테고리, [광고] adsense 의 순서이며, 위 캡쳐 화면의 오른쪽 부분.. 2023. 8. 6. 관련 글 리스트 썸네일과 제목 위치 수정 (HTML, CSS) | 북클럽 스킨 커스터마이징 004 요약 티스토리 북클럽 스킨에서 글 아래에 있는 "관련 글" 리스트의 썸네일 크기를 직사각형에서 정사각형으로 수정했다. 제목이 썸네일에 겹치는 문제도 해결했다. 관련 글 리스트 (수정 전) 티스토리 북클럽 스킨에서 글의 마지막 부분 아래에는 태그, 관련 글, 댓글의 순서로 표시된다. 이 중에서 "관련 글" 부분에서는 아래 그림에서 보는 바와 같이, 관련 글 (썸네일과 간략한 제목) 이 표시된다. 내 생각에 티스토리 북클럽 스킨을 만든 사람은 정사각형을 싫어하거나 직사각형을 좋아하는 듯 하다. 직사각형의 썸네일을 정사각형으로 수정하는 일은 이번이 3번째인데, 마지막이 되었으면 한다. 썸네일 수정 (직사각형 > 정사각형) 스킨편집 > html 편집 으로 들어간 다음, HTML 탭에서 ctrl + F 누르고 ".. 2021. 10. 9. 리스트 뉴북 설정, 카테고리 썸네일 정사각형으로 변경 (HTML, CSS) | 북클럽 스킨 커스터마이징 003 요약 블로그 관리 > 꾸미기 > 스킨 편집에서 홈 설정 아래에 있는 "기본 설정"과 "리스트" 설정을 했다. 카테고리 메뉴를 클릭하여 글 목록을 확인해보니, (홈 설정과 같이) 썸네일이 또 직사각형 모양이다. HTML과 CSS 수정을 통해 정사각형으로 변경했다. 기본 설정과 리스트 스킨 편집 화면에서 홈 설정 아래에 있는 "기본 설정"과 그보다 좀 더 많이 아래에 있는 "리스트" 설정을 변경했다. 우선, 기본 설정에서는 아래에서 보는 바와 같이 "글 목록 글 수"를 4개에서 5개로 수정했다. 기본 설정 부분보다 좀 많이 아래에 있는 리스트에서는 아래와 같이 리스트 타입을 뉴북으로 더보기 방식은 페이징으로 설정했다. 리스트 타입을 뉴북으로 선택한 이유는 홈 설정 > 커버 아이템의 뉴스레터와 레이아웃이 같았.. 2021. 10. 2. 커버 아이템 뉴스레터 설정, 썸네일 정사각형으로 변경 (HTML, CSS) | 북클럽 스킨 커스터마이징 002 요약 티스토리 블로그 관리 홈에서 꾸미기 > 스킨 편집을 클릭하면 새 창이 뜬다. 새 창의 오른쪽 화면에 있는 홈 설정에서 커버를 선택하고, 커버 아이템 추가를 눌러 뉴스레터를 추가했다. 저장 후에 바뀐 블로그 홈을 확인해보니, 뉴스레터의 썸네일 사진의 비율이 마음에 들지 않는다. HTML과 CSS를 수정하여 직사각형의 썸네일을 정사각형으로 변경했다. 홈 설정 스킨 편집을 클릭했을 때, 새 창의 오른쪽 화면에서 가장 상단에는 현재 사용 중인 스킨의 이름 (내 경우, Book Club) 이 나오고, 그 바로 아래에 "홈 설정"이 나온다. 홈 설정은 최신 글 또는 커버를 선택할 수 있는데, 북클럽 스킨의 기본 설정(default)이 "최신 글"로 되어 있고, 블로그 첫 화면의 본문 부분은 아래와 같이 보여진.. 2021. 10. 1. 이전 1 다음 반응형
