티스토리 오디세이 스킨 제목 조절, 배경 삭제, 헤더에서 본문 위로 옮기기

엄청 큰 제목, 상단에 가득 차 있는 오디세이 제목을 작게 만들고 본문 위로만 보이게 해서, 사이드바와 같이 보이며 활용할 수 있고 그리고 배경이 제거된, 사실은 일반적인 스킨의 구조의 모습으로 바꿔보겠습니다.

 

원래 제목의 모습

 

오디세이 스킨, 가장 먼저 눈에 띄고 걸리적거리는 부분이 이 부분이었습니다. 제목 배경으로 썸네일이 쓰이면서 뭔가 독특한 느낌의 장점도 있겠지만, 이렇게 까지 클 필요 있나 싶을 정도로 너무 큽니다. 그래서 조금 작게만 쓰고 싶어서 변형도 해보았지만, 제가 원하는 모습이 따로 있어서 별로였습니다.

그게 바로 본문 위로 보이게 해서 사이드바를 보이게 하는 방법이었는데 , 조금씩 그 방법을 공부하고 있었는데, 드디어 알아내었습니다. 원래 다른 스킨들이면 일반적인 모습일텐데, 오디세이 컨셉 때문에 아이러니하네요.

 

티스토리 오디세이 스킨 제목 조절, 배경 삭제, 헤더에서 본문 위로 옮기기

 

안녕하세요 사람사물상황입니다.

사실 오디세이 스킨 수정에서 가장 먼저 알아봤던 수정 방법이 가장 늦게 알게 됐네요.

이게 검색으로도 안 나오고 그래서 혼자 만져보며 그랬는데, 우연히 이게 수정된 스킨을 봤고 그 스킨을 뜯어보니 방법을 알게 되었습니다. 그래서 왜 이렇게 가능한 건가 궁금해서, 변경된 코드를 구글링 해서 알아보던 중에 원본 글을 발견했습니다. 그래서 완성이 되었어요. 일단 그분에게 감사를 드리며 링크를 남기겠습니다.

suusuus.tistory.com/37

오디세이 스킨 본문 상단 이미지 없애고 사용하는 방법 코드공유

이 분의 글 제목을 보니 제가 분명히 봤었던 글입니다. 근데 그냥 넘어갔던 이유가 있네요. 이분은 그냥 상단 이미지 없애는 방법이라고만 하셔서 그런 것 같습니다. 사실 이게 그냥 이미지만 없애는 게 아니고 저기 틀을 완전히 바꾸는 거거든요.

 

본론적으로 방법은

1. 해당 코드를 수정, 삭제.

2. 그에 따른 레이아웃 위치 조정.

 

1. 해당 코드를 수정, 삭제.

css 2727행 의 원본입니다. 

 

/* area-view - 상세 페이지 */
/* article-header */
.article-header {
    position: absolute;
    top: 0;
    left: 50%;
    width: 100vw;
    height: 400px;
    margin-left: -50vw;
    padding: 0 20px;
    background-size: cover;
    background-position: 50% 50%;
}

.article-header:before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 1;
}

.article-header .inner-header {
    max-width: 1020px;
    margin: 0 auto;
    color: #fff;
}

.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;
}

 

이걸 이걸로 바꿉니다.

 

/* area-view - 상세 페이지 */
/* article-header */
.article-header {
  background-image: none!important;
}

.article-header:before {

}

.article-header .inner-header {
    max-width: 1020px;
    margin: 0 auto;
    margin-bottom: 45px; 
    padding-bottom: 35px; 
   /* border-bottom: 1px solid #efefef; 제목 밑 구분선 나중에 쓸지도*/
}

.article-header .box-meta {
}

.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;
}


해당 코드가 담긴 파일입니다. 이걸로 쓰세요.

새 텍스트 문서.txt

0.00MB

 

그럼 이렇게 바뀝니다. 

 

좀 이상해 보이죠. 사실은 해더가 날라가고 그 자리가 빈자리가 되었습니다. 그리고 잘 보면 제목은 밑에 나와있습니다. 그래서 그 빈자리를 없애기만 하면 됩니다.

 

 

2. 그에 따른 레이아웃 위치 조정.

2군데 조정합니다.

 

가. PC 페이지 높이 수정 (여백 줄임으로)
css 466 
#tt-body-page .main {
    padding-top: 110px;
}

    padding-top: 88px;  로

나. 모바일 페이지 높이 수정 (여백 줄임으로)
css 482 
@media screen and (max-width: 1060px) {
    #tt-body-page .main {
        padding-top: 110px;
    }

    padding-top: 25px;    로 수정합니다.

 

그럼 이렇게 바뀝니다. 

 

 

이러면 완성된 모습입니다. 이대로도 무난하게 되었지만 이건 사실 제가  2가지 면에서 제가 조절한 크기입니다. 홈 화면의 높이와 맞추면서도 저 빈공간에 광고를 넣을 생각이기 때문입니다.

