모바일 템플릿

스마트 폰의 진보와 대중화로 웹사이트 검색에도 데스크 탑 보다 모바일을 선호하는 추세이다. 따라서 모바일의 중요성이 가일층 대두되어, 블로그 운용도 모바일 편의성이란 과제를 안고 있다. 모바일 편의성의 향상은 구독률과 직결되므로 반드시 고려되어야 한다. 탁월한 기능의 반응형 스킨도 완벽하게 모바일에 반응하지 못하는 관계로, 글자의 크기 등을 차별화하는 작업이 불가피하다.

선행 사항

데스크 탑과 차별화된 스마트폰 스킨을 편집하기 위해서 블로그 홈페이지에서 모바일 설정 하는 방법은 다음과 같다.

블로그 메뉴에서 테마를 선택한다.
맞춤설정 메뉴 옆에 있는 아래 화살표를 클릭한다.
메뉴에서 모바일 설정을 클릭한다.
메뉴에서 모바일을 체크하고 테마선택 아래 화살표를 클릭한다
풀다운 메뉴에서 맞춤을 선택하고 저장하면 된다.
스마트폰으로 사이트를 검색하면 모바일 모드로 전환된다.

스타일 지정 방법

전체 적용

데스크 탑과 전체적으로 차별화된 스마트폰 스킨은, 블로그 템플릿 안에 스마트폰 전용 스타일(style)을 만들어야 하며, 방법은 다음과 같다.

블로그 메뉴에서 테마를 선택한다.
맞춤설정 메뉴 옆에 있는 아래 화살표를 클릭한다.
메뉴에서 HTML편집을 클릭한다.
HTML 편집창에서 Ctrl+F 를 이용하여 </head>를 검색하고 바로 앞에 다음과 같이 스타일을 지정하고 사용하면 된다.
아래의 2번 항목은 모바일 전용을 의미한다. 따라서 그 안에 태그는 모바일에만 적용되므로 글자 크기, 색상 등 똑같은 요소를 다시 설정하면 PC 화면과 다르게 나타낼 수 있다. 적용되지 않을 때는 12번 항목처럼‘!important’를 추가해야 한다.

  <!--모바일-->
<b:if cond='data:blog.isMobile'> 
     <style>
@media only screen and (max-width: 768px) {
    html, body {
    background: #fff;
    max-width: 100%;
    overflow-x: hidden;
    width:100vw ; 
} 
.widget .title {
    font-size:16px !important;
}
.header-widget {
    background-position: left;
    background-repeat: no-repeat;
    background-size: contain;
}
#wide{
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
}
}
</style>
</b:if>

페이지 별 적용

페이지(포스트)별로 스마트폰의 내용이 각각 다르게 보이도록 꾸미는 방법은 다음과 같다.

글 작성 화면에서HTML 보기를 선택한다.
페이지 하단에style만든다.
스타일에서원하는 요소를 무한정 추가하고 수정할 수 있다.
반드시 마지막 괄호 함수를중복(16, 17번 줄)해서 표기해야 한다.

<style>
@media only screen and (max-width: 768px) {
 
h1{
   color:red;
   font-size:20px;
}
img{
   border:solid 2px blue;
   text-align:left;
}
}
</style>

선택적 고려 사항

HTML을 이용해서 스마트폰 화면을 자유 자재로 꾸밀 수 있다.

파비콘/타이틀

블로그 메뉴에서 레이아웃을 선택한다.
레이아웃 페이지에서 헤드 섹션을 클릭한다.
헤드 위젯에서 파비콘 이미지를 업로드 한다.
크기, 배경 등을 스마트폰 화면에 맞게 수정하면 된다.

div/이미지 확대

이미지나 div를 모바일 화면에 가로로 꽉 채우기 위해서는 본 게시글 1장 '전체적용' 9번줄 처럼 코드(#wide)를 지정하면 된다.

외부 위젯

관련글 위젯
데스크 탑에서 위젯이 설치되어야 한다.
모바일 화면에 맞도록 스타일을 별도로 지정해야 한다.

모바일에서 위젯 보이기

일부 위젯이 모바일에서 보이지 않을 경우는 해당 위젯에서 다음의 코드들을 사용하면 된다.

<b:widget id='game' locked='true' mobile='yes' title='' type='game' version='2' visible='true'>

<b:if cond='data:blog.isMobileRequest == "true"'>
<!--모바일에만 보이기-->
</b:if>

모바일에서 위젯 보이지 않기

특정 위젯을 모바일에서 보이지 않도록 할 경우는 해당 위젯에서 다음의 코드들을 사용하면 된다.

<b:if cond='data:blog.
isMobileRequest == "true"'>
<!--모바일에서 보이기 않기-->
</b:if>

<b:widget id='game' locked='true' mobile='yes' title='' type='game' version='2' visible='true'>