블로그 관리 (Blog Management)/BiCute Skin

[Tistory Odyssey Skin] 게시물 상단 썸네일 영역 제거하기

BiCute 2022. 2. 26. 10:00
반응형

 

#1 Odyssey 스킨의 게시물 상단 썸네일 부분

  처음에 자동으로 생성되는 '환영합니다!'만 봤을 때는 나름 잘 어울리는 거 같아서 그러려니 하고 넘어갔었는데, 새로운 게시물을 작성하면서 대표 이미지가 글자가 있는 이미지로 적용이 되어버리니 제목 부분이 매우 혼란스러워졌습니다.

  그리하여 상단의 이미지는 크게 중요하지 않고 범위를 너무 넓게 차지하고 있기에 제거하기로 하였습니다. 

이랬던 상단 헤더 부분이...
글자가 포함되면 이렇게 난잡스럽게 변화하였습니다.

 

 

#2 게시물 상단 썸네일 제거하기

  (1) 관리 페이지 > 스킨 편집 >  HTML 편집을 클릭한 후 CSS탭으로 이동합니다.

    [style.css:2730~2738]의 '.article-header { 속성: 속성값 ... }' 내용과 

    [style.css:2741~2750]의 '.article-header:before { 속성: 속성값 ... }' 항목을  모두 삭제 또는 주석처리를 하게 되면 다음과 같이 상단에 큰 공백이 생기게 됩니다. 

    [style.css:2730~2738]의 .article-header 의 { } 안에는 다음 1줄을 추가해줍니다. 

    background-image: none !important;

.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%; /* 여기까지 삭제 또는 주석 처리 */
    background-image: none !important;    /*  이거 한줄만 복사해서 활성화 해줍니다.    */
}

.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;
}						/* 여기까지 모두 삭제 또는 주석처리 */

 

 

  (3) 위와 같은 방법으로 아래 영역을 삭제 또는 주석 처리합니다.

    [style.css:2758~2764] '.article-header .box-meta { 속성: 속성값 ... }'

  추가로 [style.css:2755]의 'color: #fff;' 한 줄도 삭제 또는 주석 처리를 해 줍니다.

  이 부분은 게시물 제목 부분의 글자 색상을 담당하는 곳으로 삭제하지 않을 경우 흰색으로 표시가 되고 있어 볼 수가 없게 됩니다.

  원하는 색상이 있다면 fff를 삭제하고 원하는 색상 코드를 넣어줄 수 있습니다 (마지막에 ; 넣어주셔야 합니다!)

.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;
} 					/* 여기까지 모두 삭제 또는 주석처리 */

 

 

  (4) 이제 위에 넓은 공백을 처리할 차례입니다. 

  [style.css:466]로 이동하여 다음 코드를 찾고, padding-top의 470px이란 부분을 취향에 맞춰 원하는 값으로 바꿔줍니다.

  이 부분이 제목 위쪽 공간의 높이를 지정하는 곳으로, 전 80px로 지정하였습니다.

#tt-body-page .main {
    padding-top: 470px;
}

 

  추가로 [style.css:485~489]에도 똑같은 이름이 보일 텐데 이 부분도 바꿔줘야 합니다. 

  미디어 쿼리라고 해서 이 부분은 모바일 화면일 때의 높이를 지정할 수 있습니다. padding-top의 440px을 취향에 맞춰 원하는 값으로 변경합니다.

  화면이 작으니 위에서 정한 수치보다는 조금 더 낮은 값으로 지정해 주는 것이 좋을 것입니다. 전 40px로 지정하였습니다.

@media screen and (max-width: 1060px) {
    #tt-body-page .main {
        padding-top: 440px;
    }
}

 

 

여기까지 진행하였다면 기본적인 수정은 완료되었습니다. 

나머지 필요한 게 있다면 원하는 대로 스타일을 수정해주면 되는데... 

디자인은 개인마다 취향이 워낙 다르기 때문에 개인적으로 추천하는 부분 딱 2개만 더 추가하여 마무리하는 것으로 하겠습니다.

 

추가 1.

  제목 부분과 본문과의 경계가 뚜렷하지 않아 서로 간의 간격을 조금 넓혀주고 아래쪽에 굵은 선을 넣어 제목과 본문과의 경계를 생성하는 코드입니다. 

  [style.css:2752] 부터 .article-header .inner-header 에 대한 속성을 지정해주는데 다음과 같은 식으로 변경해 주었습니다.

.article-header .inner-header {
    max-width: 1020px;
    margin: 0 auto 60px;		/* 제목과 본문의 간격을 지정해 줍니다. */
    border-bottom: 2px solid black;	/* 제목 아래쪽에 검은색 구분선을 생성합니다 프로필 하단의 검은색과 같은 굵기 */
    padding-bottom: 20px;		/* 제목 가장 하단과 검은색 선의 간격을 지정해 줍니다 */
/*  color: #fff;  */          /* 이 부분은 위에서 삭제 또는 주석 처리를 했던 부분 제목 글자 색 */
}

 

추가 2.

  제목과 발생 날짜와의 간격이 너무 넓은 거 같아 그 사이의 간격을 조금 좁혀주는 코드입니다.

  [style.css:2776번째 줄] .article-header .title-article 의 내용 중 margin 항목을 다음과 같이 변경해 주었습니다.

.article-header .title-article {
    display: block;
    width: 100%;
    max-width: 760px;
    margin: 0 0 8px 0;		/*  3번째 8px(하단 간격)만 원하는 수치로 지정해 줍니다 (기본 33px) */
    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;
}

 

 

#3 수정 후

  일단 눈에 띄는 건 이제 끝난 거 같습니다. 그 외에도 오디세이 스킨은 오른쪽의 사이드바가 너무 넓은 게 아닌가... 싶기도 한데 300px로 딱 지정해 놓은걸 보면 애드센스 같은 광고 때문인가...? 싶기도 해서 일단은 조금 더 지켜보고 차후에 수정해 볼까 합니다. 

  이번 스킨 수정으로 인한 모습은 다음과 같습니다.

 

 

 

※ 주의 ※

이 블로그에서 작성하는 스킨 수정 관련 내용은 

웹 언어(HTML, CSS, JavaScript)를 전혀 몰라도 따라만 하면 수정할 수 있을 정도로 간단히 설명하고자 합니다. 

단, 필요에 따라 수정하여 사용하다 보니 여러 상황에 대하여 검증이 되지 않은 부분이 있을 수 있어 안정성은 책임질 수 없습니다.

항상 스킨을 수정하기 전 백업을 해놓고 언제든지 복구할 수 있도록 준비해놓으시길 바랍니다.

스킨 수정으로 발생하는 어떠한 불상사도 책임을 지지 않습니다. 

 



반응형