동적뷰 본문 줄 간 간격 설정하기

 .article .article-content {  
 line-height:1.7;  
 }  

동적뷰에서 본문 줄 간 간격을 설정해주는 코드입니다. line-height에는 원하는 값을 입력하시면 됩니다. 기본(default)으로 설정되어 있는 줄 간 간격은 1.4입니다.

코드 삽입 위치는 [대시보드 → 템플릿 → 맞춤설정 → 고급 → CSS추가] 입니다.


! 참고로, 위의 선택자(selector), 즉 '.article .article-content'로 동적뷰 본문의 폰트 크기 또한 설정이 가능합니다. 본문 폰트 크기와 줄 간 간격을 같이 설정한다면, 코드의 모습은 다음과 같은 형태가 되겠죠.

 .article .article-content {  
 line-height:1.7;  
 font-size:12px;  
 }  

지난 번에 동적뷰 본문 폰트 크기 설정 이라는 글에서 알려드린 코드를 이미 쓰고 계시다면, 해당 코드를 삭제하신 후 이 코드로 대체하시면 됩니다.

데모 보기


! 코드 적용 전 템플릿을 반드시 백업해두시기 바랍니다.
! 테스트용 블로그에서 충분한 테스트를 해본 후 사용하세요.

동적뷰 검색바 폰트 크기 설정하기

동적뷰에서 검색바 '검색' 글씨의 폰트 크기를 설정해주는 코드입니다.

 #header input#search {  
 font-size:12px;  
 }  

코드 삽입 위치는 [대시보드 → 템플릿 → 맞춤설정 → 고급 → CSS추가] 입니다. font-size의 값은 자신이 원하는 값으로 대체하시면 됩니다.

데모 보기

동적뷰 블로그 제목 마우스 오버 시 밑줄 제거

동적뷰에서 블로그 제목에 마우스를 갖다대면 밑줄이 생깁니다. 아래 코드는 마우스 오버 시 밑줄이 생기지 않도록 설정해주는 코드입니다.

 #header .header-bar .title a {   
 text-decoration:none;  
 }  

코드 삽입 위치는 [대시보드 → 템플릿 → 맞춤설정 → 고급 → CSS추가] 입니다.

데모 보기

동적뷰 헤더바 폰트 크기 설정하기

그림1

코드1

 .header-drawer .menu span{  
 font-size: 11px !important;  
 }  

코드2

 .header-drawer .tabs{  
 font-size: 11px !important;  
 }  

코드3

 #header .menu .menu-item {  
 font-size: 11px !important;  
 }  

동적뷰에서 헤더바의 폰트 크기를 설정해주는 코드들입니다. (코드1과 코드2의 출처는 Southerspeakers입니다.)

코드 삽입 위치는 [대시보드 → 템플릿 → 맞춤설정 → 고급 → CSS추가] 입니다. <그림1>을 참고하시고, font-size에 각각 원하는 값을 입력하시면 됩니다.

데모 보기

동적뷰 블로그 제목과 설명 폰트 크기 설정하기

코드1 - 블로그 제목 폰트 크기

 #header .header-bar .title h1 {  
 font-size: 16px;  
 }  

코드2 - 블로그 설명 폰트 크기

 #header .header-bar .title h3 {  
 font-size: 12px;  
 }  

코드1과 코드2는 각각 동적뷰에서 블로그 제목과 설명의 폰트 크기를 조절해주는 코드입니다.

코드 삽입위치는 [대시보드 → 템플릿 → 맞춤설정 → 고급 → CSS 추가] 입니다. 코드를 삽입하실 때 'font-size'의 값을 자신이 원하는 값으로 대체하시면 됩니다.

데모 보기

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

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


데모 보기


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

동적뷰 본문 폰트 크기 설정

그림1

동적뷰 사용시 맞춤설정에서 폰트 크기를 아무리 설정 해줘도 본문 폰트 사이즈가 바뀌지 않는데요.

그림2

크롬이나 파이어폭스에서 요소 검사를 했을 때, 동적뷰 본문의 폰트 크기는 일반 템플릿과 달리 article이란 class에 스타일 설정이 되어 있는 것을 볼 수 있었습니다.

 .article {  
 font-size:10px;  
 }  

