[블로그 모바일 최적화] 구글 블로그 모바일 스킨의 위젯 구조
구글 블로그의 모바일 스킨을 커스텀으로 꾸미고자 한다면, 웹버전의 색상과 글꼴 테마를 적용시키는 것 뿐 아니라, 위젯의 구조를 알고 위젯을 편집할 수 있어야 한다. 모바일버전은 웹버전처럼 세로2단 이상이 아닌, 세로 1단의 구조로 되어있기 때문이다. 이번 포스팅에서는 세로1단의 모바일 스킨이 어떤 위젯의 구성으로 이루어져 있는지, 어떻게 편집하는지에 대해서 알아본다. (컬러나 폰트 등의 테마 변경 부분은 이전 포스트인 모바일 커스텀 테마 편 참조).
모바일 스킨의 위젯 구조
우선 이 구조 파악의 기초 지식은 구글의 custom mobile template 안내에 따랐음을 밝혀둔다.
디폴트 값으로 모바일 스킨에 포함되는 구성요소는 여섯 가지이다.
1. 헤더(Header) - 블로그 타이틀과 설명이 들어간다.
2. 포스트본문요소(Blog)
3. 블로그 저자 프로파일(Profile)
4. 페이지리스트(PageList) - 페이지 요소들. 첫 화면의 최신 글 리스트들도 사실은 페이지요소이다. 그 외에 다른 페이지 요소를 블로그에 추가해서, 웹버전에 상단이든지 옆부분이든지 사용하고 있다면, 모바일버전에 선택목록이 나타난다.
5. 애드센스(AdSense)
6. 저작권정보(Attribution) - powered by blogger 같은...
괄호안의 용어들은 구글 블로그 html 템플릿에서 사용되는 위젯의 id이다
물론 웹버전에 추가되어 있지 않는 구성요소가 있다면, 모바일에도 나타나지 않을 것이다. 예를 들어, 웹버전에 저자프로파일 위젯이나, 애드센스가 없다면, 모바일 버전에도 나타나지 않는다.
그럼, 디폴트를 나타나지 않게 하거나, 디폴트가 아닌 요소들을 어떻게 나타나게 할 것인지 알아보자.
디폴트 값으로 모바일 스킨에 포함되는 구성요소는 여섯 가지이다.
1. 헤더(Header) - 블로그 타이틀과 설명이 들어간다.
2. 포스트본문요소(Blog)
3. 블로그 저자 프로파일(Profile)
4. 페이지리스트(PageList) - 페이지 요소들. 첫 화면의 최신 글 리스트들도 사실은 페이지요소이다. 그 외에 다른 페이지 요소를 블로그에 추가해서, 웹버전에 상단이든지 옆부분이든지 사용하고 있다면, 모바일버전에 선택목록이 나타난다.
5. 애드센스(AdSense)
6. 저작권정보(Attribution) - powered by blogger 같은...
괄호안의 용어들은 구글 블로그 html 템플릿에서 사용되는 위젯의 id이다
물론 웹버전에 추가되어 있지 않는 구성요소가 있다면, 모바일에도 나타나지 않을 것이다. 예를 들어, 웹버전에 저자프로파일 위젯이나, 애드센스가 없다면, 모바일 버전에도 나타나지 않는다.
그럼, 디폴트를 나타나지 않게 하거나, 디폴트가 아닌 요소들을 어떻게 나타나게 할 것인지 알아보자.
위젯을 원하는 대로 편집하자!
먼저 저작권정보를 예로 들어 보면,
<b:widget id="Attribution1" locked="true" title="Attribution" type="Attribution">
이런 식으로 시작된다. 여기서 locked="true"로 지정된 값은 레이아웃 편집 모드에서 위젯 삭제 버튼이 나타나지 않게 하는 기능을 한다. 아뭏든 여기 속성 중에 mobile="no"라고 첨가해 주면, 모바일에서 powered by blogger나 블로거 제공이나 이런 문구가 나타나지 않게 된다.
여기까지가 구글의 안내에 따른 방법이 되겠다. 이 블로그는 디폴트로 지정된 저작권 정보가 없어진지 몇 주 되는지라 이 방법이 잘 기능하는지 시험해보지를 못했다.
대신 헤더 부분을 가지고 시험해 보았다.
html 편집 모드를 통해 본 이 블로그 헤더 부분 코드는 다음과 같다.
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='false' title='헬라인의 weblog...[graphai](헤더)' type='Header'>
일단 헤더 위젯은 헤더 섹션 아래 들어가 있다. 헤더 섹션은 최대위젯수가 한개(maxwidgets='1')로 정해져 있다. 구글 안내대로, 두번째줄의 위젯 코드에 mobile='no'를 넣어주었다. 그 결과는...
블로그 타이틀 부분이 있는 헤더의 실종!!!
반대로 디폴트가 아닌 값을 모바일 템플릿에 넣고자 한다면, 해당 위젯코드에 mobile='yes'라고 기입해 주면 되겠다.
이 블로그 아래에 있는 copyright 어쩌구 하는 부분은 html/Javascript 위젯으로 만들어진 것이다. 원래의 저작권 정보(powered by blogger)가 편집이 불편해서 이렇게 만들어 주었다.
이 부분을 모바일 버전에도 나타나게 하고자 한다면,
<b:widget id='HTML3' locked='false' mobile='yes' title='' type='HTML'/>
이렇게 해당 위젯을 찾아서 mobile='yes'를 넣어주었다.(가젯코드 펼쳐보기를 하지 않으면 위젯의 제목부분만 나오므로, 원하는 위젯을 보다 쉽게 찾을 수 있다.)
화면 하단에 웹버전처럼 copyright...about me 등등이 나오는 것을 볼 수 있다.
만약, 어떤 위젯이 모바일에서만 나오기를 원한다면, mobile='only'라고 기입해 넣으면 된다.
<b:widget id="Attribution1" locked="true" title="Attribution" type="Attribution">
이런 식으로 시작된다. 여기서 locked="true"로 지정된 값은 레이아웃 편집 모드에서 위젯 삭제 버튼이 나타나지 않게 하는 기능을 한다. 아뭏든 여기 속성 중에 mobile="no"라고 첨가해 주면, 모바일에서 powered by blogger나 블로거 제공이나 이런 문구가 나타나지 않게 된다.
여기까지가 구글의 안내에 따른 방법이 되겠다. 이 블로그는 디폴트로 지정된 저작권 정보가 없어진지 몇 주 되는지라 이 방법이 잘 기능하는지 시험해보지를 못했다.
대신 헤더 부분을 가지고 시험해 보았다.
html 편집 모드를 통해 본 이 블로그 헤더 부분 코드는 다음과 같다.
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='false' title='헬라인의 weblog...[graphai](헤더)' type='Header'>
일단 헤더 위젯은 헤더 섹션 아래 들어가 있다. 헤더 섹션은 최대위젯수가 한개(maxwidgets='1')로 정해져 있다. 구글 안내대로, 두번째줄의 위젯 코드에 mobile='no'를 넣어주었다. 그 결과는...
반대로 디폴트가 아닌 값을 모바일 템플릿에 넣고자 한다면, 해당 위젯코드에 mobile='yes'라고 기입해 주면 되겠다.
이 블로그 아래에 있는 copyright 어쩌구 하는 부분은 html/Javascript 위젯으로 만들어진 것이다. 원래의 저작권 정보(powered by blogger)가 편집이 불편해서 이렇게 만들어 주었다.
이 부분을 모바일 버전에도 나타나게 하고자 한다면,
<b:widget id='HTML3' locked='false' mobile='yes' title='' type='HTML'/>
이렇게 해당 위젯을 찾아서 mobile='yes'를 넣어주었다.(가젯코드 펼쳐보기를 하지 않으면 위젯의 제목부분만 나오므로, 원하는 위젯을 보다 쉽게 찾을 수 있다.)
화면 하단에 웹버전처럼 copyright...about me 등등이 나오는 것을 볼 수 있다.
만약, 어떤 위젯이 모바일에서만 나오기를 원한다면, mobile='only'라고 기입해 넣으면 된다.
중요 위젯들의 id
방법을 알았다고 해도, 각종 위젯의 id를 알지 못한다면 이 방법은 무용지물이다. 위에서 열거된 디폴트 값들 외에 사용할 가능성이 높은 위젯들을 중심으로 위젯 id들은 다음과 같다.
- 블로그목록 - BlogList1
- 링크목록 - LinkList1
- 인기글목록 - PopularPosts1
- 라벨가젯구성 - Label1
- 블로그보관함 - BlogArchieve1
- 검색창 - CustomSearch1
- 관심사용자 - Followers1
- 통계 - Stats1
- 구독링크 - Subscribe1
- 슬라이드쇼 - Slideshow1
- 비디오바 - VideoBar1
댓글 없음:
댓글 쓰기