[티스토리 블로그 꾸미기] 포스트 커버, 나만의 이미지로 바꾸기 (북클럽 스킨)

안녕하세요~

공부법과 자기계발 법을 공유하는 선샤인입니다. *^^*

오늘은 포스트 커버를 나만의 이미지로 바꾸는 방법을 포스팅하려고 합니다.

최근까지 포스트 커버 배경 이미지를 바꾸느냐고 좀 애를 많이 먹었거든요 ㅠㅠ 이 과정에서 얻은 노하우를 공유하려고 합니다. 

 

포스트 커버가 무엇인지 잘 모르시겠다구요? 포스트 커버는 글 상단 제목 부분을 말합니다. 

포스트 커버란 무엇인가

아무 것도 설정하지 않은 북클럽 스킨에서는 포스트 커버에 글 대표 이미지가 배경으로 나옵니다.

저처럼 포스트 커버 배경에 직접 디자인한 이미지를 넣고 싶으신 분들께 이 포스팅이 도움될 것 같습니다.

 

 

---

1. 포스트 커버 세로 너비 조절하기

포스트 커버 배경 이미지를 직접 디자인하기 전에, 먼저 포스트 커버의 세로 너비를 조절해야 합니다. 

자신에게 알맞은 세로 너비를 파악해서 그 너비에 맞춰 디자인을 해야, 생각한 결과물이 나올 것입니다.

그럼 세로 너비 조절하는 방법을 알아보겠습니다~

 

① 블로그 관리 페이지에서 [스킨 편집]에 들어가신 다음 [html 편집]을 클릭하세요. 그런 다음 [CSS]를 클릭하세요.

② CSS 창 아무데나 누른 후, Ctrl + F 키를 눌러 post-cover 를 검색합니다. 그럼 1046행 쯤에 post-cover 세로 너비를 조절할 수 있는 부분을 찾을 수 있습니다. 

③ height의 숫자를 바꾸어 세로 너비를 조절할 수 있습니다. 초기 설정은 320px 정도였던 것 같은데요, 숫자를 바꿔가며 원하시는 너비를 찾으세요. 저는 250px가 가장 적당해보여서 250px로 설정했습니다. 세로 너비가 몇 px인지 기억해두세요.

 

 

2. 포스트 커버 배경 이미지 디자인하기

가로 너비는 1500px, 세로 너비는 설정하신 px로 원하시는 이미지를 디자인하시면 됩니다. 

저는 다른 사이트에서 디자인했지만, 미리 캔버스가 무료로 이미지 크기를 조절할 수 있어서 미리 캔버스를 추천 드리겠습니다.

https://www.miricanvas.com/

디자인 플랫폼 미리캔버스

미리 캔버스에는 다양한 탬플릿을 무료로 사용할 수 있고, 이미지 크기까지 조절할 수 있습니다. 

 

3. 포스트 커버 배경 이미지 변경하기

직접 디자인한 이미지를 포스트 커버 배경으로 설정해볼게요. 

① [스킨 편집] → [html 편집] → [파일 업로드]에 들어가세요.

② 디자인하신 이미지를 여기에 업로드 합니다. 파일명은 영어와 숫자만 됩니다. 그런 다음 우측 마우스 키를 눌러 링크를 복사해주세요.

③ [HTML]에 들어가서 ctrl + F로 s_permalink_article_rep를 검색하세요. 405~410 행 쯤에 코드가 있습니다.

④ image : url (~~~~~) 괄호 부분을 다 지우고, 복사한 링크를 붙여주세요. 

 

끝입니다~ 이런 식으로 나만의 포스트 커버 배경 이미지를 설정할 수 있습니다. 

 

---

생각보다 어렵지 않죠? ㅎㅎ 딱 맞는 가로 너비 찾느냐고 넘나 고생했네요 ㅠㅠ

독자 분들은 시간 아끼시길 바랍니다~

이 포스팅이 독자 분들께 조금이라도 도움이 되었으면 좋겠습니다.

그럼 다음 포스팅에서 뵐게요~ 

 

구독과 좋아요는 사랑입니다~