고로, 동적뷰 본문의 글자 크기를 조절하시려면 위의 코드를 [대시보드 → 템플릿 → 맞춤설정 → 고급 → CSS추가] 에 삽입하시면 됩니다. 삽입하실 때, 10px 자리에는 원하는 픽셀이나 em을 입력하시면 됩니다.

데모 보기


! 내용 수정

아래의 코드로도 본문 폰트 크기를 설정할 수 있습니다.

 .article .article-content {  
 font-size:12px;  
 }  

! 본문의 폰트 크기와 줄 간 간격을 같이 설정하시려면, 아래의 글을 참고하시기 바랍니다.

본문 줄 간 간격 설정하기

동적뷰 사이드바뷰에서 글 목록과 본문 사이의 간격 설정

어제 올린 글에 한 분이 동적뷰 사이드바 뷰에서 글 목록과 본문 사이의 거리를 벌리는 방법에 대해 물어봐주셨습니다.

"https://lh6.googleusercontent.com/-Igs9iOvcb9M/Uh1TMstvCqI/AAAAAAAACpw/5ZqBzH9E2CE/w520-h292-no/0b.png

출처 블로그 구경하는 중에 링크 이미지 처럼 사이드바와 본문과의 거리를 벌린것을 봤는데요. 요것도 어떻게 하는지 알려주시면 정말 정말!! 고맙겠습니다."

저 역시 방법이 궁금하여 찾아보았는데요. 아래의 코드를 이용하여 사이드바와 본문 사이의 거리를 벌릴 수 있었습니다.

 .sidebar .article {   
 word-wrap:break-word;  
 margin-left:200px;   
 }  

코드 삽입 위치는 [대시보드 → 템플릿 → 맞춤설정 → 고급 → CSS추가] 입니다. 코드 삽입 시 200px을 자신이 원하는 수치로 대체해주면 됩니다.

위에서는 왼쪽 마진을 200px 주는 것을 예로 제시했습니다만, 왼쪽이 가능하다면 오른쪽 역시 가능할 것입니다

그림1

그림2

그림3

그림4

<그림2>에서처럼 오른쪽의 간격을 벌리고 싶다면, left 대신 right를 입력해주면 되겠죠. 코드는 이런 모습일 것입니다.

 .sidebar .article {   
 word-wrap:break-word;  
 margin-right:200px;   
 }  

그리고, <그림3> 에서처럼 왼쪽과 오른쪽 간격을 모두 설정하고 싶다면, 왼쪽 마진과 오른쪽 마진을 동시에 입력해 줍니다.

 .sidebar .article {   
 word-wrap:break-word;  
 margin-left:200px;   
 margin-right:200px;   
 }  

<그림4>와 같이 왼쪽, 오른쪽, 위, 아래 모두 간격을 주고 싶다면, left나 right라는 단어를 빼 버리고 그냥 'margin'이라고 입력해주면 될 것입니다.

 .sidebar .article {   
 word-wrap:break-word;  
 margin:200px;   
 }  

덧붙여, 아래의 글은 패딩(padding)이나 마진(margin) 개념을 이해하는데 도움이 될 만한 도면을 모아둔 글입니다. 시간날 때 참고하시면, 블로그의 간격을 조절할 때 도움이 되리라고 생각합니다.

관련 글 - 패딩(padding), 마진(margin) 개념을 이해하는데 도움이 될 만한 도면 모음

! 내용수정

이런 저런 테스트를 해보던 중 공백이 "전혀" 없는 긴 텍스트를 입력할 경우, 본문이 본문 영역을 뚫고 나가는 현상이 생기는 것을 확인했습니다. 공백없는 텍스트를 길게 입력하는 경우는 거의 없으므로 크게 문제가 되지 않으리라 생각합니다만, 그래도 혹시라도 모를 경우를 위해 각각의 코드에 다음의 코드를 추가하였습니다.

 word-wrap:break-word;  

동적뷰 사이드바뷰에서 글 목록 너비 설정하기

