북 클럽 스킨 상단 글 제목 배경 이미지 제거 및 스타일 변경하기

북 클럽 스킨이 인기가 많은데 은근히 글 제목 스타일을 바꾸고 싶어하시는 분이 많으셔서 정리 좀 해 보았습니다.

 

목차

 

글 제목 이미지 제거하기

먼저 이미지를 나오지 않게 하기 위한 작업을 진행해 보겠습니다. 

 

관리 페이지 > 꾸미기 > 스킨 편집 으로 이동합니다.

 

html 편집을 클릭합니다.

 

그럼 위외 같은 HTML 에디터가 뜨는데 여기에서 작업을 해 보겠습니다.

 

CTRL+F를 눌러 s_permalink_article_rep 태그를 찾고 그 하위에 있는 <div class="post-cover" 어쩌구> 부분을 삭제하거나 아래와 같이 주석처리 합니다. 그리고 그 밑에 <div class="post-cover"> 를 새로 작성합니다.

<!-- 생략 -->
<s_permalink_article_rep>
    <!-- <div class="post-cover"<s_article_rep_thumbnail> style="background-image:url(https://blog.kakaocdn.net/dn/rFVN5/btqYfV1k633/AkFFT3DdqVwZ2J8KFB3cl0/img.png)"</s_article_rep_thumbnail>> -->
    <div class="post-cover">
    <!-- 생략 -->
</s_permalink_article_rep>
<!-- 생략 -->

그럼 더 이상 이미지는 나오지 않게 됩니다.

 

CSS 수정도 좀 더 해보겠습니다.

 

관리 페이지 > 꾸미기 > 스킨 편집 > html 편집 > CSS 탭으로 이동합니다.

 

마찬가지로 CTRL+F를 눌러 .post-cover 부분을 찾습니다. 필요없는 스타일을 과감히 날리거나 다음과 같이 주석 처리 합니다.

.post-cover {
    position: relative;
    z-index: 20;
    display: table;
    width: 100%;
    /* height: 340px;
    background-color: #cbcbcb;
    background-position: 50% 50%;
    background-size: cover;
    box-sizing: border-box; */
}

 

이 부분에서는 background-color의 색상과 투명도를 자신의 취향에 따라 조절할 수 있습니다.

.post-cover:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.5); /* 이 부분에서 색상, 투명도 조절하시면 됩니다 */
}

 

절대 위치 제거

그리고 또 하나 거슬리는 점이 제목이 절대 위치를 차지하고 있다는 점인데요. 다음 부분을 찾아 수정해 주면 됩니다. position 속성을 relative로 고쳐줘도 되고 과감히 날리거나 다음과 같이 주석처리 해 주어도 됩니다.

 

#tt-body-page .post-cover {
    /* position: absolute; */
    top: -1px;
    left: 0;
    width: 100%;
}

 

그리고 다음 부분의 padding-top 속성을 제거하여 절대 위치였을 때 필요했던 위쪽 빈 공간을 없애도록 하구요.

#tt-body-page #container {
    /* padding-top: 339px; */
}

 

마찬가지로 제목 아래 빈 공간이 생겨 보기가 흉하므로 padding-bottom 속성을 없애 주도록 합니다. 그리고 제목 박스 전체 padding 속성 값을 10px 추가하였습니다.

.post-cover .inner {
    display: table-cell;
    position: relative;
    z-index: 10;
    vertical-align: bottom;
    /* padding-bottom: 78px; */
    padding: 10px;
}

 

다음으로 너비가 1080px 이하일 경우에 따로 값을 주지 않기 위해 주석 처리 하였구요.

@media screen and (max-width:1080px) {
    .post-cover {
        /* padding-left: 24px;
        padding-right: 24px; */
    }
}

 

너비가 767px 이하일 때도 마찬가지로 주석 처리해 주었습니다.

@media screen and (max-width: 767px) {
    .post-cover {
        /* padding-left: 24px;
        padding-right: 24px; */
    }
    
    .post-cover .inner {
        /* padding-bottom: 38px; */
        vertical-align: bottom;
    }
}

 

결과 확인

제목의 위치가 깔끔하게 변경되었습니다. 취향에 따라 좀 더 꾸미시는 건 각자의 몫으로 남기겠습니다. CSS 문법에 대한 기본적인 사항만 공부해도 본인 블로그를 좀 더 예쁘게 꾸밀 수 있기 때문에 한 번 알아 두시면 손해는 아닐거예요 ㅎㅎ

 

모바일 사이즈에서도 깔끔하게 보이는군요.

 

더 궁금하신 점은 댓글로 부탁 드립니다.

감사합니다 :)

 

다음 게시물도 참고해 보세요.

티스토리 북 클럽 스킨 댓글 및 메뉴 오류 수정하기

티스토리 북 클럽 스킨 댓글 및 메뉴 오류 수정하기