티스토리 블로그 '카테고리의 다른 글' 배경에 이미지를 넣어보자.

지난 강좌에서는 '카테고리의 다른 글' 배경색 수정과 밑줄 없애기 그리고, 날짜 없애는 법에 대해서 알아봤습니다. 오늘은 티스토리블로그의 카테고리의 다른글 부분에 배경색을 없애고 나면 허전한 공백 부분을 자신이 원하는 배경 이미지로 넣어보는 것을 해 보겠습니다. 관련된 지난 강좌 보실 분들은 클릭 -> 티스토리 블로그 <카테고리의 다른 글> 배경색 수정 및 밑줄 없애기 + 날짜 없애기

 

 

 

먼저 이 작업을 하면 어떻게 바뀌는지 확인해 볼까요?

'카테고리의 다른 글' 배경부분에 아래 그림처럼 자신이 원하는 그림을 넣을 수 있습니다.

아래에서 날짜를 없애고 싶은 분들은 아래 따로 설명을 해 드리겠습니다. 따라오세요~~

 

 

 

 

 

 

 

 

카테고리의 다른 글 보기 활성화 하기

 

먼저 카테고리의 다른 글 부분에 이미지를 넣으려면 플러그인을 활성화 시켜야겠지요? 관리자 > 플러그인 > 플러그인 설정 > 카테고리의 다른 글 더 보기 로 들어가셔서 플러그인을 활성화 시킵니다. 아래 그림처럼 표시할 글목록 개수와 색상 등을 설정하고 저장을 누르고 빠져나옵니다. 제 블로그의 경우는 6개를 설정했습니다. 6이란 숫자는 지금 보고있는 포스팅을 제외한 숫자입니다. 따라서 6을 설정하면 총 7개의 목록이 보여집니다.

 

 

 

 

 

 

배경으로 사용할 이미지 업로드

 

이제 배경 이미지로 사용할 파일을 업로드해야합니다. 관리자 > 꾸미기 > HTML/CSS편집 으로 들어가서 파일업로드 탭을 선택합니다. 그리고 파일을 업로드 한 다음 정상적으로 올라갔는지 꼭 확인하세요.

 

 

 

 

 

 

 

Style.css 에 소스코드 추가하기 및 날짜 없애기(옵션)

 

여기까지 오셨으면 거의 다 하셨습니다. 이제 Style.css에서 아래 그림처럼  몇 줄의 소스코드만 추가하면 됩니다.

 

 

 

[소스코드]  .another_category {      background: transparent url(./images/그림파일명) no-repeat 530px 50px;  }  .another_category td {display: none;}

 

[소스코드 설명]    background: transparent url(./images/그림파일명) no-repeat right bottom;   -> 그림을 우측하단으로    background: transparent url(./images/그림파일명) no-repeat right top;   -> 그림을 우측상단으로    background: transparent url(./images/그림파일명) no-repeat 600px 50px;   -> 박스 왼쪽 상단을 기준으로 가로축 600px 오른쪽으로, 세로축 50px 아래로    .another_category td {display: none;}   -> 우측의 날짜 삭제. (날짜 그대로 두실 분들은 이 코드 한 줄은 넣지마세요.)

 

 

※ 다시한번 말씀드립니다. 날짜를 없애지 않을 분들은 아래 소스 한 줄은 넣지 마세요.

 

 .another_category td {display: none;}

 

첨부 텍스트 파일은 배경이미지 삽입과 날짜 없애는 코드가 포함된 파일입니다.

필요하신 분은 아래 파일 받아서 사용하세요.

 

소스코드.txt

 

여러분들의 블로그도 점점 이뻐지고 있지요?