티스토리 오디세이 스킨에서 블로그 글 제목 글자 크기 조정하기

티스토리 공식 스킨 중 하나인 오디세이(Odyssey)를 사용하는 경우 블로그 글 제목이 길어지면 제목 일부만 표시됩니다. 특히 모바일에서 이런 현상이 두드러집니다. 제목이 긴 경우에도 모두 혹은 일정 길이 이상 표시되도록 하고 싶은 경우에는 CSS를 사용하여 제목 글자 크기를 조정하는 것을 고려할 수 있습니다.

티스토리 오디세이 스킨에서 블로그 글 제목 글자 크기 조정하기

이 티스토리 블로그에는 현재 오디세이(Odyssey)라는 스킨이 적용되어 있습니다.

깔끔한 스킨을 원하는 경우 괜찮은 선택 같습니다.

이 스킨을 사용하는 경우 블로그 제목이 긴 경우 그림과 같이 제목 일부만 표시되고 나머지는 생략 기호(...)로 표시됩니다.

특히 모바일에서 이 현상이 두드러집니다. 모바일에서 블로그 글에 접속하더라도 제목이 길면 위의 그림과 같이 제목 앞부분 일부만 표시되므로 해당 글이 어떤 주제를 다루는지 파악하기 어려울 수 있습니다.

저는 다음과 CSS 코드를 추가하여 제목의 글자 크기를 PC, 태블릿, 모바일 기기에 대하여 별도로 지정했습니다.

/* 오디세이 스킨의 블로그 제목 글자 크기 변경하기 */
.article-header .title-article {
     margin: 5px 0 28px 0;
    font-size: 36px;
}

@media screen and (min-width: 769px) and (max-width: 1060px) {
.article-header .title-article {
 font-size: 28px;
 margin: 10px 0 23px 0;

}
}

@media (max-width: 768px) {

.article-header .title-article {
    font-size: 20px;
    margin: 10px 0 23px 0;
}
}

숫자값은 적절히 변경하시기 바랍니다. 기본적인  CSS를 이해하면 쉽게 응용이 가능합니다.😊😊😊

CSS 코드는 스킨 편집의 CSS 섹션에 추가하세요. 위의 코드를 적용하면 모바일 기기에서 블로그 글 제목의 글자 크기는 20px로 설정됩니다.

참고

https://avada.tistory.com/3203

티스토리 오디세이 스킨: 사이드바 고정하기

https://avada.tistory.com/2897

엘리멘터 무료 버전 vs. 프로 버전 비교

https://avada.tistory.com/3046

해외웹호스팅: 클라우드웨이즈 vs. 블루호스트 vs. 카페24 비교 (Cloudways vs. Bluehost vs. Cafe24)