티스토리 운영
모바일 긴 제목 잘리는 현상 설정
기본 Book Club 스킨을 적용 후 모바일에서 글 제목이 잘라는 현상을 수정하자.
- 글 제목이 길면 제목의 일부만 표시되고 나머지 부분은(....) 줄임표 표시된다.
1. 타이틀 긴 글 제목 줄임 현상 설정
작성한 글 제목 잘린 현상 설정
- 포스팅한 글을 클릭해 보면 아래 사진처럼 긴 글 제목이 줄임표로 표출된다.
- 블로그 관리 홈- 꾸미기- 스킨 편집- html 편집 클릭
- Ctrl + F 키를 눌러 ".post-cover .inner > h1 {"를 검색
- 또는 2925라인 -webkit-line-clamp: 2를 -webkit-line-clamp: 3로 수정
(본인이 긴 제목을 쓴다면 더 높은 숫자로 늘려도 된다.)
- webkit-line-clamp이 본문 제목 표시 줄 수를 지정하는 항목이다.
- 적용
- 변경 확인
2. 홈 화면에서 포스팅한 긴 글 제목 줄임 현상 설정
홈 화면에서 포스팅 한 글 제목이 줄여진 현상 설정
홈 설정 -커버 사용시
- 블로그 홈 화면에 포스팅한 글의 제목이 긴 것은....으로 표시되어진다.
- Ctrl + F 키를 눌러 ".cover-thumbnail-1 ul li .title {"를 검색
- 또는 605라인~613라인 .cover-thumbnail-1 ul li .title {부터 }를 삭제
- webkit-line-clamp이 본문 제목 표시 줄 수를 지정하는 항목이다.(줄 수는 본인이 맞게 조정한다.)
- 605라인에 복사 붙어 넣기
.cover-thumbnail-1 ul li .title {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
- 적용
- 변경 확인
홈 설정 -최신글 뉴북리스트 사용시
- 블로그 홈 화면에 포스팅한 글의 제목이 긴 것은....으로 표시되어진다.
- Ctrl + F 키를 눌러 ".post-item .title {"를 검색
- 또는 1161라인~1170라인 .post-item .title {부터}를 삭제
- webkit-line-clamp이 본문 제목 표시 줄 수를 지정하는 항목이다.(줄 수는 본인이 맞게 조정한다.)
- 1161라인 복사 붙여 넣기
}
.post-item .title {
word-wrap:break-word
display: block;
display:-webkit-box;
-webkit-line-clamp:4;
-webkit-box-orient:vertical;
overflow: hidden;
max-width: 98%;
margin-bottom: 4px;
padding-top: 9px;
}
- 필자는 이전 포스팅 티스토리 수익형 블로그 만들기-블로그 초기 최적화 설정에서 로딩을 조금이나마 빠르게 하기 위해 1개로 설정하라고 한 바 있으나, 방문자 입장에서 사용상 불편함을 느껴 6개로 조정한다.
- 또 한, 필자의 경우 홈 설정을 커버 사용보다는 최신 글 뉴북리스트를 사용한다. 이유는 한 눈에 여러 컨텐츠를 보여 줄수 있기 때문이다.
마무리
- 이번 포스팅은 수익형 블로그 운영을 위한 티스토리 수익형 블로그 만들기- 모바일 긴 제목 잘리는 현상 설정 4탄에 대해 알아봤습니다.
- 다음 포스팅엔 검색 최적화 등록에 대하여 포스팅하겠습니다.
관련 글
2. 티스토리 수익형 블로그 만들기-블로그 이름 정하기 및 프로필 설정
3. 티스토리 수익형 블로그 만들기-블로그 초기 최적화 설정
4. 티스토리 수익형 블로그 만들기-디자인 스킨 고급 설정 1탄
마지막으로, 제 글을 끝까지, 읽어 주셔서 감사드립니다.
그래도 제 글이 도움이 되셨다면 공감과 댓글 부탁드립니다.
'수익형 블로그 > 티스토리 운영' 카테고리의 다른 글
구글애드센스 신청방법-티스토리 수익형 블로그 만들기 (0) | 2020.07.25 |
---|---|
티스토리 수익형 블로그 만들기- 검색 최적화을 위한 검색 등록 (0) | 2020.07.25 |
티스토리 수익형 블로그 만들기-디자인 스킨 고급 설정 3탄 (2) | 2020.07.24 |
티스토리 수익형 블로그 만들기-디자인 스킨 고급 설정 2탄 (5) | 2020.07.23 |
티스토리 수익형 블로그 만들기-디자인 스킨 고급 설정 1탄 (0) | 2020.07.23 |