그림1

그림2

그림3

동적뷰의 사이드바 뷰에서 왼쪽 글 목록의 너비(width)를 <그림2>나 <그림3> 처럼, 좁게 또는 넓게 설정해주는 코드입니다.

 .sidebar #sidebar{  
 width: 250px !important;  
 }  
 .sidebar #content{  
 margin-left: 250px;  
 }  

코드 삽입 위치는 [대시보드 → 템플릿 → 맞춤설정 → 고급 → CSS추가] 이고, 코드의 출처는 해외 블로거 +Yogaratnam N. 님의 블로그 Southernspeakers.net 입니다.

코드를 삽입할 때 250px 이라고 적혀있는 부분을 자신이 원하는 너비의 값으로 수정해주면 됩니다. 참고로, 두 수치는 반드시 일치해야 합니다. 예를 들어서, 왼쪽 글목록의 너비를 150px로 하고 싶다면 다음과 같이 입력해주면 됩니다.

 .sidebar #sidebar{  
 width: 150px !important;  
 }  
 .sidebar #content{  
 margin-left: 150px;  
 }  

블로거 일반 템플릿에서 동적뷰 전환하기

"사랑과 죽음은 별개가 아니라 같은 것의 앞뒷면이다."

일본의 오츠이치라는 소설가의 명언을 본 따서 이렇게 말씀드리겠습니다.

"일반 템플릿과 동적뷰는 별개가 아니라 같은 것의 앞뒷면이다."

--- 이상 헛소리 ! ---



일반 템플릿 블로거의 주소 뒤에 '/view' 를 추가하면 해당 블로그 컨텐츠를 동적뷰로도 볼 수 있습니다.

http://블로그주소/view

예를 들어, 저의 블로그는 일반 템플릿 블로그이죠. 그러나, 제 블로그 주소에 아래처럼 '/view' 라고만 입력 해주면,

http://ielselog.blogspot.kr/view/

블로그가 동적뷰로 전환되는 모습을 볼 수 있습니다.

이같은 방식으로 동적뷰로 전환될 때 기본(default) 뷰는 sidebar 뷰입니다. 즉, 위의 주소로 들어가면 주소가

http://ielselog.blogspot.kr/view/sidebar

로 변경되는 것을 보실 수 있습니다. 원하는 뷰를 설정하고 싶다면, '/view' 대신 '/view/magazine', '/view/classic' 이런 식으로 특정 뷰 값을 입력해주면 되겠죠.

일반 템플릿을 사용하는 분들은 페이지 탭 메뉴나 사이드바 메뉴에 동적뷰 전환 버튼이나 링크 등을 추가함으로써, 블로그를 좀 더 다채롭고 동적으로 꾸밀 수 있지 않을까 싶습니다.


PS. 아무래도 제가 글 제목을 잘못 지은 것 같습니다. 글 제목 때문에 동적뷰 관련 질문을 주시는 분들이 많네요. 이 글은 그러니까 음.. 일반 템플릿 사용시 일반 템플릿을 그대로 사용하면서, 블로그의 글들을 동적뷰로도 볼 수 있게 하는 방법에 대해 적어본 것입니다. 블로그/템플릿 전체를 동적뷰로 전환시키는 것이 아니므로, 혼동하지 않으셨으면 좋겠습니다.

동적뷰 Flipcard View에서 '최근 항목' 글자 이탈 현상 수정하기

그림1

동적뷰의 7가지 뷰 중에서 Flipcard 뷰를 선택하면, <그림1>에서 보시는 바와 같이 최근 항목의 '목' 자가 박스를 이탈하는 현상이 발생합니다.

동적뷰를 꾸미거나 문제를 해결할 때 저는 주로 해외 블로거들의 글을 참고하는데요. 저 현상은 '한글' 블로그에서만 나타나는 문제이기 때문에 관련 글을 따로 찾을 수가 없었습니다.

그림2

크롬 브라우저로 요소 검사를 해본 결과, 이 현상은 CSS의 스타일 설정에서 너비(width)가 고정되어 있어서 발생하는 문제였습니다. 해당 요소의 CSS 스타일 설정을 따로해주었더니, 문제가 해결되는 모습을 볼 수 있었습니다.

