[Portfolio 스킨] 14. 카테고리 다른 글 꾸미기

포스팅 밑에 보면 카테고리의 다른 글이라는 박스가 보인다.
이 기능은 플러그인에서 적용하면 사용할 수 있다.

• 플러그인 - 카테고리 글 더 보기 - 적용

하지만 막상 적용해보니 미리보기처럼 깔끔해보이지 않는다.
글씨 크기도 제각각이고 글씨가 너무 따닥따닥 붙어있고 밑줄도 보기 싫게 쭉쭉 그어져있다ㅜㅜ
이번엔 여기를 집중적으로 수정해서 미리보기처럼 깔끔하게 만들어보려고 한다.
 

적용 모습

글씨 크기만 통일되도 훨씬 깔끔한 느낌이라 마음에 든다.
 

스킨 수정 과정

1. 편집화면으로 들어간다.

• 꾸미기 - 스킨 변경 - 변경 - 스킨 편집 - HTML 편집 - CSS 편집

 
 

카테고리 다른글 테이블 헤드

• 적당한 위치에 아래 코드를 추가한다.

.article_view .another_category h4 a {
  text-decoration: none !important;
  letter-spacing: 0.05em; /* 자간 */
  word-spacing: 0.3em; /* 어간 */
  padding: 4px; /* 카테고리명 주위에 간격 넣기 */
}

 
밑줄을 지우고 자간이랑 어간을 조금 넓혔다.

 

카테고리 다른글 테이블 바디

• 적당한 위치에 아래 코드를 추가한다.

/* 카테고리 다른글 */
.article_view .another_category table,
.article_view .another_category table * {
  border: none;
  padding: 2px; /* 테이블 줄 간격 */
}

/* 카테고리 다른글 포스팅 제목 */
.article_view .another_category th {
  font-size: 12px !important;
}

.another_category th a {
  max-width: calc(100% - 42px); /* 제목칸 넓이 */
  display: inline-block;
  text-overflow: ellipsis; /* 넘치는 글자 …으로 줄이기 */
  white-space: nowrap;
  overflow: hidden;
  vertical-align: middle;
  text-decoration: none !important;
}

/* 카테고리 다른글 포스팅 댓글 수 */
.another_category th span {
  display: none; /* 안보이게 */
}

/* 카테고리 다른글 포스팅 날짜 */
.article_view .another_category td {
  font-size: 12px !important;
}

 
2. 코드 수정이 끝났다면 적용을 누른다.

 

기존 코드

/* 카테고리 다른글 */
.article_view .another_category table,
.article_view .another_category table * {
  border: none;
}