티스토리 블로그 스킨 수정 - 카테고리의 다른 글 더 보기

제 티스토리 블로그 스킨인 Life In Mono(Light)에서는 본문 하단에 동일 카테고리내의 다른 글을 출력해 주는 플러그인이 기본적으로 달려있습니다.

설정 방법은 관리자 페이지에서 [플러그인]➔[플러그인 설정]에서 ‘꾸미기’ 분류에 ‘카테고리 글 더보기’로 가셔서 설정 할 수 있습니다.

여기서는 간단하게나마 보여줄 수 있는 목록의 개수와 색깔을 변경할 수 있습니다. 배경이 너무 어두운 감이 있고, 밑줄을 없애 제 입맛에 맞게 변경할 방법을 알아봤습니다.

다른 티스토리 스킨과 달리 life in Mono 스킨에서의 style.css에서는 ‘카테고리의 다른 글’ 부분에 대한 설정내용이 특별히 보이지 않습니다. 때문에 style.css 하단에 별도로 추가해주면 됩니다.

1. 제목과 날짜 배경 색상

▶ .another_category table th {background-color:#fff; } /* 왼쪽 배경색 */

▶ .another_category table td {padding:2px; background-color:#F5F5F5; } /* 오른쪽 날짜 배경색 */

예를 들어 아래와 같이 변경할 수 있습니다.

➔ .another_category table th {background-color:#FFE146; }

➔ .another_category table td {padding:2px; background-color:#FF8200; }

➔

※ 이 부분은 본문내의 모든 표의 속성을 설정하는 소스에서도 변경해 줄 수 도 있습니다만, 이럴 경우 나중에 애드센스의 빈 여백 배경색까지 동일하게 변경 되어 애로사항이(?) 발생 할 수 있습니다. (관련 글 : 티스토리 블로그 스킨 수정 - 표나 박스의 배경색 변경)

2. 현재 글 이외에 밑줄 제거

▶ .another_category a.current { text-decoration: underline; } /* 현재 글 밑줄 */

▶ .another_category a { text-decoration: none !important; } /* 밑줄 제거 */

※ 만약 본문 내 하이퍼링크를 설정하는 소스에서도 밑줄을 제거하도록 변경해줬다면 굳이 이 코드를 넣어주실 필요는 없습니다. (관련 글 : 티스토리 블로그 스킨 수정 - 하이퍼링크, 링크색 및 밑줄 제거)

3. 오른쪽 날짜 없애기

▶ .another_category table td {display:none;} /* 오른쪽 날짜 없애기 */

적용하면 아래와 같이 날짜를 보여주던 오른쪽 칸이 사라집니다.

➔

4. 전체 배경 색상

▶ .another_category {background-color:색상코드;} /* 카테고리 글 더 보기 배경색 */

원하는 색상코드를 입력하면 아래와 같이 박스 전체의 배경 색상이 변경됩니다.

➔ .another_category {background-color:#FF3CBB;}

➔

글제목과 날짜가 보이는 항목까지 변경할려면 1번의 제목과 날짜 배경 색상에 동일한 색상코드를 넣거나 투명(transparent) 또는 없음(none)으로 수정해주시면 됩니다.

➔ .another_category table th {background-color:transparent; }

➔ .another_category table td {padding:2px; background-color:none; }

➔

5. 전체 배경 이미지

먼저 카테고리 글 더보기의 배경으로 준비한 이미지 파일을 티스토리의 관리자 페이지 ▶ 꾸미기 ▶ HTML/CSS편집 ▶ 파일업로드 항목을 이용하여 업로드 해줍니다.

그 다음 style.css 에서 아래의 문구를 추가하면 됩니다.

▶ .another_category {background:url("./images/이미지파일명") no-repeat bottom right;} /* 카테고리 글 더 보기 배경 이미지 */

예를 들기 위해 급조한 이미지를 만들어 ‘acbg.gif’란 이름으로 업로드 했습니다. 나중에 포스트 영역의 가로폭을 변경할지 몰라서 일부러 약간 크게 만들었습니다.

➔ (acbg.gif)

➔ .another_category {background:url("./images/acbg.gif") no-repeat bottom right;}

현재 오른쪽 아래를 기준으로 정렬된 이미지를 왼쪽(left) 위(top) 쪽으로 맞춰졌습니다.

➔ .another_category {background:url("./images/acbg.gif") no-repeat bottom right;}

➔ .another_category {background:url("./images/acbg.gif") no-repeat left top;}

⇩

적용 완료된 모습

 

 blog skin, tistory, 블로그 관리, 블로그 수정, 스킨수정, 카테고리 다른글, 카테고리 다른글 더보기, 카테고리 다른글 보기, 카테고리 다른글보기, 카테고리 다른글보기 설정, 카테고리의 다른 글, 카테고리의 다른글, 티스토리, 티스토리 스킨, 티스토리 스킨수정