IT

티스토리 북클럽 스킨 리스트 제목 말줄임(…)대신 전체표시 되게

티스토리 스킨 중에 가장 인기있는 스킨 중 하나가 북클럽이다. 필자도 북클럽이 공개된 이후로 지금껏 계속 사용해왔다. 물론 중간에 다른 스킨으로 변경했던 시기도 있었으나 결국 다시 북클럽이다. 북클럽만의 깔끔함을 다른 스킨에서 찾아보기 힘들다. 오딧세이도 거의 비슷하지만 개인적으로 북클럽 레이아웃이 마음에 든다. 특히 본문 내용에 집중할 수 있다는 점에서 아주 높은 점수를 준다. 몇군데 마음에 안드는 부분은 직접 고쳐가면서 사용한다. 이 번에 수정한 부부는 리스트 화면에 제목이 길어질 경우 자동으로 말줄임이 되어 전체 제목이 나타나지 않고 끝 부분에 …으로 표시가 된다. 제목이 정확히 노출이 되어야 본문이 어떤 내용인지 더 정확히 전달해 클릭율을 높일 것 같다는 생각에 말줄임 대신에 전체 제목이 나오도록 변경해주었다. 매우 간단하게 변경할 수 있기에 HTML/CSS를 모른다 할지라도 누구나 쉽게 따라 할 수 있도록 설명하도록 하겠다.

티스토리 북클럽 스킨 리스트 제목 말줄임(…)대신 전체표시 되게

 

티스토리 북클럽 스킨 리스트 제목 말줄임(…)

티스토리 북클럽 스킨 리스트 제목 말줄임(…) 데스크탑 화면 Before
티스토리 북클럽 스킨 리스트 제목 말줄임(…) 데스크탑 화면 After

 

티스토리 북클럽 스킨 리스트 제목 말줄임(…) 모바일 화면 Before
티스토리 북클럽 스킨 리스트 제목 말줄임(…) 모바일 화면 After

 

티스토리 북클럽 스킨 리스트 제목 말줄임(…) 대신 전체표시 하기

블로그 관리> 꾸미기/스킨편집 > html 편집 > CSS

1. 스킨 html 편집 CSS 코드화면으로 이동한다.

.post-item .title 검색

2. CSS 화면에서 Ctrl+F 를 눌러 .post-item .title을 검색한다.


3. .post-item .title 내에 whtie-space의 값을 기본 nowrap에서 normal로 변경한다.


4. nomal;로 변경했으면, 우측 상단에 적용버튼을 눌러 수정 코드를 적용시킨다.

5. 이후 블로그에 접속해 데스크탑과 모바일에서 정상적으로 반영이 됐는지 확인한다.

 

나가는 글

Ctrl+F로 키워드 찾기와 다섯글자 변경만으로 해당 문제를 해결했다. 간단하다. 누구나 할 수 있다. 이로써 제목이 줄여서 나오는게 아니라 전체 제목이 나타난다. 블로그를 찾는 이들에게 보다 정확한 정보를 주어 콘텐츠 클릭이 증가할 것으로 예상한다.

Related Posts

SKT 선택약정할인 할인반환금 휴대전화요금 25%할인 유의사항

SKT 선택약정할인 할인반환금 휴대전화요금 25%할인 유의사항

선택약정할인제도 선택약정할인제도는 단말 지원금을 받지 않는 고객에게 요금 할인 혜택을 제공하는 제도이다. 이 제도는 지급 단말, 중고 단말, 신규 단말 이용 고객 모두에게 적용되며, 요금 상품 선택과 12/24개월의…

도장만들기 전자서명 전자결재용 도장 이미지 무료 생성 로또번호자동생성기 추천사이트 STAMPNG

도장만들기 전자서명 전자결재용 도장 이미지 무료 생성 로또번호자동생성기 추천사이트 STAMPNG

취업, 이직 준비나 정부 지원금 신청 할 때, 문서 작업시 대부분 이름과 서명란이 있다. 매번 느끼지만 디지털과 아날로그의 경계에 있는 듯한 느낌이다. 서명란에 싸인이나 도장을 삽입하는 과정은 간단해…

GitHub 콘솔 git add, git commit, git push 명령어 정리

GitHub 콘솔(명령줄 인터페이스)에서 커밋하는 방법은 여러 단계로 구성된다. 여기서는 Git을 사용하여 변경사항을 커밋하고 GitHub 저장소에 푸시하는 기본적인 절차를 안내한다. 이 과정을 시작하기 전에, 로컬 컴퓨터에 Git이 설치되어 있어야…

알리익스프레스 Windows Hello 내돈내산 웹카메라 구매 후기 및 설치 드라이버

알리익스프레스 Windows Hello 카메라 내돈내산 후기 및 드라이버

필자가 가지고 있는 랩탑 레노버 씽크패드 P14S에서는 Windows Hello 기능이 지문과 얼굴인식으로 되어 전원을 켜거나 브라우저에서 로그인할 때, PIN번호를 누르지 않아도 지문 또는 얼굴인식으로 간단히 해결 할 수…

A4용지에 프린트해 사용하는 무료 탁상달력 웹사이트 a4calendar

A4용지에 프린트해 사용하는 무료 탁상달력 웹사이트 a4calendar

요즘은 달력 구하기가 힘들다. 은행에서 항상 나눠주던 달력이 이제는 그 제작부수를 줄여 선착순 또는 이벤트로 지급하는 방식으로 바뀌면서 달력 구하기가 하늘의 별따기가 되버렸다. 벽걸이 형 달력도 그럴진데, 탁상에…

[CSS] 버튼 디자인 및 생성 사이트 Best Button Generator

[CSS] 버튼 디자인 및 생성 사이트 Best Button Generator https://www.bestcssbuttongenerator.com/ Best CSS Button Generator는 웹사이트 버튼의 CSS 스타일을 쉽고 빠르게 생성할 수 있는 무료 온라인 도구이다 초보자부터 경험…

답글 남기기

이메일 주소는 공개되지 않습니다. 필수 필드는 *로 표시됩니다