동적뷰 본문 제목 폰트 크기 및 컬러 설정

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.으로 각각 설정이 가능합니다.


데모 보기


! 코드를 적용하기 전에 템플릿을 반드시 백업해두시기 바랍니다.
! 테스트용 블로그에서 테스트를 충분히 해본 후 적용하시기 바랍니다.
! 이 글에서처럼 동적뷰에 스타일을 별도로 설정할 경우 가급적 렌더링 타임아웃을 최대로 설정하실 것을 추천합니다.