(티스토리) 오디세이 스킨, 글 제목 배경 제거하는 방법

(tistory) 오디세이 Odyssey 스킨, 글 제목 배경 제거하는 방법

글 제목 배경 부분으로 인해 웹페이지 로딩 성능 저하 확인

최근 구글 웹페이지 속도 측정 사이트인 'PageSpeed Insights'를 통해 티스토리 블로그의 성능을 측정해 보았는데, 글 제목 부분의 배경 이미지로 인해 웹 페이지 로딩 과정에서 성능이 저하된다는 것을 확인하였습니다.

(First Contentful Paint, Largest Contentful Paint 문제)

 

때문에 스킨 수정을 통해 배경을 제거해 보게 되었고, 해당 포스팅에서는 오디세이 스킨 편집을 통해 '글 제목 부분의 배경을 제거하는 방법'을 정리하였습니다.

 

---

글 제목 부분 배경 제거 전, 후 비교

티스토리 글 제목 부분 배경 제거 전

 

 

티스토리 글 제목 부분 배경 제거 후

 

먼저 스킨 수정을 통해 글 제목 부분의 배경을 제거하기 전과 후의 차이입니다.

제목이 있던 영역 자체는 최대한 유지하였고, 배경이 사라지면서 아래위의 빈 공간이 너무 크다고 생각되어 영역의 높이를 조금 줄였습니다.

 

---

스킨 편집, 코드 수정 내용

먼저 '티스토리 관리자 페이지' -> '꾸미기' -> '스킨 편집' -> 우측 상단 'html 편집' 경로로 들어갑니다.

(코드 수정 순서는 'css' -> 'html' 순서로 수정하였습니다.)

 

 

css 코드 수정1

먼저 css 코드 수정입니다.

* css는 웹 문서의 글꼴, 색상, 정렬, 그림자, 투명도, 각 요소의 크기와 배치 방법 등의 디자인 요소를 적용하는 데 사용되는 기술입니다.

 

class="article-header"에 대한 부분을 수정할 것인데, 해당 부분이 바로 글 제목과 배경에 연관된 부분입니다.

"Ctrl + F"를 통해 검색 기능을 활성화하여 ".article-header"를 검색하고 위 코드 부분을 찾아 아래와 같이 수정합니다.

 

.article-header {
    position: absolute;
    top: 0;
    left: 50%;
    width: 100vw;
    height: 300px;
    margin-left: -50vw;
    padding: 0 20px;
}

.article-header:before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: none;
    z-index: 1;
}

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

(수정된 css)

 

배경 부분이 있던 곳의 영역은 거의 그대로 살리는 방향으로 수정하였고 주요 내용은 아래와 같습니다.

 

'background-size', 'background-position' 부분을 제거하고 회색으로 되어있던 'background-color' 값을 'none'으로 수정하였습니다.

이렇게 배경을 제거하여 흰 배경이 되면 기존에 배경 내부의 텍스트도 흰색이기 때문에 제목이 보이지 않는 문제가 발생하는데요.

때문에 '.inner-header' 부분의 텍스트 컬러 설정인 'color' 값을 검은색 계열인 '#333'으로 수정합니다.

 

추가로 배경이 사라지면 배경이 있던 영역의 height(높이)가 '400px'로 너무 크다고 생각되어 '300px'으로 수정하였습니다.

 

 

css 코드 수정2

다음으로 "#tt-body-page .main"을 검색하여 위 코드 부분을 찾습니다.

 

해당 부분은 위에서 수정한 글 제목 및 이미지 부분 다음으로 본문의 내용이 시작되는 부분인데요.

위에서 '.article-header' 부분의 높이를 '400px' -> '300px'로 줄였기 때문에 제목 영역과 본문이 시작되는 사이의 빈 공간을 최대한 줄이기 위해 'padding-top'의 값을 줄였으며, 두 부분 모두 '320px'로 수정해 줍니다.

 

 

html 코드 수정1

마지막으로 html 부분에 대한 수정입니다.

 

<div class="article-header" thumbnail="<s_article_rep_thumbnail>https://img1.daumcdn.net/thumb/R1440x0/?scode=mtistory2&fname=https://blog.kakaocdn.net/dn/ccXmDJ/btsFwDkfDfO/iX5qW8BYHYqOUZKIYFI1tK/img.webp</s_article_rep_thumbnail>" style="background-image:url('')">

 

html 부분에서는 다음과 같은 코드를 통해 'thumbnail' 이미지를 호출하게 됩니다.

때문에 css를 수정하더라도 해당 코드가 남아있으면 네트워크를 통해 서버에서 썸네일 이미지를 가져오게 되고, 이 과정 역시 웹 페이지의 로딩 속도를 늦추게 되는데요.

 

"article-header" 부분을 검색하면 위 코드와 같은 부분이 3곳이 나오게 됩니다.

3곳 모두 'thumbnail' 및 'style' 부분을 전부 지워버리고 아래와 같이 수정합니다.

<div class="article-header">

 

 

여기까지 css 및 html 코드 수정이 마무리되었으며, 적용 이후 수정된 페이지를 확인하실 수 있습니다.

(적용 이후에도 제목 부분의 이미지가 동일하게 뜨는 경우 브라우저에 저장된 캐시의 영향일 수 있기 때문에 캐시를 삭제해 주면 됩니다.)

 

 

 

< 관련 포스팅 >

2022.12.20 - [IT Info] - 티스토리 Odyssey Skin 본문 너비(폭) 늘리는 방법

2022.02.21 - [IT Info] - 티스토리 사이드바 이미지배너 적용하는 방법