티스토리 전체 너비 변경 (전체 너비에 따른 블로그 제목 글 제목 위치 수정)

오디세이 스킨 기준입니다.

 

1. 블로그 관리 - 스킨 편집 - html 편집 - css

2. cmd + f 혹은 ctrl + f 후 /* main */ 검색

/* main */
.main {
    width: 100%;
    max-width: 1200px; /* 기존 1020 에서 변경 */
    margin: 0 auto;
}

/* area-main */
.area-main {
    width: 100%;
    max-width: 1200px; /* 기존 640 에서 변경 */
}

3. 두 개의 max-width 를 1020 에서 1200 으로 변경

area-main 은 main 보다 작은 본문 영역이지만 어차피 본문 크기보다 작으므로, 1200 으로 지정하면 최대값으로 설정된다.

 

4. cmd + f 혹은 ctrl + f 후 article-header 검색

.article-header .inner-header {
    max-width: 1200px; /* 기존 1020 */
    margin: 0 auto;
    color: rgb(0, 0, 0);
}

.article-header .box-meta {
    position: absolute;
    bottom: 56px;
    width: 100%;
    max-width: 896px; /* 기존 780 에서 변경 */
    z-index: 2;
}

...

.article-header .title-article {
    display: block;
    width: 100%;
    max-width: 860px; /* 기존 760 에서 변경 */
    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: 3;
    -webkit-box-orient: vertical;
    white-space: normal;
    word-break: keep-all;
}

5. 세 개의 max-width 를 변경.

box-meta 는 본문, 글쓴이, 날짜 올라가 있는 박스를 의미한다.

title-article 은 본문 제목 텍스트를 말하는 것인데 896px 까지 땡겨도 되지만 좀 여유를 두는 게 더 이쁜 것 같다.