고래스킨, 제목 잘리는 현상 수정하기

최근 티스토리 블로그를 운영하시는 분들 중에서 티스토리 기본 스킨 외에 '이용자 제작 스킨'이라고 하여 무료로 스킨을 배포해주시는 분들이 많습니다.

고래스킨도 그중 하나인데요, 저 역시 고래스킨을 사용하고 있습니다.

 

그런데 아무리 잘 만들어진 스킨이라 해도 예상치 못한 버그나 오류가 있을 수도 있고, 또 사용자 본인이 좀 더 자신이 원하는 대로 세팅하고 싶을 때가 있습니다.

이런 의미에서 오늘은 '고래스킨4.0 버전의 제목이 잘리는 현상 수정하는 방법'을 알아보도록 하겠습니다.

 

휴태폰and고래

  

 CSS 편집을 통한 제목 안 잘리게 편집하는 방법

 

처음 고래스킨을  설정하고 나서 포스팅을 하고 나면 아래와 같이 제목이 길 경우 잘리는 현상이 있습니다.

고래스킨 기본 세팅 외에 수정해야 하는 초기 설정 및 제목 안 잘리게 다시 세팅하.....

바로 이런 현상을 수정하는 방법은 의외로 매우 간단합니다. 

 

1.  그러기 위해서는 일단 관리자 화면으로 들어가서 >> 스킨 편집 >> 상단 우측의 HTML 편집 클릭 >> CSS 편집으로 들어갑니다.
2.  CSS 화면 빈 곳 아무 데나 커서를 이동한 뒤 ctrl + f를 누르면 검색창이 나타납니다.
3.  검색창에 'white-space'를 입력하여 해당 부분을 찾아냅니다.

 

 변경할 부분 검색 및 수정하기

 

● 검색어를 찾아 이동하면 다음과 같은 부분이 나타납니다. 

  

list_detail_wrap .post_title {
    margin-bottom: 5px;
    display: block;
    white-space: nowrap;    ☜  변경할 곳!
    text-overflow: ellipsis;
    max-width: 728px;
    overflow:hidden;
    color: #333;
    font-weight: 600;
    line-height: 140%;
    font-size: 17px !important;

 

● '변경할 곳'이라고 표시한 부분의 nowrap을 normal로 변경해줍니다.

  

list_detail_wrap .post_title {
    margin-bottom: 5px;
    display: block;
    white-space: normal;    ☜  변경된 상태
    text-overflow: ellipsis;
    max-width: 728px;
    overflow:hidden;
    color: #333;
    font-weight: 600;
    line-height: 140%;
    font-size: 17px !important;

 

  

이렇게 변경하고 나면 아래와 같이 제목이 안 잘리고 잘 구현됩니다. 매우 간단하지 않습니까?

▼

(제목 잘림 현상을 수정한 이후 구현된 모습)

 

그러나 '이전 글 넣기'를 하여 불러온 이미지 링크에서의 제목은 아래와 같이 변경되지 않으니 참고하시기 바랍니다.

▼

[영화 메모리즈 에피소드3] 대포도시, 이 세상의 적은 과연 존재하는가?