모바일에서 티스토리 포스팅 긴 제목 잘리는 문제 해결하기 (북클럽 스킨) / 블로그 초보

안녕하세요 여러분~😘
오늘은 가뭄에 콩 나듯 하는
소소한 꿀팁 포스팅이에요 ㅋㅋ

저는 아시다시피
블로그를 시작한지 이제 막 1년 정도 된 데다가
글 개수가 아직 100개도 안 되는,
html이 아직도 뭔지도 모르는
초보 블로거예요 😅

초보 블로거다 보니까
제목도 그냥 내가 적고 싶은데로 길~~~게 적고
그랬단 말이죠

그리고 순진하게도
내가 보는 화면만 신경 쓰다 보니까
제목이 잘리는 문제에 대해서
정말 1도 생각을 안 했단 말에요

그런데
제 블로그 방문 유입의 디바이스 통계를 보면
모바일이 70%가 넘어요..
그 말인즉슨,
요즘은 다들 스마트폰을 이용해서
블로그 방문한다는 거잖아요

그래서 하루는 심심해서
제 폰으로
내 블로그 포스팅을
포털사이트에서 검색해서 들어가면
어떻게 보일까 궁금해서 검색해봤단 말이죠
남이 보는 내 포스팅 모습이 궁금했던 거죠

그랬더니 세상에나 😱😱😱
제목을 좀 길게 적었던 포스팅이 있었는데
제목이 다 잘려서
제목이 거의 안 보이는 거예요!
제목을 길게 적는 편이라
거의 모든 포스팅 제목이 잘려 나간 거죠

그러니까 티스토리에서 방문하시는 구독자님들에겐
정상적인 제목으로 보이겠지만
포털사이트에서 순수 검색으로 방문하는 사람들에겐
포스팅 제목이 다 잘려서 보였을 거란 거죠....
ㅜㅜㅜㅜㅜㅜㅜ
그걸 1년이 되어서야 알아챈 나란 인간ㅎㅎ

그래서 그 긴 제목 다 보이도록 수정하는 방법을 검색했는데
대부분은 PC환경에서 제목 잘리는 문제라던지
모바일에서는 글 목록에서 제목 잘리는 문제를
해결하는 방법이지
저처럼 포스팅을 볼 때 제목 잘리는 문제 해결은 아니더라고요
아 물론 저 방법들 따라 하면서
저 문제들도 자동 해결되긴 했습니다만......

그래도 어찌어찌 포스팅 볼 때
긴 제목 잘리는 문제 해결법을 찾아내서
정리해보려고 합니다

내가 보는 포스팅 제목은 멀쩡함

티스토리 앱에서 보는 제 포스팅인데
제목이 멀쩡하게 다 나오죠
맨날 이렇게만 확인하니까
저는 남들에게도
이렇게 제목이 다 보여질 줄 알았던 거죠!
하지만 그것은 착각일 뿐.......🤦‍♀️

문제의 심각성 인지

그러다가 포털사이트에서
제 포스팅 검색해서 들어와 봤는데
이렇게 긴 제목이 두줄까지만 나오고
뒤에는 점 세 개로 잘려 나가 있는 걸 발견!

이건 뭐 검색해서 방문하는 사람들에겐
이 포스팅 주제가 뭔가 싶은
심각한 문제인 거죠

물론 제가 제목을 너무 길게 적은 탓도 있으니까
좀 줄일 필요도 있겠죵

어쨌든 해결하러 고고!

css 편집

일단 제목이 지금 2줄까지만 나오는 상태잖아요
그래서 줄 수를 늘려줄 거예요

블로그 관리 > 꾸미기 > 스킨 편집 > html 편집 > CSS 선택
사진상 가운데 보면 CSS가 빨갛게 선택되어 있죠?

편집기 화면 한번 클릭하시고 Ctrl+F 눌러서
post-cover을 검색하셔도 되지만
post-cover가 한두 개가 아니니까
그냥 대충 2920번대까지 스크롤 쭉 내리세요

그래서
post-cover . inner > h1을 찾아주세요
거기서 webkit-line-clamp가 2로 되어 있는데
이게 제목 줄 수 더라구요
이걸 저는 5 정도로 바꿔볼게요

그리고 오른쪽 상단에 적용 누르고
가운데 상단에 새로고침 해주세요

어떻게 바꼈는지 볼까요?

제목 줄 수 고침

5로 바꿨더니
제목이 5줄까지 나왔는데
그래도 제목이 길어서 뒤가 잘렸어요!

딱 봐도 글자 크기가 넘 크죠?
줄 수를 아무리 늘려도 한계가 있을 거 아녜요
그러니까 이제 포스팅 제목 글자 크기를 줄여볼게요

제목 글자 크기 줄이기

다시 아까처럼 CSS에 들어가서
이번엔 post-cover h1을 찾습니다
여기서 빨간 박스 안에 있는
font-weight은 폰트 굵기를 뜻하고요
font-size 이게 글자 크기를 뜻한다고 해요

기본값이 아마 300이랑 2.125으로 되어 있을 건데
이걸 저는 500이랑 1.5로 바꿔볼게요
굵기는 더 굵게, 크기는 작게 바꾸는 거죠

어떻게 됐는지 볼까요??

.

.

.

.

.

.

 

 

 

 

긴 제목 안잘리게 됨

짜잔!!
글자가 굵어진 줄은 잘 모르겠는데
크기는 확실히 작아졌어요! 오예!! ㅋㅋ
이걸 할 줄 몰라서 얼마나 고생했던지 하.....
post-cover가 한 두 개여야 말이죠~

5줄로 넉넉하게 바꿨더니
이제는 제목에다가 온갖 소리를 다해도
안 잘릴 거 같은 든든함이 생겼네요

티스토리 초보분들 있으시다면
본인 포스팅 포털 사이트에서 검색해서 확인해보시고
같은 문제가 있다면
저처럼 해결 잘 되시면 좋겠어요!😆

이상 포스팅 볼 때 긴 제목 잘리는 문제 수정하는 소소한 꿀팁이었습니다!
👏👏👏👏