[TISTORY] 북클럽(BOOK CLUB) 스킨 꾸미기 - 포스팅 상부 타이틀 편집하기

" 북클럽(BOOK CLUB) 스킨 꾸미기 - 타이틀편 "

---

.

.

.

 

omyodevelop.tistory.com/4

[TISTORY] 북클럽(BOOK CLUB) 스킨 꾸미기 - 썸네일(Tumbnail)편

이전 포스팅을 보고 와주세요

 

 

북클럽 스킨의 초기 설정은, 본문에 들어간 이미지가 살짝 어둡게 변경되어 가로사이즈에 맞게 확대되고, 글씨가 하얀색으로 바뀌게 되어 있습니다.

이번 포스팅에서는, 가로 크기를 적절하게 맞추고, 폰트를 변경하는 방법에 대해서 알아보고자 합니다.

---

■ 상부 타이틀 부분 편집하기 - 폰트,크기,명암

---

 

전에 했던것과 마찬가지로, 스킨편집의 CSS 항목으로 들어가줍시다.

 

 

바꿔야 할 부분은 총 5개입니다.

 

440번 줄의 padding-top 상부 타이틀과의 간격 조정을 위해 339px를 180px로 조정합니다.

 

배경이 차지하는 높이를 조정하기 위해 1046번 줄의 height 값을 340px에서 220px로 변경합니다. (200px 이하로는 설정이 불가능합니다.)

 

배경이미지가 차지하는 농도를 더욱 어둡게 하기 위해서 , 1060번 줄의 background-color 항목의 값을 rgba(0,0,0,0.25)에서 rgba(0,0,0,0.75)로 바꿔줍니다. 숫자를 높게 쓸 수록 어두워지며, 낮게 쓸 수록 밝아집니다.

 

제목의 폰트가 가운데로 오게 하기 위해서, 1067번 줄의 padding-bottomm 값을 70px에서 40px로 바꿔줍니다.

 

폰트 두께를 더 굵게 하기 위해서, 1079번 줄의 font-weight 값을 300에서 500으로 바꿔줍시다. 이 값을 올릴수록 폰트가 두꺼워집니다.

 

마지막으로 다 바꾸셨다면 우측 상단의 적용을 눌러줍시다.

 

전에 비해서 가시성도 높아지고 확실히 깔끔해졌습니다.

 

■ 상부 타이틀 부분 편집하기 - 그림 삭제,추가

---

 

전보다는 낫지만, 배경으로 지정한 이미지가 남아서, 지저분해 보입니다.

다음으로 포스팅 상부 타이틀 부분의 그림을 삭제하거나 자신이 직접 만든 이미지를 넣는 방법에 대해서 알아봅시다.

 

일단, 글을 쓸때마다 상부 타이틀에 항상 고정시키고 싶은 자체 이미지가 있다면, 이미지를 앞서 설정한 높이 220, 가로를 2000px 정도로 제작해 줍시다.

 

 

그리고 파일업로드로 들어가서 추가해 줍니다.

파일명은 images/~jpg 까지 적어줍니다.

 

 

다음으로 html 탭으로 들어가 405번째 줄로 찾아가 줍니다.

자체 고정 이미지를 설정하고 싶으시다면, 노란색 밑줄친 부분을 url('/images/그림이름.jpg');"로 변경해 주시고

아무런 이미지도 넣고싶지 않으시다면, url부터 "전까지 모두 지우신 뒤 none이라고 입력 후 적용해 줍니다.

 

저는 none으로 설정하였기에, 단색 이미지만 남게 되었습니다.

---