안녕하세요 별깡솔입니다 : )
별깡솔 블로그를 방문하신 모든 분들 진심으로 감사드립니다
사이드바 카테고리
프로필 박스 바로 하단에 위치한 카테고리 부분입니다
공식 가이드에 치환자 값 정보는
|
블로그 사용자의 카테고리 개수 만큼 알아서 노출시켜주는 방식이어서 아주 세밀하게 제어하기는 힘들 것 같다
html로 직접 작성해서 컨트롤하는 방법이 있겠지만 새 글이 작성되었을 때 표시 방법과 글 카운터가 불가능해진다
원래는 html 코드를 직접 작성하려 하였으나 능력이 부족하니 css를 사용하자
border, background color, color change, text shadow, hover, opacity, font icon, pseudo class 정도가 사용될 것이다
뭐가 많고 거창해보이지만 간단한 작업들이니 만들어 가면서 알아보자
우선 현재 차지하고 있는 크기를 살펴본다
대략 300px x 356px 공간을 차지하고 있다
코드를 수정하기 전에 백업을 해두고 하자
Odyssey 스킨은 <!-- 카테고리 메뉴 --> 해당 부분에 주석 안내가 있다
주석 처리를 해야 사이드바 모듈에 이름이 표시될테니 아마 대부분의 스킨에 주석 안내가 있을 것이다
body wrap container main area-aside box-category
box-category 상위에 <s_if_var_sidebarcategoryuse> 있을 수 있다 (Odyssey 스킨)
box-category 아래 tt_category를 찾는다
카테고리라고 적힌 부분은 아무 기능을 가지지 않고 싶은데 링크가 걸려 있다
링크 요소를 해결하려면 html 수정을 조금 해야할 것이다
조금 더 명확한 표현은 링크가 안 걸린 'Categories'라는 문구를 넣고
링크 걸린 카테고리를 안 보이게 하는 방법이다
<s_sidebar_element>
<!-- 카테고리 메뉴 -->
<div class="box-category box-category-2depth">
<h3 class="category-title">Categories</h3>
</div>
</s_sidebar_element>h3 태그 코드 한 줄 추가하고 클래스를 부여하고 css로 제어하자
.tt_category a.link_tit {display: none;}
위에 css 코드는 링크가 걸린 카테고리를 보이지 않게 한다
기존에 적용된 css 부분을 입맛대로 수정하면 된다
완성한 카테고리 모습은 아래와 같다
카테고리에 마우스 올라갔을 때 약간의 움직임과 컬러가 진해지는 효과를 넣었다
새로운 글이 있는 카테고리는 기존의 이미지를 표시하지 않고
xeicon의 아이콘을 표시하고 keyframe 애니메이션 pulse 효과를 살짝 넣었다
각 카테고리는 font-awesome의 아이콘을 표시하고 있으며
하위 카테고리가 있는 상위 카테고리는 방향을 틀어 놓았다
상위 카테고리 아이콘은 마우스가 올라오면 마우스 커서를 포인터로 변화하고
클릭하면 하위 카테고리가 슬라이딩하고 아이콘은 방향을 튼다
카테고리 글 개수 표시에 괄호를 없애고 대신에 Posts 문구를 넣었다
부족한 실력으로 카테고리를 꾸미느라 인터넷 검색을 통해 해결하였습니다
참고한 블로그 주소들은 아래에 링크해 놓겠습니다
카테고리 글 개수 괄호 삭제
https://satanel001.tistory.com/73
괄호 삭제 코드 원래 제공자는 모르지만 위 블로거는 CSS로 따로 커스텀했다
카테고리 새로운 글 이미지 표시 변환
친절한효자손 취미생활
https://rgy0409.tistory.com
친절한효자손 블로그에서 친효스킨의 코드에서 정보를 얻었고
무료로 스킨을 배포하는 좋은 분 같습니다
Jquery를 사용해야 해서 어려울 것 같지만 해당 코드 자체 깔끔하기에
별다른 수정 없이 사용할 수 있었습니다
해당 코드는 2줄 정도이며 자세한 사항은 직접 방문하시면 알 수 있습니다
사용한 css 부분은 아래에 적어 놓겠습니다
부족한 실력으로 인해 전체 코드는 공개하지 않습니다
마지막으로 여담이지만 html 요소를 잘 정리해서 꾸밀 수 있었다면
더 간단하게 꾸밀 수 있었겠지만 코딩 실력이 낮아 완전 제어하지 못하기에
소스 코드가 다소 난해할 수 있습니다
css
.box-category {font-size: 0;} /* 공백 삭제 */
/* 카테고리 타이틀 직접 만들기 */
.category-title {
font-size: 18px;
letter-spacing: 1px;
position: relative;
text-align: center;
font-weight: 400;
padding: 0 0 20px 0;}
.caory-title:before { /* 파란색 바 */
content: '';
position: absolute;
left: 50%;
bottom: 0;
width: 20px;
height: 2px;
background: #2d53fe;
transform: translateX(-50%);}
a.link_tit {display: none;} /* 전체 글 카테고리 숨기기 */
.category_list li {line-height: 30px; position: relative;}
.category_list > li:before { /* > 아이콘 */
content: '\f105';
font-family: "Font Awesome 5 Free";
font-weight: 900;
padding-right: 5px;
font-size: 20px;
transition: all 0.3s ease;
color: #777;}
/* 하위 카테고리 있다면 > 표시 안함 */
.category_list > li.parent:before {display: none;}
.category_list > li.on:before { /* 움직임, 컬러 효과 */
padding-left: 5px;
color: #333;}
.category_list > li .parent-li { /* 아이콘 영역, 크기 */
display: inline-block;
height: 30px;}
.category_list > li .parent-li:before { /* v 아이콘 */
content: '\f107';
font-family: "Font Awesome 5 Free";
font-weight: 900;
padding-right: 5px;
font-size: 20px;
transition: all 0.3s ease;
color: #777;
cursor: pointer;}
/* 상위 카테고리 아이콘 방향, 움직임 */
.category_list > li.parent.on .parent-li:before {
transform: rotate(-90deg);
padding-left: 5px;
color: #333;}
/* 상위 카테고리 클릭 방향 전환 */
.category_list > li .parent-li.active:before {
transform: rotateX(180deg);}
.category_list li a {
display: inline-block;
font-size: 16px;
color: #777;}
/* 글 개수 오른쪽에 위치하기 */
.category_list li a.link_item .c_cnt { position: absolute; right: 10px; }
/* 하위 카테고리 오른쪽으로 위치 */
.sub_category_list {padding-left: 10px;}
/* 하위 카테고리 아이콘 */
.sub_category_list li:before {
content: '\f105';
font-family: "Font Awesome 5 Free";
font-weight: 900;
transition: all 0.3s ease;
font-size: 14px;
padding-right: 5px;
color: #777;}
/* 하위 카테고리 이동 */
.sub_category_list li.on:before {
padding-left: 5px;
color: #333;}
/* 하위 카테고리 글 개수 위치 */
.sub_category_list a.link_sub_item .c_cnt {
position: absolute;
right: 10px; }
/* posts 문구 삽입 */
.category_list span.c_cnt:after {
content: 'Posts';
font-size: 10px;
padding: 0 10px 0 5px;}
/* 새 글 아이콘 */
.category-new:before {
content: '\e9a9';
font-family: 'xeicon';
animation: pulse 3s infinite; /* 키프레임 애니메이션 */
font-size: 14px;
border-radius: 50%;}
/* 키프레임 적용 */
.category-new {animation: category-new-pulse 2s infinite ease-out;}
/* 펄스 키프레임 */
@keyframes pulse {
0% {box-shadow: 0 0 0 0 rgba(119, 119, 119, 0.7);}
70% {box-shadow: 0 0 0 3px rgba(119, 119, 119, 0);}
100% {box-shadow: 0 0 0 0 rgba(119, 119, 119, 0);}
}이번 카테고리 꾸미기를 진행하면서 여러 블로그를 탐험하다 워드프레스를 발견했습니다
좋은 디자인들을 발견하고 별깡솔 블로그를 보니 너무 촌스러웠습니다
별깡솔 블로그 힘내자!
별깡솔 블로그를 방문하신 모든 분들 다시 한번 진심으로 감사합니다
구독과 좋아요 감사합니다 : )
'Tistory > Tistory Skin Edit' 카테고리의 다른 글
| 사이드 tag, 태그 꾸미기 (0) | 2020.10.16 |
|---|---|
| 사이드 최신글 인기글 꾸미기 날짜 형식 영어로 변경하기 (0) | 2020.10.15 |
| 헤더 영역 로고 & 카테고리 메뉴바 꾸미기 헤더 영역 (0) | 2020.10.08 |
| 홈 설정 포스터 타입 커버 꾸미기 (0) | 2020.10.04 |
| 사이드바 꾸미기 1. 프로필 영역 꾸미기 (0) | 2020.10.03 |