티스토리 글 제목 배경 이미지 수정하기

 

몇 가지 간단한 편집으로도 티스토리 블로그 가독성을 높여줄 수 있다. 이글에서는 다음 세 가지 사항을 적용시켜보려고 한다.

 

• 글 배경 크기 및 제목 위치 변경
• 배경 이미지 수정
• 전체 글 리스트에서 제목 부분 수정

 

 글 배경 크기 및 제목 위치 변경

 

블로그관리 홈→스킨 편집→html 편집→CSS로 들어간다.

이곳에서 Ctrl + F를 눌러 .post-cover 로  검색해주고 height: 340px; 이 부분을 200px; 로 변경하고 '적용'버튼을 눌러준다.

 

 

배경 크기가 줄어들었지만, 제목 위치를 가운데로 맞추기 위해 다음과 같이 해준다.

 

 

 

‘CSS’에서 .post-cover .inner 를 검색해서 padding-bottom: 78px 부분을 30px; 으로 변경 후 ‘적용’ 버튼을 눌러준다. 이제 제목 위치가 가운데로 맞춰져 있음을 확인할 수 있다.

 

 

 

 

 배경 이미지 수정

 

제목의 뒷배경 이미지로는 ‘대표’로 지정된 썸네일 이미지가 적용되기 때문에 때때론 제목 부분이 가려질 뿐만 아니라 이중으로 보여 가독성이 떨어뜨릴 수도 있다. 따라서 다음의 편집으로 배경 이미지를 삭제해주면 된다.

 

먼저 배경 이미지로 쓰일 사진을 정한다. 여기서 주의할 점은 사진 파일 크기가 너무 커지면 글의 로딩 속도가 느려지게 되기 때문에 해상도가 깨지지 않는 선에서 저해상도 사진을 고른다.

 

‘파일 업로드’에 들어가서 하단에 ‘추가’를 눌러 파일 업로드해준다.

그리고 마우스 우측 버튼을 누르고, ‘링크 주소’를 복사한다.

 

 

그리고나서  ‘HTML’로 들어가서 post-cover"<s_article_rep_thumbnail> 를 검색하고 background-image:url 다음에 있는 괄호 안에 방금 복사한 링크 주소를 붙여 넣어주고 ‘적용’ 버튼을 눌러준다.

 

 

아래와 같이 배경 이미지가 수정된 것을 확인할 수 있습니다.

 

 

 

 

 전체 글 리스트에서 제목 부분 수정

 

리스트에서 보이는 긴 글 제목이 잘릴 경우에 편집을 통해 전부 노출할 수 있는 방법이 있다.

 

 

스킨편집→html 편집→CSS

이곳에서 .post-item .title 를 검색해주고 white-space를 nowrap; 에서 normal;로 바꿔주고 ‘적용’을 눌러준다.

 

아래와 같이 글의 제목이 전체 노출된 것을 확인할 수 있다.

 

 

추가로 제목 폰트의 두께도 수정할 수 있는데 그 방법은 다음과 같다.

 

 

마찬가지로 .post-item .title 에서 검색된 화면중에 .list-type-thumbnail .post-item .title 목록으로 이동한

다.이곳에 폰트 두께를 결정짓는 코드가 없기 때문에 다음과 같이 ‘font-weight: 700;’을 추가해주고 적용을 눌러준다.

 

 

 

스킨 썸네일 정사각형으로 바꾸기

스크롤바 하나로 나도 전문 블로거!