워드프레스 테마에 따라 기본 사이드바가 설정되는데 글 제목이 목록에 너무 길게 나오면 간단한 설정을 통해 줄 바꿈 스타일을 변경해도 좋다. 아래는 GeneratePress 마케터 테마 기준 설정 방법 안내이지만, 다른 테마도 비슷하게 적용할 수 있다.
마케터 테마 사이드바는 최신 작성 글이 순서대로 나오게 설정되어 있다. 글 제목이 길어서 3~4줄로 되어 있거나 아예 영역 밖으로 나간 글 제목도 볼 수 있다.
우선 띄어쓰기가 없는 너무 긴 제목은 사이드바 영역으로 벗어나고 글의 썸네일 이미지도 보이지 않는다. 그래서 글 제목 띄어쓰기만 잘 해도 다른 설정 없이 위처럼 제목이 잘 나타난다.
또한 아래 추가 설정을 진행하면 제목 줄 수나 글자 간격 등도 조절할 수 있다.
1. 크롬 창 F12 개발자 검사 켜기
2. 개발자 화면 왼쪽 위 화살표 아이콘 클릭 후 사이드바 제목 글자를 클릭
3. 클래스 이름이 나오면 위처럼 코드 넣기 (테마마다 클래스 이름이 다를 수 있음)
기능 설명
– 제목 줄 바꿈 : display: -webkit-box ~ overflow: hidden;
* 표시 줄 수 : -webkit-line-clamp: 2; (2 = 2줄, 3 = 3줄까지 표시)
– 단어 단위로 줄 바꿈 : word-break: keep-all;
– 줄과 줄 사이 간격 : line-height: 1.2;
– 글자와 글자의 간격 : letter-spacing: 2px;
– 단어와 단어의 간격 : word-spacing: 2px;
– 썸네일과의 간격 : margin-left: 3px;
* 만약 코드 적용 후 제목이 굵게 나온다면 font-weight: normal;를 추가하면 된다.
* 색깔 설정이 불필요하면 color: var(–accent-2);는 제외하자.
위 전체 코드를 적당히 수정해서 테마 내 CSS 빈 곳에 넣고 저장하면 된다.
그리고 클래스 이름은 h3.bg-headline..으로 된 복잡한 이름 말고 a로 해도 되는데, 그러면 블로그 내 모든 클릭 요소에 코드 내용이 반영되는 점도 참고하자.
관련 글
블로그 개발자도구 검사로 CSS 요소 확인하는 방법
워드프레스 사이드바 스티키 고정 기능 설정 방법
