티스토리 북클럽 모바일 화면에서 제목 잘려서 보이는 경우 CSS 수정하는 방법

티스토리 블로그 북클럽 기준으로 모바일 화면 혹은 화면 스크린 사이즈가 작을 때 제목이 다 나오지 않는 경우가 있습니다. 제목이 잘려서 보이는 경우인데요. 모바일로 접속한 유저들은 제목이 다 안 보여서 당황스러울 것입니다. 노트북으로만 글을 포스팅하고 휴대폰으로 확인을 안 하면 이러한 경우가 생기는데요. 오늘은 이러한 문제를 해결하기 위해 CSS 수정을 하도록 하겠습니다. 

모바일화면에서 제목 잘려서 보이는 현상

휴대폰에서 동일한 홈페이지가 모바일앱 자동연결 설정에 따라 다르게 보임

▲ [모바일 연동을 사용하지 않은 웹페이지] 와 [모바일 연동을 사용한 웹페이지]를 비교하면 왼쪽의 글 제목이 잘려서 다 보이지가 않습니다. 

 

스마트폰 모바일에서 자신의 블로그를 가끔씩 확인해보시기 바랍니다.   [꾸미기]→ [모바일] 항목에서 <티스토리 모바일웹 자동 연결을>  '사용하지 않습니다.' 로 설정하신 분들은 위와 같이 제목이 잘려서 보입니다. 휴대폰에서 모바일 버전이 아니라 PC 버전으로 보이게 하기 때문에 제목이 잘리는 것입니다. PC 버전으로 보이게 하는 이유는 애드센스 광고 때문이죠. 광고가 PC 버전과 동일하게 송출되기 때문입니

다. 

 

참고로 티스토리 블로그를 모바일 연동을 사용하면, 사용자가 블로그에 접속할 때 자신의 블로그 뒤에 자동으로 /m 이 붙어서 모바일 버전 웹페이지로 보이게 해 줍니다.

 

모바일 연동을 사용하지 않는 설정 상태로 제목이 다 나오게 하는 방법을 알아보고자 합니다. 아래 순서대로 천천히 따라 하시면 될 것 같습니다.

 

모바일화면에서 제목 잘리는 현상 해결

사실 모바일에서 PC 버전을 보여줄 때 제목 줄 수 설정이 적어서 그렇습니다. 2줄로 되어 있는데, 이것을 4줄로 늘려주면 위와 같은 문제가 해결됩니다. 모바일에서 제목이 잘려서 보이는데요. PC에서도 창을 줄여주면 저렇게 보입니다. 가로폭 사이즈 픽셀이 작아지면 저련 현상이 발생합니다. 스크린 픽셀값이 낮을 때 설정하는 것이 있는데요. 그것은 조금 복잡해서 나중에 알려드릴게요.

1) 스킨편집 이동

• 블로그 관리자 페이지에서 스킨편집 메뉴 이동하여 새창이 뜨면 html 편집 누른 후 css 탭으로 이동합니다. 
• 관리자 → 꾸미기 → 스킨편집 → html 편집 → css

2) 검색 이동

• CSS 편집창 안에 마우스 클릭을 반드시 하고 난 후, Ctrl + F를 눌러 'post-cover .inner>h1'을 검색하여 이동합니다. 

3) 제목 라인 행 수 수정

-webkit-line-clamp:  값을 2에서 4로 변경

• 아래 그림처럼  -webkit-line-clamp: 2;  ☞  -webkit-line-clamp: 4;   라인을 수정하고 적용을 눌러줍니다. 
• line-clamp : CSS에서 보이는 텍스트 행의 수를 정합니다. 기존 모바일 화면에서는 제목이 2줄이 넘어가면 생략되도록 설정되었지만 이 값을 4로 변경해줌으로써 4줄까지 화면에 보이도록 수정하였습니다. 

4) 결과 

아래와 같이 스크린 사이즈가 작은 환경 즉 모바일화면에서도 글의 제목이 잘리지 않고 잘 보이는 것을 알 수 있습니다. 이것은 제목 행의 수를 늘렸기 때문입니다. 밑에 본문박스와 글 사이가 겹쳐 보이네요. 수정하는 방법은 지난 시간에 포스팅하긴 했는데요. 사실 이 자시에 광고가 들어갈 예정이라 따로 수정하지는 않을 예정입니다. 아직 애드센스 승인 전이라서요.

2022.12.22 - [수익형 블로그 만들기/티스토리] - [티스토리 북클럽 스킨] 포스팅 본문 제목 영역 폰트, 크기, 배경 이미지 편집하는 방법

 

이상으로 오늘은 모바일 화면과 같은 가로 사이즈가 작은 스크린 환경에서도 글의 제목이 잘 다 보이도록 설정하는 방법을 알아보았습니다. 사실 어려운 것도 아닌데 말이죠. 무슨 원인 때문인지 찾기 어렵기 때문에 시간이 많이 걸리는 것이 사실입니다. 하나씩 알아가면서 블로그 생활을 하니 정말 뜻깊고 보람되네요. 방문자수도 많이 늘어야 더욱 보람찰텐 데요...ㅎㅎㅎ 많은 도움이 되셨기를 바라면서 이만 글을 줄이겠습니다.