티스토리 꾸미기 - 타이틀 높이, 배경 바꾸기

⬆️ 티스토리에서 띄우는 광고 ⬆️

---

---

 

티스토리를 한지 얼마 안된 시점이다.

이것저것 직접 꾸며야 할 부분이 많다.

 

우선 눈에 거슬리는 타이틀

타이틀이 너~무 크다.

 

정확히는 

티스토리 배경 영역이 너무 넓다.

 

그리고 타이틀 배경이 대표이미지를 확대해 보여줘서 좀 불편하다.

 

바꿔보자.

---

타이틀 높이 바꾸기

 

1. 관리 페이지 들어가기.

 

2. 화면 왼쪽. 스크롤을 내리면 '스킨 편집' 이 있다. 클릭.

 

3. 이번에는 화면 오른쪽. 'html 편집' 클릭.

 

4. 브라우저에 경고 메세지가 뜬다. 동의하면 '확인'

 

5. 그럼 소스 편집 화면이 나온다.

 

여기서 손 댈 부분은 CSS 부분이다.

위쪽 'CSS' 클릭

 

6. 높이 조정하기

편집 창에서 'Ctrl + F' 눌러서 'post-cover' 를 검색하면 아래와 비슷한 부분을 찾을 수 있다.

height 항목을 원하는 크기로 수정한다.

다른것 수정하지 않은 상태에서는 200px 가 최소 높이다.

 

7. 본문과 타이틀 윗부분 간격 설정

'tt-body-page' 를 검색하자.

'padding-top' 을 적당히 수정한다.

 

이렇게 하고 포스트를 눌러보면

타이틀 아랫 부분이 좀 넓다.

이럴땐 안쪽 패딩을 좀 줄이면 된다.

 

8. 타이틀 안쪽 패딩 수정

'post-cover' 를 검색하자. 아래와 같이 inner 부분을 찾을수 있다.

'padding-bottom' 을 적당히 바꾸면 된다.

 

---

타이틀 배경화면 고정하기

 

대표이미지가 확대되서 타이틀 배경으로 설정되어 불편하다면,

그냥 없애거나 특정한 배경으로 바꾸고 싶다면 다음과 같이 하면 된다.

 

1. 파일업로드

배경이미지로 쓸 파일을 준비한다.

필자는 그냥 까만 이미지를 준비했다. 용량도 그냥 166B.

용량이 작아서 페이지 로딩이 빠를거라 생각된다.

 

'파일업로드' 탭을 누르고 아래쪽 '추가' 버튼을 누른후 파일을 선택한다.

그럼 아래와 같이 추가된걸 확인할 수 있다.

 

2. 링크복사

방금 올린 이미지 위에서 마우스 우클릭 - 링크 주소 복사 클릭

 

3. 링크 넣기

이번에는 HTML 을 수정한다. 'HTML' 탭을 먼저 누르고

'Ctrl + F' 를 눌러서 검색하자. 'post-cover'

그럼 <s_article_rep_thumbnail> 이 붙어있는 부분을 찾을수 있다.

아래 스타일의 background-image:url( 이부분 ) 안에 넣어준다.

 

여기까지 하면 타이틀 배경이 고정된다.

배경을 아예 안넣고 싶다면 아래와 같이 하면 된다.

 

4. 배경을 없애기 (회색으로 바뀜)

위 3번처럼 검색해서

background-image:url( ) 이걸

background-image:none 으로 바꿔주면 된다.

---

최종 결과

 

이제야 높이랑 배경이 해결되었다.

 

지금 당장은 이걸로 만족한다.

 

---