Luxeritas 자식 테마 (style.css) 사용자 정의
Luxeritas(룩세리타스)는 국산의 무료로 고기능의 Wordpress 테마입니다.이 블로그에서 자식 테마 style.css의 사용자 정의 내용을 소개합니다.
Luxeritas 아이 테마를 편집하는 방법
style.css를 편집하는 방법은 두 가지가 있습니다.
1. "스타일 시트 : style.css"에 직접 입력
관리 화면 : Luxeritas → 자식 테마 편집 → "style.css"태그를 선택
"/* 이하, 기호에 따라 아이 테마용의 스타일을 써 주세요.*/" 이후에 코드를 기입합니다.
2.외관 사용자 정의의 '추가 CSS'에 입력
관리 화면 : Luxeritas → 사용자 정의 (외관) → 추가 CSS
코드 입력과 동시에 코드 반영 결과를 볼 수 있으므로 여기를 추천합니다.
style.css 사용자 정의 내용
사이트 제목을 굵게 표시
표준이라고 조금 문자가 가늘고 인상이 얇다고 하는 분에게.
/* 사이트 제목 */ #sitename { font-weight: bold;}
띠 모양 메뉴 아래에 그림자를 붙여 머티리얼 스타일로
이것에 그림자가 붙어서…
이것이 될 것입니다.미묘한 차이이지만 의외로 사이트의 분위기가 바뀝니다.
/* 글로벌 네비게이션 아래 그림자*/ #nav { box-shadow: 0 2px 10px rgba(0,0,0,.2) }
외관 사용자 정의에서 설정할 수 없는 호버 색상
기사 타이틀이나 전후 기사의 호버색은 표준이라고 적색입니다.이것은 외관 사용자 정의에서 직접 변경할 항목이 없었던 것 같습니다.
color:아래에 좋아하는 색의 코드에 넣는 것으로 변경할 수 있습니다.덧붙여서 "#00b22f"는 라이트 그린.또 기사 타이틀은 굵은 글씨로 해 보기 쉽게 했습니다.
/* 기사 제목*/ .entry-title a:hover{color:#00b22f;} .entry-title {font-weight: bold;} /* 전후 기사 */ #pnavi a:hover{color:#00b22f}
블로그 카드를 머티리얼 디자인으로
이런 식의 블로그 카드가 완성됩니다.커서를 맞추면 푹신 푹신합니다.
/* 블로그 카드 디자인 */ a.blogcard-href { padding: 0px; min-height: 102px; box-shadow: 0 2px 5px rgba(0, 0, 0, .13); transition: .3s; } a .blogcard-href:hover { box-shadow: 0 4px 20px rgba(0,0,0,0.25); transform: translateY(-5px); } .blogcard-img { margin: 0px 10px 0 0; border:none } p.blog-card-title { margin: 5px 5px 5px 5px; } p.blog-card-desc { display: none; } p.blogcard-link { clear: none; margin: 5px 0 5px 5px; } @media only screen and (max-width: 430px){ p.blogcard-link { display: none; }}
이하의 페이지를 참고로 했습니다.
Luxeritas의 블로그 카드를 SANGO 스타일에 살짝 띄우는 커스터마이즈
페이지 네이션의 색상 변경
이쪽도 기사 타이틀등과 같이 붉은 채로, 외관 커스터마이즈로부터 변경할 수 없었습니다. 「#999999」로 회색으로 하고 있습니다.
.pagination>.active>span, .pagination>li>a:hover{ background: none; background-color: #999999; }
변경하면 이런 느낌↓
태그 클라우드 디자인 변경
/* 태그 클라우드 디자인 변경 */ .tagcloud a { border-radius: 3px; /* 둥근 모서리 */ padding-bottom: 1px; padding-left: 6px; padding-right: 3px; padding-top: 1px }
태그 모서리를 둥글게 하여 행 폭을 좁혔습니다.
기사 제목 아래 여백 삭제
기사 제목 아래에 google 애드 센스 광고를 넣을 때 광고 전후의 줄 사이가 커서 걱정되었습니다. margin을 삭제하면 가능한 한 컴팩트하게 설치할 수 있었습니다.
/* Meta Information (갱신일) 하단 마진 삭제*/ .meta, .post .meta { padding: 5px 0; margin-bottom: 0px; } /* 기사상, 기사하의 마진 삭제 */ .post- title-upper, .post-title-under { margin-bottom: 1px; }
이상입니다.