티스토리 모바일 타이틀 2줄로 만들기(feat. Odyssey 스킨)

티스토리 블로그를 운영하다 보면 포스팅 타이틀이 길어지는 경우가 많습니다.

모바일에서 타이틀이 1줄로 설정되어  말줄임( ...)으로 표시되는 경우,  css소스 2줄로 변경 할수 있습니다.

어떻게 티스토리 포스팅 타이틀를 2줄로 변경할 수 있는지 포스팅해보겠습니다.

 

 

티스토리 모바일 타이틀 변경 방법

 

• PC 크롬 브라우저에서  내 티스토리 블로그를 접속하고 F12 버튼을 누릅니다.
• 오른쪽에 개발자 모드 소스가 보이시면 표시된 빨간색 모바일 버튼을 클릭합니다.

개발자모드로 변경

 

 

 

• 왼쪽에 모바일 단말기 기종을 선택하는 옵션이 보입니다.
• 본인이 자주 쓰는 단말기 기종을 선택합니다. 

단말기 기종 선택

 

 

 

 

• 왼쪽에 드래그 아이콘을 클릭하고 티스토리 타이틀 영역을 클릭합니다.

디버깅 모드

 

 

• 티스토리 타이틀 영역 CSS 소스 속성을 볼수 있습니다.

CSS 스타일 클릭

 

 

 

• 오른쪽에 Styles 탭 보시면 @media screen and 부분을 확인해보세요
• max-height: 24px; 이 부분은 제목 영역 높이입니다. 24px로 되어있네요
•  -webkit-line-clamp: 1; 는 타이틀 줄 수입니다.
• 이제 해당 옵션을 바꿔볼까요?

스타일 변경

 

 

• 아래 가이드대로 숫자를 변경합니다.

'max-height: 40px;' 으로 변경
-webkit-line-clamp: 2; 로 변경

스타일 변경 2

 

 

• 이제 타이틀이 2줄로 변경된 걸 확인할 수 있습니다.
• 아직 끝난 게 아니에요 . 화면상에 임시로 확인한거라 실제 티스토리 블로그 관리자에서 수정해야 합니다.

타이틀 전, 후

 

 

• 이제 티스토리 블로그 관리자 페이지에서 스킨 편집을 클릭합니다.

티스토리 블로그 관리자 페이지

 

 

 

• HTML 편집 버튼을 클릭하고, CSS 탭으로 이동합니다.

html 편집

 

CSS 탭

 

• css에서 2276줄에 있는 '. article-type-common.title '를 찾습니다. 
• 아까 수정했던 대로 max-height: 와 -webkit-line-clamp: 를 수정합니다.
• 수정 완료했으면 적용 버튼을 클릭합니다.

@media screen and (max-width: 1060px)
.article-type-common .title {
max-height: 40px;
margin-bottom: 7px;
font-size: 21px;
font-weight: 400;
-webkit-line-clamp: 2;

CSS 수정

 

 

 

 

• 이제 모바일로 들어가시면 2줄로 표시되는 걸 확인할 수 있습니다.

수정완료

 

 

---

 

티스토리 스킨이 다른 경우 CSS 위치나 텍스트 이름이 조금씩 다를 수 있습니다.

개발자 모드로 스킨을 테스트해보고 적용하는것을 추천드립니다.

 

여기까지 티스토리 모바일 타이틀 2줄로 변경하는 포스팅을 마치겠습니다.

 

구럼 안뇽