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

모바일 환경에서 긴 글 제목이 잘리는 현상은 독자의 가독성을 떨어뜨리고, 블로그 운영에 있어서 중요한 정보 전달에 차질을 줄 수 있습니다. 이번 포스팅에서는 티스토리 수익형 블로그 만들기 시 발생하는 모바일 긴 제목 잘리는 현상을 수정하는 방법을 소개합니다.

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

1. 타이틀 긴 글 제목 줄임 현상 설정

기본 Book Club 스킨을 적용했을 때, 긴 글 제목이 줄임표로 표시되는 현상을 수정하려면 아래의 절차를 따르세요:

1. 블로그 관리 홈 - 꾸미기 - 스킨 편집 - HTML 편집을 클릭합니다.
2. CSS를 클릭 후 Ctrl + F 키를 눌러 ".post-cover .inner > h1 {"를 검색합니다.
3. 2925라인에서 -webkit-line-clamp: 2;를 -webkit-line-clamp: 3;로 수정합니다. 긴 제목을 더 많이 표시하려면 숫자를 높일 수 있습니다.
4. 적용을 클릭하여 변경 사항을 저장합니다.
5. 변경 사항을 확인하여 글 제목이 더 길게 표시되는지 확인합니다.

2. 홈 화면에서 포스팅한 긴 글 제목 줄임 현상 설정

홈 화면에서 긴 글 제목이 줄임표로 표시되는 현상을 수정하기 위해서는, 커버 사용 시와 최신 글 뉴북리스트 사용 시 각각 다르게 설정해야 합니다.

2.1 커버 사용 시 설정

1. Ctrl + F 키를 눌러 ".cover-thumbnail-1 ul li .title {"를 검색합니다.
2. 605라인에서 613라인까지의 .cover-thumbnail-1 ul li .title {를 삭제합니다.
3. 605라인에 아래의 코드를 복사하여 붙여넣습니다:

.cover-thumbnail-1 ul li .title {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}

4. 적용을 클릭하여 변경 사항을 저장합니다.
5. 변경 사항을 확인하여 홈 화면에서 긴 제목이 잘리지 않는지 확인합니다.

2.2 최신 글 뉴북리스트 사용 시 설정

1. Ctrl + F 키를 눌러 ".post-item .title {"를 검색합니다.
2. 1161라인에서 1170라인까지의 .post-item .title {를 삭제합니다.
3. 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;
}

4. 적용을 클릭하여 변경 사항을 저장합니다.
5. 변경 사항을 확인하여 긴 제목이 잘리지 않는지 확인합니다.

마무리

이번 포스팅에서는 수익형 블로그 운영을 위한 티스토리 수익형 블로그 만들기- 모바일 긴 제목 잘리는 현상 설정 방법을 알아보았습니다. 이 설정을 통해 모바일 환경에서도 블로그 글 제목이 온전히 표시되도록 할 수 있습니다. 다음 포스팅에서는 검색 최적화 등록에 대해 다룰 예정이니 많은 기대 부탁드립니다.

참고 링크

• 제휴마케팅 사이트 만들기
• 애드센스 승인 요청하기