정보/블로그 운영팁

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

아미넴 2021. 2. 22.
반응형

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

 

목차

     

    글 제목 이미지 제거하기

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

     

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

     

    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([##_article_rep_thumbnail_raw_url_##])"</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 문법에 대한 기본적인 사항만 공부해도 본인 블로그를 좀 더 예쁘게 꾸밀 수 있기 때문에 한 번 알아 두시면 손해는 아닐거예요 ㅎㅎ

     

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

     

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

    감사합니다 :)

     

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

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

     

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

    북 클럽(Book Club) 스킨이 심플하고 예뻐서 사용자가 많은 반면 곳곳에 오류가 있어서 깔끔하지 못하죠. 구독자님들 블로그를 방문하여 보니 스킨에 존재하는 오류를 그대로 갖고 계신 분이 많은

    sangminem.tistory.com

     

    반응형
    그리드형(광고전용)

    댓글20

    • 익명 2021.02.23 17:57

      비밀댓글입니다
      답글

      • 아미넴 2021.02.23 18:14 신고

        안녕하세요.

        1. 에디터에서 그렇게 지원하는 것이므로 제가 어찌하기는 어렵습니다. h1으로 사용하시려는 이유가 있는건가요?

        2. 크게 관련 없을 것 같습니다.

        3. 그런 규정이 있는건 아니고 단지 티스토리에서 글 타이틀을 h1으로 하고 있고 글 내용 안에서 사용하는 제목은 h2부터 지원하도록 정해 놓은 건데 굳이 이 틀을 바꿀 필요는 없어 보입니다.

        감사합니다.

    • 익명 2021.02.23 18:20

      비밀댓글입니다
      답글

      • 아미넴 2021.02.23 18:26 신고

        아마 찾아보신 내용에 그런 말이 적혀 있으면 관련이 있긴 할 거예요.
        다만 티스토리에서 h2부터 정해놓은 이유도 분명 있을텐데.. 검색에 불리하게 정책을 쓰진 않았을거 같다는게 제 추측이구요.
        그 부분은 나중에 좀 더 찾아 보고 말씀드릴게요~

      • 아미넴 2021.02.23 23:21 신고

        좀 찾아보니 다음과 같은 내용이 있네요.
        ------------------
        HTML구조에서 제목, 소제목 및 단락을 기술하는 개념이며, ① 웹페이지 내 h1, h2 태그는 아래 그림과 같은 위치에 심어주면 됩니다. Head Tag를 적절하게 사용하여 "웹사이트의 주제"를 알기 쉽게 작성해서 검색 엔진과 사용자가 정보를 제대로 알 수 있도록 해주어야 합니다. 웹문서를 잡아주는 “가장 기본적인 골격”이기 때문에 SEO 최적화에 가장 중요한 요소 중 하나입니다. 이때! 페이지의 구조를 크기순으로 배치하는것이 중요하며, H1 -> H2 태그의 순으로 크기와 중요도가 낮아집니다. "H1태그는 가장 큰 제목(대주제)"이기 때문에 반드시 적용해야합니다! H1은 1개, H2는 3개까지만 작성하는 것이 키워드 밀도를 제어해서 핵심키워드를 강조하기 때문에 많을 필요가 없습니다.
        ------------------
        h1은 1개만, h2는 3개까지 작성하는 것이 가장 좋다는 설명 같습니다. 참고하세요~

        [출처]
        https://www.next-t.co.kr/blog/2021%EB%85%84-seo%EC%B4%9D%EC%A0%95%EB%A6%AC%EA%B0%80%EC%9D%B4%EB%93%9C-1

      • 익명 2021.02.23 23:52

        비밀댓글입니다

      • 아미넴 2021.02.23 23:54 신고

        아뇨 ㅎㅎ 글 제목이 이미 h1 입니다

      • 익명 2021.02.23 23:57

        비밀댓글입니다

      • 아미넴 2021.02.23 23:59 신고

        네네~ 계속 그 얘기였습니다 ㅎㅎ

    • teum♡ 2021.02.23 18:50 신고

      ㅋㅋㅋㅋㅋㅋㅋ 오늘도 o_o 이 표정으로 읽고갑니다. 공감 누르면 뜨는 사랑합니다 너무 탐나는...
      답글

    • 파란소금 2021.02.24 09:18 신고

      뭔가 미세조정이 아쉽다 그런느낌이 있었는데 해봐야겠습니다!!
      답글

    • 언더워터 2021.02.24 23:09 신고

      봐도 모르겠네요 ㅜㅜ 너무 어려워요! 하지만 너무 유익하고 좋은정보입니다! 앞으로 블로그 공부 좀 많이 해야할것 같아요! 유익한 정보 많이 부탁드립니다! ^^ 구독을 아니할수 없네요
      답글

    • langkawi 2021.03.07 18:37 신고

      정보 감사 합니다. 다른이 아니라 Bing 서치 콘설에 사이트 SEO 검사해주는 항목이 있는데, H1이 2개라고 하는데, 이게 스킨 문제인지, 빈 검사 문제인지. 제목 자체가 H1이라 H1을 쓰지 않았는데 그렇네요. 참고로 제 사이트 입니다. 혹시 이런 문제에 대해 좀 아시면 답변 주시면 감사 하겠습니다 .https://tripeditor.tistory.com/entry/%EC%9D%BC%EB%B3%B8-%EC%9B%8C%ED%82%B9%ED%99%80%EB%A6%AC%EB%8D%B0%EC%9D%B4-%EC%BD%94%EB%A1%9C%EB%82%98-%EB%B0%B1%EC%8B%A0-%EB%B9%84%EC%83%81%EC%82%AC%ED%83%9C
      답글

      • 아미넴 2021.03.07 18:55 신고

        안녕하세요.
        확인해 보니 실제로 h1 태그가 2개 존재하네요.
        맨 위에 있는 Guides's Traveling에 불필요하게 h1 태그가 사용되었습니다.

    • langkawi 2021.03.07 23:31 신고

      아 정말 감사 합니다. 다시 확인해 보겠습니다.
      답글

    • 알 수 없는 사용자 2021.03.17 10:14

      블로그 새로 생성하고 가르침대로 적용했습니다.
      제일 아쉬웠던 부분인데 속이 다 시원하네요.
      감사합니다.
      잘 활용하겠습니다.
      답글

    • 익명 2021.09.23 13:55

      비밀댓글입니다
      답글

      • 아미넴 2021.09.23 21:48 신고

        감사합니다 ㅎㅎ 저도 아직 모르는 부분이 많은데 좀 더 파악해서 다음 스킨은 더 깔끔하게 만들어 볼 예정이에요 :)

    💲 추천 글