두 가지 방식이 가능할텐데요.

하나는 <그림3>처럼 동일 간격을 유지하되 간격을 좀 더 넓게 설정해주는 방법이겠구요.

그림3

또 하나는 <그림4>와 같이 박스의 너비를 글자에 맞게 자동으로 조절하는 방식이 될 것입니다.

그림4

<그림3>처럼 동일 간격을 유지하고 싶다면 아래의 코드 중 첫번째 코드를, <그림4>와 같이 글자 수에 맞게 박스 너비를 조절하고 싶다면 두번째 코드를 [대시보드 → 템플릿 → 맞춤설정 → 고급 → CSS추가] 의 위치에 삽입해줍니다.

 #controls ul#groups li {  
 width: 100px !important;   
 }  

 #controls ul#groups li {  
 width: auto !important;   
 }  

참고로, 첫번째 코드에서 너비가 반드시 100px일 필요는 없습니다. 글자가 이탈하지 않는 수준에서 적절할 너비를 입력해주면 됩니다.

데모 보기

동적뷰 타이틀에 이미지 삽입하기 #2

그림1

지난번에 동적뷰 타이틀에 이미지를 삽입하는 방법에 대해서 제가 두가지 방법을 알고 있다고 말씀을 드리면서, 첫번째 방법을 알려드렸습니다.

동적뷰 타이틀에 이미지 삽입하기 #1

오늘은 두번째 방법입니다. 첫번째 방법은 코드 수정을 거의 필요로 하지 않는 대신 원하는 크기의 이미지를 올릴 수는 없었습니다. 오늘 소개하는 방법을 이용하면, 원하는 크기의 이미지를 올릴 수 있습니다.

동적뷰의 텝 페이지를 드롭다운 메뉴로 변경시키기

그림1

그림2

동적뷰에서 탭 페이지는 <그림1>에서 처럼 헤더 아래 검은 바에 가로로 표시됩니다.
아래의 코드는 탭 페이지를 <그림2>와 같이 드롭다운 메뉴로 바꿔줍니다.

 #header.header .header-drawer #pages.tabs ul li{  
 margin: 100000px;  
 }  

코드 삽입 위치는 [대시보드 → 템플릿 → 맞춤설정 → 고급 → CSS추가] 이며, 코드의 출처는 해외 블로거 southernspeakers 입니다.

참고로, 드롭다운 메뉴 최상단에는 <그림2>에서 보시는 바와 같이 'Pages'라고 표시됩니다. 이 문구를 원하는 문구로 바꿀 수 있지 않을까 싶어서 테스트용 블로그에서 여러 방식으로 시도해보았습나다만, 방법을 찾을 수 없었습니다.


! 내용수정

'Pages' 바꾸는 방법에 대해 +Hui-Su Jeong 님께서 댓글로 링크를 남겨 주셨네요. 아래에 해당 코드를 추가하였습니다.

 #pages span:first-child{  
 font-size: 0px !important;  
 }  
 #pages .menu-heading:before, .ss{  
 content: "목록";  
 font-size: 15px !important;  
 }  

코드 삽입 위치는 마찬가지로 [대시보드 → 템플릿 → 맞춤설정 → 고급 → CSS추가] 입니다. 삽입하실 때 '목록' 대신 원하는 글자를 입력하시면 됩니다.

블로거(blogger) 동적뷰 검색바에 확장 효과 주기

그림1

그림2

동적뷰의 검색바를 클릭하면 검색바의 길이가 확장되는 효과를 주는 CSS 코드입니다.

 #header input#search{-moz-transition:all 0.3s ease-in-out;-ms-transition:all 0.3s ease-in-out;-o-transition:all 0.3s ease-in-out;-webkit-transition:all 0.3s ease-in-out;transition:all 0.3s ease-in-out;}  
    
 #header input#search:focus{width:450px;}  

