티스토리 글을 모바일로 볼때 '제목 잘림' 해결하기

티스토리 블로그에 쓴 글을 모바일(휴대폰)로 보니, 제목이 다 보이지 않고 잘려있습니다.

점 3개 보이시나요? 점 3개로 제목의 뒷부분을 모두 생략하다니요!

이럴 수가!!!!!!!!!!!!!!

이번 시간에는 티스토리 블로그에 쓴 글을 모바일(휴대폰)로 볼 때,

제목이 잘려 보이는 문제를 해결하는 방법을 찾아보겠습니다.

함께 해결해요! ^^

<목차>
1. 티스토리 - 스킨편집
2. CSS (-webkit-line-clamp: 2;)

티스토리 관리 페이지에서 스킨편집 메뉴를 클릭하세요.

이어, html 편집 버튼을 클릭해 주세요.

● 티스토리 관리 페이지 ▶ 꾸미기 ▶ 스킨편집 ▶ html 편집

html 편집 버튼을 클릭하면 화면 상단에 'HTML, CSS, 파일업로드' 메뉴가 보입니다.

이 중, CSS 메뉴를 클릭해 주세요.

CSS 메뉴를 클릭한 후 나타나는 코딩 화면이 있습니다. 먼저 마우스로 이 안을 한번 클릭해 주세요.

그리고 Ctrl(Control) + F 를 클릭해 주세요. *맥북의 경우, Cmd(Command) + F를 클릭해 주세요.

그러면 CSS 메뉴 바로 아래, 텍스트를 찾을 수 있는 입력창이 나타납니다.

● CSS 화면 안에서 마우스 한번 클릭 (이 안을 찜하겠다!) ▶ Ctrl(Control) + F (내용을 Find-찾겠다!)

입력창에 post-cover .inner를 입력하여 내용을 찾아보세요.

Enter 버튼을 누를 때마다 post-cover .inner을 찾아 이동합니다.

입력창 오른쪽에 있는 화살표(↑, ↓)를 클릭해서 이동할 수도 있습니다.

post-cover .inne 옆에 h1이 있는 대목을 찾아보세요.

.post-cover .inner > h1 {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}

이 중, -webkit-line-clamp: 2; 를 찾아보세요.

-webkit-line-clamp: 2; : 제목을 2줄까지만 표현하겠다는 뜻입니다.

저는 3줄로 나타내 볼게요.

2를 3으로 수정한 후 오른쪽 위에 있는 적용버튼을 클릭합니다.

결과가 보이시나요? 모바일로 본 티스토리 글의 제목이 3줄이 되었습니다.

그런데, 여전히 점 3개가 보이네요! 제목이 다 나타나지 않았어요.

5줄로 다시 도전하겠습니다!!

.post-cover .inner > h1 {
display: -webkit-box;
-webkit-line-clamp: 5;
-webkit-box-orient: vertical;
overflow: hidden;
}

모바일로 본 티스토리 글의 제목이 드디어 모두 나타났습니다.

이렇게 간단한 방법이 있었는데, 그동안 방치해 두었던 게 아쉬울 뿐입니다.

필요하신 분들께 도움이 되었기를 기원해요! ^^

티스토리 썸네일 사이즈 변경하기(정사각형으로 만들기)

혹시, 아래의 왼쪽 이미지처럼 글의 대표 이미지가 직사각형 모양으로 되어 있어 이미지 내용이 잘려 보이지 않나요? 글의 내용을 가늠할 수 있도록 설정한 대표 이미지를 썸네일이라고 하는데

young23.linkwe.kr

티스토리 페이지 상단 배경 이미지 삭제하기

티스토리 블로그에 글을 한편 쓰고 나면, 페이지 상단에 업로드한 이미지가 배경 이미지로 나옵니다. 이렇게 배경 이미지가 보이면 제목이 잘 안보이기도 하고, 산만한 느낌을 주기도 합니다. 1.

young23.linkwe.kr

VR(가상 현실), AR(증강 현실), MR(혼합 현실) 무엇이 다를까요? (0)	2023.04.13
맥북 트랙패드 더블 클릭하면 파일이 안 열려요! (해결방법) (0)	2023.04.12
워드프레스 '좋아요' 버튼 설치하기 (LikeBtn 플러그인) (0)	2023.04.10
워드프레스 로그인 주소 변경 (iThemes Security) (0)	2023.04.06
티스토리 썸네일 사이즈 변경하기(정사각형으로 만들기) (0)	2023.04.05

청춘23