티스토리 북클럽 스킨 본문 상단 제목의 배경에 고정 이미지 적용하기 #3

 

 

 

제목의 배경에 고정된 이미지 적용하기

• 배경 이미지 설정: 한 번 설정해두면 깔끔한 제목 배경을 지속적으로 사용할 수 있습니다.
• 일관된 적용: 설정된 제목 배경은 모든 글에 동일하게 적용되므로, 화려하거나 무늬가 있는 이미지보다는 깔끔한 원색 또는 어두운색 이미지를 추천합니다.
• 이미지 선택: 배경 이미지를 설정하기 전에, 먼저 적절한 이미지를 선택해야 합니다.
  이미지 크기는 가로 1280px 해상도가 적절하며, 더 큰 이미지는 괜찮지만 작은 이미지는 추천하지 않습니다..

---

[📌코드 수정 시 주의사항은 아래 '더보기'를 참고 하세요.]

1. 스킨 저장.

스킨을 변경하기 전에 가장 먼저 해야 할 일은 현재 사용 중인 스킨을 백업하는 것입니다. 스킨 변경 후 문제가 발생하면 변경전 스킨으로 돌아가야 하기 때문에 백업이 필요합니다.

스킨을 백업하려면, 블로그 관리자 > 꾸미기 > 스킨 변경을 클릭합니다. 상단에 사용 중인 스킨을 확인할 수 있으며, [보관]을 클릭하면 됩니다.

 

2. [Ctrl] + [F]를 사용할 때.

먼저 코드 탭의 빈 곳을 클릭한 후 [Ctrl] + [F]를 사용하여 검색할 코드를 입력해야 합니다.

728x90

 

'배경 이미지' 업로드

1) '관리자 홈'에서 '꾸미기 > 스킨 편집 > html 편집 > 파일업로드'로 들어가 '배경 이미지'를 업로드합니다.

---

 

2) 업로드한 '배경 이미지'의 링크 주소를 복사한 뒤 메모장에 저장해 둡니다.

링크 주소 수정법

내 블로그에 업로드된 이미지는 링크 주소를 전부 넣어도 괜찮지만, 아래와 같이 링크 주소를 줄여서 사용합니다.

수정 전: https://tistory1.daumcdn.net/tistory/6956625/skin/images/galam.png

수정 후: ./images/galam.png

---

 

'배경 이미지' HTML 코드 수정

1) '관리자 홈'에서 '꾸미기 > 스킨 편집 > html 편집 > HTML'로 들어갑니다.

---

 

2) HTML탭에서 [Ctrl] + [F]를 이용해 <s_permalink_article_rep>를 검색 후 아래와 같이 수정합니다.

<s_permalink_article_rep>를 검색하면 두 개가 나오는데 두 번째 코드입니다.

<s_permalink_article_rep>

---

 

3) 변경할 내용은 아래와 같습니다.

기존 코드는 원복 할 경우를 대비해 주석(<!--...-->으로 숨겨두고, 기본 코드를 복사해서 위에 붙여 넣은 후 수정합니다.

1. 타이틀(커버화면) 배경 이미지 변경
   위치: <s_permalink_article_rep>
   코드: background-image:url([ ##_article_rep_thumbnail_raw_url_## ])
   설명: [ ##_article_rep_thumbnail_raw_url_## ]을 지워주고 메모장에 복사해둔 배경이미지 주소를 넣어 줍니다.
   예시: background-image:url(./배경 이미지 주소.png)
2. HTML 코드

<div class="post-cover" <s_article_rep_thumbnail>
    style="background-image:url(./배경 이미지 주소.png)"</s_article_rep_thumbnail>>

 

4) 미리보기를 통해 적용된 변경 사항을 확인한 후 [적용] 버튼을 눌러 변경 사항을 '저장'합니다.

---

 

'제목 커버' 배경이미지 투명도 조절

제목 커버의 배경이 어두울 경우, 글씨가 잘 보인다는 장점이 있습니다. 그러나 배경 이미지가 원래 색이 제대로 표현되지 않는 단점이 있습니다. 이에 따라 투명도 조절 코드를 주석(/*...*/) 처리하여, 깔끔하고 선명한 배경이미지를 만들어 보겠습니다.

 

1) CSS 탭에서 [Ctrl]+[F] 키를 이용해 .post-cover:before {을 찾아줍니다.

.post-cover:before {

---

 

2) 변경항 내용은 아래와 같습니다.

코드: background-color:

설명: /*background-color: rgba(0, 0, 0, 0.25);*/ 주석을 이용해 코드를 숨겨줍니다.

기타: 코드를 사용할 경우 rgba(0, 0, 0, 0.75) 처럼 값이 높아질수록 배경색이 어두워집니다.

/* background-color: rgba(0, 0, 0, 0.25); */

---

 

3) 미리보기를 통해 적용된 변경 사항을 확인한 후 [적용]을 클릭하여 '저장'합니다.

---

728x90

 

마무리

블로그 제목의 배경색이미지와 폰트를 원하는 느낌으로 조정하려면 다양한 조합과 설정을 시도해 보세요. 다양한 효과를 적용해 제목 배경을 더욱 매력적이고 고유한 나만의 스타일로 만들 수 있습니다.

 

📌 배경으로 사용할 이미지를 몇 가지 첨부합니다. 필요하신 분들은 자유롭게 사용하세요. (1280×340)

background-001.png

0.41MB

 

background-002.png

0.21MB

 

💡 더 많은 배경 이미지 보러가기

2025.01.30-북클럽 스킨 본문 상단 제목의 배경 이미지 모음

북클럽 스킨 본문 상단 제목의 배경 이미지 모음

---

 

관련글 바로가기

2025.01.28-티스토리 북클럽 스킨 본문 상단 제목의 배경 이미지 삭제 및 배경색 변경 #2

티스토리 북클럽 스킨 본문 상단 제목의 배경 이미지 삭제 및 배경색 변경 #2

2025.01.28-티스토리 북클럽 스킨 본문 상단 제목 꾸미기 #1

티스토리 북클럽 스킨 본문 상단 제목 꾸미기 #1

"쿠팡 파트너스 활동을 통해 일정액의 수수료를 제공받습니다"