티스토리 오디세이 제목 배경 바꾸는 방법

 

티스토리 오디세이 제목 배경에 대표 이미지(썸네일)와 상관없이 원하는 이미지가 나오는 방법을 알려드리겠습니다.
(but, 제목 배경으로 설정한 이미지 하나가 모든 글 제목 배경에 통일되어 적용된다는 점! 참고 바랍니다.)
(즉, 저처럼 설정하시면 작성한 글마다 제목 배경을 따로 지정할 수 없습니다.)

 

 

먼저
티스토리 오디세이 글 작성하시면 글 제목 배경에

화살표 표시가 가리키는 부분 사진(대표 이미지, 썸네일) 이 글 제목 배경으로 나타나시는 걸 확인할 수 있어요.

이렇게요!

이게 배경으로 쓸만한 사진이나 이미지가 있을 경우는 괜찮은데
글에 사진이 없거나, 배경으로 했을 때 지저분해 보이는 경우가 많았습니다.

그래서 처음에는 사진이 없는 경우와 썸네일을 설정하지 않았을 때 제가 원하는 배경이 나오도록 만들고 싶었는데,
이 부분은 제 능력으로는 도저히 못하겠더라고요.
그리고 썸네일은 지정하고 싶은데 썸네일과 다른 이미지가 배경이 되도록도 못하겠고....

그래서 그냥 글 배경을 아예 썸네일과 사진이 없는 경우 상관없이
모든 글 제목 배경에 내가 원하는 배경 하나로 통일되는 방법은 알게 돼서 이 방법을 알려드리려고 합니다.

---

 

 

1. 블로그 설정에서 스킨 편집에 들어갑니다. 그 후 Html 편집을 실행시켜주세요.

2.

↑ 위에 처럼 파일 업로드에 들어가시면 맨 아래 +추가 버튼이 있으신 걸 확인할 수 있습니다.
+추가 버튼을 클릭하셔서 배경으로 쓸 이미지를 추가해주세요.


3.

이건 제 다른 블로그 (html을 건들지 않은 블로그)에서 가져온 겁니다.

이제 파일 업로드가 아닌 HTML을 선택하고 ctrl+f 를 눌러서 뷰를 치시면
<!-- s_permalink_article_rep / 뷰페이지 --> 밑에 부분들이 보이실 겁니다. (위 이미지 참고!)
거기서
<!-- 이미지가 없는 경우 article-header-noimg --> 아랫부분을 먼저 건들겠습니다.

아랫부분을 보시면
<div class="article-header" thumbnail="<s_article_rep_thumbnail>https://img1.daumcdn.net/thumb/R1440x0/?scode=mtistory2&fname=https://blog.kakaocdn.net/dn/rwtWP/btrfs6dLs2P/KzmsERyYKxHjLEazUKHpB1/img.png</s_article_rep_thumbnail>" style="background-image:url('')"> 이렇게 된 부분이 보이실 겁니다.

그러면 맨 뒤 파란색 부분을 style="background-image:url('')" 부분을 삭제해주세요!

4.
그 후

파일 업로드에 가셔서 추가하셨던 이미지에 (보통은 맨 아래에 있음)
오른쪽 클릭하셔서 링크 주소 복사를 클릭해줍니다. (위 이미지 참고)

다시 HTML에 가셔서 아까 까지 건들고 있었던 부분으로 가주세요. (ctrl + f 하셔서 뷰 치시면 쉽게 찾아집니다.)
<div class="article-header" thumbnail="<s_article_rep_thumbnail>https://img1.daumcdn.net/thumb/R1440x0/?scode=mtistory2&fname=https://blog.kakaocdn.net/dn/rwtWP/btrfs6dLs2P/KzmsERyYKxHjLEazUKHpB1/img.png</s_article_rep_thumbnail>">

위 부분에서 연한 보라색 부분을 없애주시고 아까 복사했던 이미지 링크 주소를 없앴던 부분에 붙여 넣어주세요!

그러면 저는 아래와 같이 작성되었습니다!
<div class="article-header"
thumbnail="<s_article_rep_thumbnail>
https://tistory2.daumcdn.net/tistory/4925392/skin/images/clay-banks-B-7sTUA2RFY-unsplash1.jpg</s_article_rep_thumbnail>">


5. 그리고 완성된 부분 바로 위에 보시면
<!-- 이미지가 없는 경우 article-header-noimg --> 이 부분을 삭제해주세요.

그러면

위에처럼 (위 사진 참고!)

<!-- s_permalink_article_rep / 뷰페이지 -->
<s_permalink_article_rep>
<div class="article-header"
thumbnail="<s_article_rep_thumbnail>
https://tistory2.daumcdn.net/tistory/4925392/skin/images/clay-banks-B-7sTUA2RFY-unsplash1.jpg</s_article_rep_thumbnail>">
<div class="inner-header">
<div class="box-meta">
<p class="category">STUDY/블로그 스킨변경</p>
<h2 class="title-article">티스토리 오디세이 제목 배경 바꾸는 방법</h2>
<div class="box-info">
<span class="writer">레드피넛</span>
<span class="date">2021. 9. 23. 00:00</span>
</div>
</div>
</div>
</div>

이렇게 완료가 됩니다.
연한 보라색 부분은 본인이 설정한 이미지 주소가 나오므로 저와 다르게 나옵니다.



6. 그러면 아래와 같이 모든 글에 제목 배경이 설정하신 이미지로 보이는 걸 확인하실 수 있습니다.

이렇게 대표 이미지(썸네일)는 제가 글 작성할 때 설정했던 대표 이미지가 표시되고
글을 클릭하면 글 제목 배경은 대표 이미지와 다른 제가 배경으로 설정한 이미지가 보이실 겁니다.


여기까지 티스토리 오디세이 제목 배경 이미지 변경하는 방법이었습니다.