다음은 홈화면의 모습입니다. 블로그가 페이지를 넘기는데 이질감이 없게 하기 위해서 맞췄습니다.

 

 

그래서 자신의 취향에 맞게 변경할 수가 있습니다. 그럴 땐 다음을 수정해주세요.

 

개인적인 수정

 

가. /* border-bottom: 1px solid #efefef; 제목 밑 구분선 나중에 쓸지도*/ 이부분을

border-bottom: 1px solid #efefef;  로 바꾸면 제목 밑에 구분선이 생깁니다.

 

나. 그리고 이 부분의 수치들을 조절하면서 제목의 크기들을 조정합니다. 

.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. 그에 따른 레이아웃 위치 조정]을 참고하여 여백을 조절합니다.

 

라. 그리고 혹시 제 블로그에 있는 제목에 수정, 삭제 표시를 넣으셨다면 다음도 조정합니다

그에 따른 수정 삭제 , 색상과 폰트 다시 조정.
html 212
                 <a style="color: #fff; text-decoration: none; font-size: 13px;" 
                 href="">수정</a> 
                 <a style="color: #fff; text-decoration: none; font-size: 13px;" 
                 href="#" onclick="">삭제</a> 
       </s_ad_div> 
</span>
에서 색상 #333131 변경

 

마. 혹시나 제목 뒤에 썸네일 배경을 쓰고 싶으시다면 

.article-header { 
  background-image: none!important;  이걸 삭제하면 될 것 같습니다.

그리고 배경 이미지의 조절을 .article-header .inner-header 에서 할 것 같습니다. 자세한 코드는 아직 모르겠습니다.

 

여기까지는 수정하는 법을 알려드렸구요.

이제부턴 왜 이렇게 되는지 위에서 말한 공부한 내용을 적어보겠습니다. 태그 순서대로 쓰자면

 

1. .article-header {
  background-image: none!important;

먼저 헤더를 없앱니다. 일단 여기서 공간을 만들어 배경 이미지를 고정하고 제목 등을 나타내고 있었기 때문입니다. 그리고 여기서 삭제만 하는 게 아니라. 저 !important; 넣어야 배경이 완전히 없어지게 됩니다. 그냥 삭제만 하면 수정한 제목에도 다시 썸네일 배경이 생깁니다. 아무래도 오디세이 스킨은 어디선가 제목 뒤에 배경이 생기게 있나 봅니다. 혹시 썸네일 배경을 다시 쓰고 싶으시면 이걸 삭제하면 될 것 같네요. 

 

2. .article-header:before {

이것도 다 삭제합니다. before속성이 뭔진 모르겠으나 여기서 반투명한 배경을 만들어 고정으로 덮어주고 있었습니다.

그래서 사실 해더는 제목과 썸내일 배경, 그리고 반투명한 배경 3개가 겹쳐진 곳이었습니다.

 

3. .article-header .inner-header {
    max-width: 1020px;
    margin: 0 auto;
    margin-bottom: 45px; 
    padding-bottom: 35px; 

 

인라인 헤더라는 곳에 여백을 넣어 공간을 만듭니다. 여기가 제목이 들어갈 자리입니다.

라는 것은 원래 제목은 인라인 헤더라는 곳에서 자동으로 표현되고 있는 것이라 추측합니다.

 

4. .article-header .box-meta {
박스 메타라는 곳을 삭제해야 드디어 제목이 본문 위로 표시됩니다. 이 박스 메타 때문에 제목이 위에 보이고 있었던 것 같은데요. 헤더에서 고정으로 표시되게 있었습니다. 박스 메타 안에는 카테고리와, 작성일, 제목이 포함되어있던 것 같습니다. 그래서 단순히 박스 메타만 삭제하면 제목이 보이진 않으니 위에서 빈 공간을 만들었습니다. 

 

 

5. 그리고는 나머지는 그에 따른 여백과 위치 조절 등입니다.

 

 

제가 클릭으로 끄적끄적해서 뭘 삭제해야 되는 건 알았지만 몰랐던 건 뭘 만들어야 되는지는 모르거든요. 그래서 공부해봤지만 어려웠습니다. 이런 부분에서 스킨 만드는 걸 기초라도 배우고 싶습니다. 만 일단 스킨 하나라도 잘해놓는 게 먼저겠죠. 지금은 수정한 걸 이해하는 것에 의의를 둡니다.

여기까지 티스토리 오디세이 스킨 제목 조절, 배경 삭제, 헤더에서 본문 위로 옮기기였습니다. 이 글도 마찬가지로 제목을 뭐라 해야 검색할지 모르는 글인데요. 어쨋든 찾는 분들에게 좋은 정보가 되으면 합니다.

끝.