티스토리 오디세이 스킨, 블로그 글 상단 이미지 배너 없애기(1)

 

 

오디세이 스킨의 기본적인 형태에서는 블로그 글의 상단에 글 내 대표 이미지가 배너 이미지로 설정되어 나타난다. 이미지 크기도 잘 맞지 않고 제목을 읽는 데도 별 도움이 되지 않는 듯해 없애고 싶다. 이미지를 불러오는 과정이 있어서 페이지 로딩 성능이 저하되기도 한다고 하더라. 없애보자.

1단계 - html 수정하기

블로그 관리 > 스킨 편집(꾸미기) > html 편집으로 들어가자. 불의의 사태를 대비해 html문서를 백업해 두면 좋다.

html 문서 내에서 [CTRL + F]로 'article-header'라는 키워드를 검색한다. 다음과 같은 <div> 코드를 찾을 수 있다.

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

<div class="article-header" thumbnail="<s_article_rep_thumbnail>https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FZtcvv%2FbtsJ2YkljTU%2FEtgZbZ6jGH9KYUUBm1H8m0%2Fimg.png</s_article_rep_thumbnail>" style="background-image:url('')">

<div class="article-header" thumbnail="<s_notice_rep_thumbnail></s_notice_rep_thumbnail>" style="background-image:url('')">

비슷해 보이는 코드이지만, 접근 경로에 따라 나타나는 페이지의 배경 썸네일을 나타내는 코드라 여러 번 나타나고 있는 것이다. 위 코드의 thumbnail 이하의 코드들이 배경 이미지를 불러오는 코드이기 때문에 삭제하여 세 코드 모두 아래와 같이 수정한다.

<div class="article-header">

그러면 위와 같이 배경 이미지는 사라지고 회색 배경에 제목만 출력되는 것을 확인할 수 있다.

 

2단계 - css 수정하기

마찬가지로 css의 코드도 백업해 두고 수정하자.

기호와 취향에 맞게 바꾸어야 하는데, 내 목표는 회색 배경을 지우고 적절한 위치에 제목이 출력되도록 하는 것이다. html에서 호출하는 내용이 있기 때문에 웬만하면 내용을 지우지 않으려고 한다.

글씨 색깔 검은색으로 바꾸기

현재는 회색 배경에 흰 글씨인데, 회색 배경을 삭제하면 흰 배경이 되어 글씨가 보이지 않게 된다. 위와 같은 코드를 찾아 color를 #000(검은색)으로 수정해주자. 기호에 따라 흰색 배경에 보일 수 있는 다른 색으로 설정해 주어도 된다.

회색 배경 없애기

위 코드가 회색 배경을 만드는 before 속성이다. background-color를 하얀색(0,0,0,0)으로 수정한다. 그러면 상단 제목이 입력되는 부분이 아래와 같이 나온다.

 

 

블로그 상단 이미지 배너 없애기(2) 링크

티스토리 | 오디세이 스킨 - 블로그 상단 이미지 배너없애기(2)