티스토리 카테고리 글 더 보기 배경 꾸미기 - 블로그팁

카테고리 글 더 보기 이렇게 꾸며 보자

제 블로그 하단을 보면 카테고리의 다른 글 보기 부분이 조금 다를겁니다. 오른쪽에는 배경이 들어가있고, 기본적으로 나오는 날짜는 나오지 않고 있습니다. CSS 에 맞추어서 카테고리 다른 글 보기 꾸미는 블로그팁에 대해서 소개 합니다.

급하신 분은 붉은색 글자만 읽어보세요 ^^

카테고리 글 더 보기 꾸미기 절차

1. 플러그인 > 꾸미기 > "카테고리 글 더 보기" 활성화

티스토리관리자 페이지의 플러그인 설정에는, 카테고리 글 더 보기 라는 설정이 있습니다. 이 옵션을 활성화 해 줍니다.

2. 카테고리 글 더 보기의 여백부분에 넣을 그림을 선택 후, 자신의 스킨에 업로드 합니다.

무료 아이콘 좋은곳이 많군요 관련된곳을 엮어봤습니다.

Bloggertip.com (제트님) 블로그 아이콘(그림) 을 검색하는 좋은 포스트가 있네요.
부스카님 블로그 에도 무료이면서 수준 높은 이미지를 소개한 글이 있네요.
윤초딩님 블로그 무료아이콘 사이트 6곳을 소개한 포스트

직접 그림을 그려도 되겠지만, 잘 만들어진 그림을 활용하는것도 좋아보입니다. 좋은 무료 이미지 소개한 곳 있다면 트랙백날려주세요.

그림을 준비한뒤, 파일을 자신의 스킨에 업로드 합니다. 파일이름은 잘 기억해 둡니다. 아래 CSS 부분에서 적어넣어야합니다.

참고 !  파일명은 파일명으로도 어느위치의 그림인지 구분이 잘 가도록 설정하며, 기존에 업로더되어있는 그림파일명과 겹치지 않게 합니다. 같은 파일명을 올리면 덮어쓰게 되어 기존의 그림을 쓸 수 없게 됩니다.

.png(24) 그림 경우 IE6 의 하위버전에서는 배경이 검게 나올 수 있습니다. 상위버전의 인터넷브라우저를 사용한다면, 느끼지 못하는 부분이지만, 정 불편하다면 꽁수를 쓰는 방법도 있지만, 그림 사이즈를 줄이는 차원에서 .jpg 또는 .gif 로 배경색을 맞추어서 만들어 올릴걸 권합니다.

3. CSS (style.css) 의 맨 하단에 아래부분을 추가합니다.

/* 카테고리 글 더보기 그림 넣기 및 날짜 없애기 */
/* 아래의 "업로드한파일명" 부분에 2번 과정에서 업로드한 파일명을 적어줍니다. */

.another_category {
    background: transparent url(./images/업로드한파일명) no-repeat right bottom;
}
.another_category td {
    display: none;
}

"업로드한파일명" 부분을 수정한 뒤, CSS 를 복사하여 자신의 스킨의 style.css 의 맨 하단에 붙여넣기 합니다. 업로드한 파일명과 노란색의 파일이름 부분은 반드시 일치해야합니다.

- CSS 설명 -
위에 부분은, 카테고리 글 더 보기의 오른쪽 아래 부분에 위에서 업로드한 배경그림을 띄우라는 부분입니다. 아래 부분은, 카테고리 글 더 보기의 오른쪽에 날짜가 나오는 부분을 없애는 부분입니다.

배경그림 위치 조정 추가 팁

background: transparent url(./images/categoryanybg.jpg) no-repeat right bottom;  /* 오른쪽 아래에 그림을 놓음 */

background: transparent url(./images/categoryanybg.jpg) no-repeat right top;  /* 오른쪽 상단에 그림을 놓음 */

background: transparent url(./images/categoryanybg.jpg) no-repeat 600px 50px; /* X 축 600px, Y 축 50px 에 놓음 */ 

스킨공부에 도움이 될 책들