티스토리 수익형 블로그 만들기- 모바일 긴 제목 잘리는 현상 설정 4탄

 티스토리 운영 

 

 

모바일 긴 제목 잘리는 현상 설정

 기본 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탄에 대해 알아봤습니다.

- 다음 포스팅엔 검색 최적화 등록에 대하여 포스팅하겠습니다. 

 

 

관련 글

1. 티스토리 수익형 블로그 만들기-가입방법

2. 티스토리 수익형 블로그 만들기-블로그 이름 정하기 및 프로필 설정

3. 티스토리 수익형 블로그 만들기-블로그 초기 최적화 설정

4. 티스토리 수익형 블로그 만들기-디자인 스킨 고급 설정 1탄

5. 티스토리 수익형 블로그 만들기-디자인 스킨 고급 설정 2탄

6. 티스토리 수익형 블로그 만들기-디자인 스킨 고급 설정 3탄

 

 

 

마지막으로, 제 글을 끝까지, 읽어 주셔서 감사드립니다. 
그래도 제 글이 도움이 되셨다면 공감과 댓글 부탁드립니다.