코드 삽입 위치는 [대시보드→템플릿→맞춤설정→고급→CSS추가] 입니다. 2번째 줄은 검색바를 얼마나 길게 확장할지를 설정해주는 코드입니다. '450px' 대신 자신이 원하는 수치를 입력해 줍니다. 코드의 출처는 Ishan 이라는 해외 블로거입니다.


주의.

1. 본 코드는 제가 직접 작동 여부를 시험해본 후 올리는 것입니다.
2. 그러나, 독자분들께서는 코드 적용 전 템플릿을 꼭 백업해두시기 바라며,
3. 또한 만일의 경우를 대비해 테스트용 블로그에서 시험을 해본 후 적용하실 것을 추천합니다.

블로거(blogger) 동적뷰 포스트 하단의 공유 버튼 보이지 않게 설정하기

그림1

동적뷰에서 포스트 하단에 표시되는 공유 버튼(구글+, 트위터, 페이스북)을 보이지 않도록 설정해주는 태그입니다.

 /* Hide the sharing controls */  
 .share-controls { display: none !important; }  

코드 삽입 위치는 [대시보드→템플릿→맞춤설정→고급→CSS추가] 입니다.

블로거(blogger) 동적뷰 우측 하단의 의견보내기 버튼 보이지 않게 설정하기

그림1

동적뷰의 우측 하단에 표시되는 의견보내기 버튼을 보이지 않게 설정해주는 코드입니다.

 /* Hide the google chrome feedback button */  
 a.feedback { display: none !important; }  

코드 삽입 위치는 [대시보드→템플릿→맞춤설정→고급→CSS추가] 입니다.

블로거(blogger) 동적뷰의 뷰 스타일 선택 옵션 숨기기 #2

블로거(blogger) 동적뷰에서의 뷰 선택 옵션 설정은 예전에 구글 블로그 동적뷰에서 특정 뷰 제거하기 라는 글에서 한번 다룬 적이 있습니다. 오늘 소개하는 방법도 비슷한 내용입니다. 선택 옵션 자체를 완전히 숨기고자 할 때에는 오늘 소개하는 방법이 좀 더 손쉬운 방법이라고 할 수 있겠습니다.

그림1

동적뷰에서는 7가지 뷰 스타일을 선택할 수 있습니다. 헤더에 페이지 요소가 없을 때에는 그림1과 같이 7가지 뷰 스타일이 헤더에 일렬로 표시됩니다.

그림2

그림3

동적뷰에서 헤더에 페이지 요소를 추가하면, 그림3 처럼 7가지 뷰 스타일은 드롭다운 메뉴로 표시됩니다.

독자(reader)로 하여금 이 7가지 뷰 스타일을 선택을 할 수 없도록 하려면, 즉 해당 요소가 표시되지 않도록 하려면 블로그에 아래의 코드를 삽입합니다.

1:  #header #views {  
2:  display: none;  
3:  }  
4:     
5:  #header #pages:before {  
6:  border-left: 0px;  
7:  }  
8:     
9:  #header #pages {  
10:  margin-left: 100px;  
11:  }  

코드의 삽입 위치는 [대시보드→템플릿→맞춤설정→고급→CSS추가] 입니다.(복사하실 때 1: 2: 3: 등 코드 왼쪽의 숫자 행 표시는 알아서 삭제하셔야 합니다.)

그림4

코드의 9, 10, 11 행은 탭 페이지 요소와 왼쪽 가장자리 사이의 간격을 조절하는 요소입니다. 코드를 삽입할 때 10행의 '100px'을 자신이 원하는 수치로 대체해줍니다. 간격을 따로 설정하고 싶지 않다면, 9·10·11 행을 제외하고 1~7행만 삽입하면 됩니다.

블로거(blogger) 동적뷰에서 검색바 넓이 조절 태그

그림1

동적뷰에서 검색바의 넓이를 조절해주는 태그입니다.

 #header input#search {  
 width: 100px;  
 }  

코드 삽입 위치는 [대시보드→템플릿→맞춤설정→고급→CSS추가]입니다. 코드를 삽입할 때 2번째줄에 숫자 '100' 대신 자신이 원하는 수치를 설정해줍니다.