구글블로그 사용법: 모바일템플릿 꾸미기 - 테두리 배경 색상 폰트 버튼 등을 꾸미는 방법

구글 블로그에서 제공하는 템플릿에는 기본적으로 모바일 템플릿이 포함되어 있으므로, 방문자가 스마트폰 등의 모바일 기기로 접속을 하면 자동으로 모바일 템플릿이 적용된다.

모바일 템플릿을 잘 어울리도록 꾸미려면 CSS 코드를 만들어 추가하면 간단하고 쉽다. (CSS 코드를 추가하는 방법은 링크 페이지 참조)


CSS 코드 예

CSS코드를 만드는 방법은 꾸미고자 하는 모바일템플릿 요소에 필요한 속성만을 넣어 주면 된다. 모바일템플릿의 요소와 요소에 설정할 수 있는 속성들은 아래쪽에 정리하였다.
모바일 템플릿 요소에는 앞에 " mobile "이 붙어 있다.

포스트-아웃트의 배경색을 흰색(#ffffff)으로 설정한 예

.mobile .post-outer { background: #ffffff; }

포스트-아웃트의 배경색을 흰색(#ffffff)으로 그리고  테두리의 모서리를 둥글게 설정한 예

.mobile .post-outer { background: #ffffff; border-radius: 5px;}

모바일 템플릿 요소

아래의 요소들 가운데, 꾸미고자 하는 요소만 쓰면 된다.

.mobile .content-inner{ }
.mobile .header-outer{ }
.mobile .main-outer { }

.mobile .tabs-inner .PageList .widget-content { }
.mobile .tabs-inner .PageList .widget-content .pagelist-arrow { }

.mobile .date-outer {}
.mobile .post-outer { }
.mobile-index-contents { }

.mobile-link-button { }

.mobile-link-button a:link { }
.mobile-link-button a:hover { }
.mobile-link-button a:visited { }
.mobile-link-button a:active { }

요소에 설정할 수 있는 속성

HTML에서 사용되는 속성들을 사용하면 된다. 아래는 그 가운데 자주 쓰이는 속성들을 정리한 것이다.

border: solid 1px #C6C6C6; 
border-radius: 0;
border: none;

width: 300px;
max-width: 200px;
height: auto;
max-height: auto;

float: left;
align: center;

background: #ffffff;
background-color: #ffffff;

margin: 0 0 0 0;
padding: 0 0 0 0;

text-decoration: none;
text-transform: uppercase;

font-size: 12px;
font-weight: bold;
color: #666666; 

모바일 템플릿 사용자 설정 적용하기

위에서와 같이 모바일 템플릿을 꾸민 다음, 그 내용이 적용되도록 하기 위해서는 아래와 같이 설정해 주어야 한다.

>> 블로그 대시보드 > 템플릿(Theme) > 모바일 설정 버튼을 눌러 설정창을 연다
>> 모바일기기에서는 모바일 템플릿을 적용하도록 선택 (Yes, Show mobile theme ......)
>> 모바일 테마 (theme) 선택 (Choose mobile theme)에서 사용자 설정 (Custom)을 선택하고 저장(Save) 한다.