H******님께서 동적뷰 본문 폰트 크기 설정하는 방법에 대해 질문해주셔서, 부족한 CSS 실력으로 한번 찾아봤습니다.
몇가지를 선택자(selector)를 찾아냈는데. 주로 사용하시는 뷰에 따라서 골라 쓰시면 될 것 같습니다.
코드 삽입 위치는 [대시보드 → 템플릿 → 맞춤설정 → 고급 → CSS추가] 로, 모두 같습니다. 코드를 삽입하실 때 color, font-size, font-weight의 값은 자신이 원하는 값으로 대체하시면 됩니다. 또, 굳이 변경을 원하지 않는 속성은 삭제해도 괜찮습니다.
코드1. (투자한 시간이 아까워서 적긴 했습니다만, 코드1은 비추천입니다.)
.title * {
font-size:8px;
}
코드1.로는 본문 폰트 크기 설정이 가능합니다. 다만, 이 선택자(selector)로는 폰트 컬러 설정이 불가능했습니다. font-weight(굵게,이탤릭체 등) 설정이 가능하긴 했으나, font-weight의 설정이 본문 제목 뿐만 아니라 블로그 제목에도 영향을 주었습니다.
코드1.로 설정 가능한 뷰 및 본문 제목. 즉, 코드1.의 영향을 받는 뷰 및 페이지 :
 |
| Classic 뷰의 본문 제목 |
 |
| Flipcard 뷰의 본문 제목 |
 |
| Magazine 뷰 인덱스 페이지의 제목과 본문 제목 |
 |
| Mosaic 뷰 본문 제목 |
 |
| Sidebar 뷰 사이드바 제목과 본문 제목 |
 |
| Snapshot 뷰 인덱스 페이지 제목과 본문 제목 |
 |
| Timeslide 뷰 인덱스 페이지의 제목과 본문 제목 |
코드2.
.title a {
font-size:12px;
color:#2580a2;
font-weight:bold;
}
선택자(selector)를 ".title a"로 입력시 폰트 크기, 컬러 설정 및 font-weight 설정이 가능했습니다.
코드2.로 설정 가능한 뷰 및 본문 제목 (코드2.의 영향을 받는 뷰 및 페이지) :
 |
| Classic 뷰의 본문 제목 |
 |
| Flipcard 뷰의 본문 제목 |
 |
| Magazine 뷰 인덱스 페이지의 제목과 본문 제목 |
 |
| Mosaic 뷰의 본문 제목 |
 |
| Sidebar 뷰 사이드바 제목과 본문 제목. 단, 사이드바의 제목은 컬러 설정이 적용되지 않음. |
 |
| Snapshot 뷰의 인덱스 페이지 제목과 본문 제목 |
 |
| Timeslide 뷰 인덱스 페이지 제목과 본문 제목 |
코드3.
.tile .banner .title {
font-size:30px;
color:#2580a2;
font-weight:bold;
}
코드1.이나 코드2.로는 적용이 되지 않는, Mosaic 뷰 인덱스 페이지에서의 글 제목 폰트 크기, 컬러, font-weight 설정은 코드3.으로 할 수 있습니다. 코드3.은 Mosaic 뷰의 인덱스 페이지에만 적용이 됩니다.
코드4-1.
.items .item .card .front .title {
font-size:30px;
color:#2580a2;
font-weight:bold;
}
코드4-2.
.overlay .title {
font-size:30px;
color:#2580a2;
font-weight:bold;
}
Flipcard 뷰 인덱스 페이지의 제목은 마우스 커서를 올리기 전의 제목과 올린 후의 제목, 2개입니다.
마우스를 올리기 전(앞면)의 제목 폰트 크기와 컬러, font-weight 설정은 코드4-1.로, 마우스를 올린 후(뒷면)의 제목 폰트 크기와 컬러, font-weight 설정은 코드4-2.로 각각 설정할 수 있습니다.
코드5-1.
#sidebar .item .title a {
color:#5cabb8;
}
코드5-2.
#sidebar .item.selected .title a {
color:#2580a2;
}
코드5-3.
#sidebar .item:hover:not(.selected) .title a {
color:#b81a00;
}
5-1., 5-2., 5-3. 코드로는 코드2.로 설정할 수 없는 Sidebar 뷰 사이드바 제목의 컬러를 설정할 수 있습니다.
Sidebar 뷰 사이드바 제목에서 선택되지 않은 글의 폰트는 코드5-1.로, 선택된 글의 폰트 컬러는 코드5-2.로, 선택되지 않은 글에 마우스를 올렸을 때의 폰트 컬러는 코드5-3.으로 각각 설정이 가능합니다.
데모 보기
! 코드를 적용하기 전에 템플릿을 반드시 백업해두시기 바랍니다.
! 테스트용 블로그에서 테스트를 충분히 해본 후 적용하시기 바랍니다.
! 이 글에서처럼 동적뷰에 스타일을 별도로 설정할 경우 가급적
렌더링 타임아웃을 최대로 설정하실 것을 추천합니다.
