티스토리 기본스킨 Odyssey 글 제목 잘릴 때 영역 길이 늘리기

현재 내 티스토리 스킨은 기본 스킨인 Odyssey다.
기본 스킨 중에 그나마 이게 마음에 들어서 사용중이다.
티스토리 운영하면서 군데군데 고쳐갈 예정이다.

 

 

 

1. 문제현상

 

Odyssey 스킨은 글 제목이 길면 잘린다.

 

Odyssey 스킨은 글 본문 영역을 너무 좁게 설정해놔서 글 제목이 길면 글씨가 잘린다.
이 글은 티스토리 기본 스킨인 Odyssey 에서 글 제목이 잘리는 현상을 해결하기 위한 설정법을 적어놨다.
되게 간단하다. 스킨 편집에서 CSS 부분의 값만 바꿔주면 된다.

 

 

<글 제목이 잘리는 Odyssey 스킨의 원래 기본 설정>

.article-header .box-meta {
    position: absolute;
    bottom: 56px;
    width: 100%;
    max-width: 780px;
    z-index: 2;
}

.article-header .box-meta p {
    margin: 0;
}

.article-header .box-meta .category {
    margin-bottom: 12px;
    font-size: 14px;
    font-weight: 600;
}

.article-header .title-article {
    display: block;
    width: 100%;
    max-width: 760px;
    margin: 0 0 33px 0;
    font-size: 48px;
    font-weight: 400;
    line-height: 1.4;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    white-space: normal;
    word-break: keep-all;
}

 

 

 

2. Odyssey 스킨 글 제목 잘림 해결 방법

<Odyssey 스킨 글 제목 영역 늘리기위한 설정>

.article-header .box-meta {
    position: absolute;
    bottom: 56px;
    width: 100%;
    max-width: 1000px;   /*여기 값을 원하는 만큼 늘리면 된다.(글 제목 영역길이)*/
    z-index: 2;
}

.article-header .box-meta p {
    margin: 0;
}

.article-header .box-meta .category {
    margin-bottom: 12px;
    font-size: 14px;
    font-weight: 600;
}

.article-header .title-article {
    display: block;
    width: 100%;
    max-width: 1000px;   /*여기 값을 원하는 만큼 늘리면 된다.*/
    margin: 0 0 33px 0;
    font-size: 48px;
    font-weight: 500;    /*이건 글 제목의 굵기*/
    line-height: 1.4;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    white-space: normal;
    word-break: keep-all;
}

 

 

 

Odyssey스킨 글 제목이 이제 잘리지 않고 잘 나온다.

값을 위처럼 변경하면 이런 형태의 스킨이 나온다.
글 제목 두께도 조금 더 두껍게 바꿨다.

---

CSS 설정할 때는 혹시모를 위험을 방지하기 위해 항상 코드 백업을 해놔야한다.
그리고, 크롬- F12(개발자모드)에서 HTML이나 CSS설정을 변경해서 미리보기를 할 수 있다.
F5누르면 기본 설정화면으로 돌아감.

---

+)
SQL구문을 적을 때 코드블럭을 위한 코드 문법 강조 플러그인이 제대로 작동 안하는 경우가 더 많아서 구글링으로 코드블럭 설정을 변경했다.
코드블럭은 많은 사람들이 애용하는 highlight.js 를 사용중이다.

SELECT 컬럼명 FROM 테이블명 WHERE REGEXP_LIKE(컬럼명, '^[a-zA-Z]{3}-\d{2}$');

△코드블럭 적용예시

코드블럭 수정방법은 구글링하면 티스토리에 많은 분들이 적어놓았다. 나도 보고 따라했다.