블로그에 글을 작성할 때 보통 카테고리를 몇 개 정해두고 카테고리에 맞게 글을 발행할 때가 많다. 방문자가 어떤 글을 검색해서 들어왔는데 글 내용이 유용하다고 느끼면 카테고리 내 다른 글을 읽고 싶어질 것이다.
이때 카테고리 내 다른 글 목록을 보여주면 방문자는 쉽게 글을 찾을 수 있고 블로그 체류 시간도 늘어나는 장점이 있다. 이번 글에서는 카테고리 글 더보기 설정부터 제목 글자 수와 날짜, 밑줄 제거 방법 등을 알아보려고 한다.
목차
1. 카테고리 글 더보기 설정 방법
2. 제목 글자 수 조정 방법
3. 글 작성 날짜 제거 방법
4. 제목 글 밑줄 제거 방법
1. 카테고리 글 더보기 설정 방법
카테고리 글 더보기를 설정하면 글 본문 아래 같은 카테고리 글 목록이 출력된다. 방문자는 같은 카테고리의 다른 글을 쉽게 찾을 수 있어서 좋다.
설정을 위해서는 티스토리 로그인 - 블로그 관리 홈 왼쪽 메뉴 중 플러그인 - 카테고리 글 더 보기를 클릭하면 된다.
- 색깔 : 회색 / 빨간색 / 파란색 / 초록색 / 보라색
- 글 개수 : 3~8개
카테고리 글 박스 테마 색깔과 글 개수 설정을 마치면 플러그인 창 아래 [적용]을 클릭하면 설정을 마칠 수 있다. 이제 블로그에 글을 작성하면 같은 카테고리 글이 본문 아래 표시된다.
2. 제목 글자 수 조정 방법
제목 글자 수를 이야기하는 이유는 블로그에 접속하는 기기 화면 비율에 따라 제목 글자가 잘릴 때가 있기 때문이다.
만약 블로그에 컴퓨터 프로그래밍이나 코딩 같은 주제 글이 많다면 PC 방문자가 많겠지만, 그 외 다른 주제라면 모바일 방문자 역시 많다. 그래서 PC 화면에서는 제목 글자 수가 잘리지 않더라도 화면이 좁은 모바일에서 접속할 때 잘리는 일이 발생한다.
우선 블로그의 모바일 화면 확인을 위해 [스킨 편집] 창으로 이동해야 한다. 이후 화면 왼쪽 상단 박스의 [글]과 모바일 아이콘을 클릭하면 모바일 글 화면을 볼 수 있다.
* 블로그 관리 홈 - 꾸미기의 [스킨 편집] - 화면 오른쪽 [html 편집] - [html 및 CSS 편집..] 안내 창 [확인] 버튼 클릭
보통 블로그 글 제목이 길면 화면 위 두 번째 글 '티스토리 카테고리 테스트 시험...'처럼 제목이 일부 생략되서 보인다. (보통 제목은 20~30자가 적당하다)
북클럽 스킨 기준으로 css 편집 창 3567열로 오면 카테고리 글의 클래스 이름인 #content .another_category th가 있다.
-webkit-line-clamp 기본 값이 1로 되어 있을 텐데 제목을 1줄만 보여준다는 뜻이다. 따라서 이 숫자를 2로 바꾸면 모바일에서 블로그에 접속했을 때 제목을 2줄까지 보여주는 것으로 변경할 수 있다.
숫자를 변경하니 제목이 잘리지 않고 2줄까지 잘 나온 것을 볼 수 있다. 단, 제목이 더 길면 2줄까지만 보이고 잘리기 때문에 이를 대비해서 숫자 3을 입력해도 된다.
3. 글 작성 날짜 제거 방법
카테고리의 다른 글 제목 목록 옆에는 글 작성 날짜가 보이게 설정되어 있다. 방문자는 글 정보를 알 수 있지만, 굳이 날짜 공개가 필요하지 않다고 느끼면 간단하게 제거할 수 있다. (사실 본문 글 제목 아래에도 날짜 정보는 있다)
북클럽 스킨 기준 css 편집 창 2502열로 오면 #content .another_category td 클래스 이름이 있다. (카테고리 글 더보기 제목 옆 날짜)
#content .another_category td {
}
기본 설정은 위처럼 패딩, 보더, 폰트 사이즈 세 개 요소가 설정되어 있는데 한 줄을 추가하면 된다.
display: none;
* PC, 타블렛 PC 날짜는 그대로 두고 모바일에서만 감추는 방법은 이 글 맨 아래 있습니다.
display: none; 요소 추가 후 편집 창 위의 [미리보기]를 누르면 위처럼 제목 옆의 날짜가 사라진 것을 볼 수 있다.
화면 폭이 좁은 모바일 버전으로 보면 원래 날짜가 있던 자리까지 제목 글자가 연장된 것을 확인할 수 있다.
그런데 제목이 줄바꿈될 때 글자가 깔끔하게 잘리지 않는 것이 거슬린다면 한 번 더 설정을 진행하면 된다. (두 번째 글 제목을 보면 '...시험으로 작성하는 비'에서 잘린 것을 알 수 있다)
2490열로 오면 #content .another_category th 클래스 이름을 찾을 수 있다. (카테고리 제목 이름)
#content .another_category th {
}
패딩과 폰트 크기만 기본으로 설정되어 있는데 아래 한 줄을 추가하면 단어 단위로 깔끔하게 줄바꿈을 할 수 있다.
word-break: keep-all;
* 참고 : 위에서 #content .another_category th 이름은 3567열에도 있었다. 하지만 해당 이름은 @media screen and (max-width:1080px) 값이 설정되어 있다. 즉 기기 화면 폭이 최대 1080px까지만 적용되서 1080px보다 넓은 PC 화면에서는 적용되지 않는다. 2490열 클래스에 word-break: keep-all; 요소를 추가하면 기기 종류 상관 없이 모두 적용된다.
결과적으로 제목이 글자 단위가 아닌 단어 단위로 깔끔하게 줄바꿈되는 것을 볼 수 있다.
4. 제목 글 밑줄 제거 방법
카테고리 글 더보기를 설정하면 카테고리 이름과 제목 아래 밑줄이 그어져 있는데 만약 불필요하다고 느끼면 간단하게 없앨 수 있다.
css 편집 창 3731열로 오면 #article-view a 클래스 이름이 있다.
#article-view a {
text-decoration: underline; >>> text-decoration: none;으로 변경하면 밑줄이 사라진다.
끝으로 이 블로그에는 1080px 이상 타블렛 PC나 PC에서 접속하면 날짜가 보이고 그 이하 너비 기기에서 접속하면 날짜가 안 보이게 설정했습니다. 또한 1080px 이하 화면에서 접속할 때 제목 간격도 조금 넓게 설정했네요. (margin-bottom 추가)
* 이렇게 설정하려면 조금 전 2502열의 #content .another_category td에 display: none;을 설정하지 않아야 합니다.
혹시 코드가 필요하시면 메모장 파일을 참고해주세요. 북클럽 기본 스킨 기준으로 css 편집 창 3569열에 붙여 넣고 저장하면 적용됩니다. 제목 간격은 직접 수치를 조정하시는 것도 괜찮습니다.
'블로그 정보 > 티스토리' 카테고리의 다른 글
| 티스토리 블로그 카테고리 css 디자인 방법 (0) | 2024.06.21 |
|---|---|
| 티스토리 블로그 목차 사용법과 장단점 정리 (0) | 2024.06.16 |
| 티스토리 블로그 단축키 기능 사용 방법 (0) | 2024.05.22 |
| 티스토리 블로그 이전 발행 글 링크를 사용해야 하는 이유 (0) | 2024.05.17 |
| 티스토리 블로그 북클럽 스킨 회색 줄 없애는 방법 (0) | 2024.05.07 |
| 티스토리 블로그 본문 줄 글자 단어 간격 조정 방법 (0) | 2024.05.03 |
| 티스토리 블로그 저작권 표시 방법 안내 (0) | 2024.04.27 |
| 티스토리 블로그 홈 화면 최신 글, 커버 설정 방법 (0) | 2024.04.23 |
