구글 블로그 사용법: 새로운 반응형 테마 헤더 본문 사이드바 너비 조절하는 방법
구글에서 새로 제공하는 반응형 테마인 Contempo, Shoho, Emporio, Notable에 사이드바 너비, 메인 너비, 사이드바와 메인 사이의 최소 여백을 설정하는 기능이 추가 되었습니다.
방법은 아래 그림과 같이,
>> 블로그 대시보드에서 테마(Theme) > 사용자설정(Customize) 버튼을 눌러 블로거 테마 디자이너 (Blogger Theme Designer)를 엽니다.
>> 왼쪽 메뉴에서 고급설정(Advanced) > 너비(Width) 항목을 열어서, 조절 레버를 움직여서 설정하거나, 입력란에 수자를 직접 입력해도 됩니다.
테마가 나온 이래 한가지씩 개선이 되고 있으므로, 사용자들의 피드백이 반영되리라 생각됩니다. 테마 오른쪽의 애드센스 위치와 너비 설정기능에 대하여 의견들이 많이 있는 것 같지만, 아직 이 기능은 제공되지 않습니다.
주) 아래는 반응형 테마가 처음 나왔을 때, 너비 조절 기능이 제공되지 않던 때에 작성한 글입니다. 아래와 같이 하여도 됩니다.
구글에서 새로 제공하는 반응형 테마인 Contempo, Shoho, Emporio, Notable은 영역 구조, 사이드바 위치, 헤더 높이, 본문(메인) 너비, 사이드바 너비 등을 조절할 수 있는 기능이 없습니다.
그러나, 테마(템플릿)디자이너에서는 조절할 수 없지만, 아래와 같이, HTML 편집창에서 헤더 (배경 그림) 높이, 본문(메인) 너비 그리고 사이드바 너비 세 가지는 조절할 수 있습니다.다만, 조절 후에 테스트를 해 본 결과 문제는 발견되지 않았지만 특정한 기능에서는 오류가 발생할 수 도 있습니다.
이전의 코드에 비해 복잡해진 탓에 여타 수치를 조절하면, 접속기기에 따른 반응 기능이 제대로 작동하지 않습니다.
너비 조절 방법은
>> 블로그 대시보드 > 테마(Theme) > HTML 편집 (Edit HTML)버튼을 눌러 편집창을 연다
>> 아래 그림에서 좌측의 행 번호와 그룹(Group) 이름을 참조하여 해당 코드 부분으로 간다
>> 조절하고자 하는 영역 그룹의 값(value)을 조절한다.
다만, 최소값(min), 최대값(max) 범위 안에서 조절하여야 오류가 생기지 않습니다. 최소값이나 최대값을 변경하면, 테마의 틀 자체가 흩으러져 오류가 생길 가능성이 높습니다.
새로운 반응형 테마에서는 세로형 애드센스 영역을 별도로 두고 있고, 이 영역의 너비를 조절하면 오류가 발생하므로 조절할 수 없습니다.
[반응형 테마 헤더, 본문, 사이드바 너비 조절하기]
[테마 영역 너비/높이 설정하는 코드 그룹 이름]
반응형 테마는 처음 나온 탓에 사용자가 영역을 조절할 수 없지만, 언젠가는 이전 테마들 처럼 사용자가 조절할 수 있도록 개선될 것으로 짐작됩니다.
방법은 아래 그림과 같이,
>> 블로그 대시보드에서 테마(Theme) > 사용자설정(Customize) 버튼을 눌러 블로거 테마 디자이너 (Blogger Theme Designer)를 엽니다.
>> 왼쪽 메뉴에서 고급설정(Advanced) > 너비(Width) 항목을 열어서, 조절 레버를 움직여서 설정하거나, 입력란에 수자를 직접 입력해도 됩니다.
테마가 나온 이래 한가지씩 개선이 되고 있으므로, 사용자들의 피드백이 반영되리라 생각됩니다. 테마 오른쪽의 애드센스 위치와 너비 설정기능에 대하여 의견들이 많이 있는 것 같지만, 아직 이 기능은 제공되지 않습니다.
주) 아래는 반응형 테마가 처음 나왔을 때, 너비 조절 기능이 제공되지 않던 때에 작성한 글입니다. 아래와 같이 하여도 됩니다.
구글에서 새로 제공하는 반응형 테마인 Contempo, Shoho, Emporio, Notable은 영역 구조, 사이드바 위치, 헤더 높이, 본문(메인) 너비, 사이드바 너비 등을 조절할 수 있는 기능이 없습니다.
그러나, 테마(템플릿)디자이너에서는 조절할 수 없지만, 아래와 같이, HTML 편집창에서 헤더 (배경 그림) 높이, 본문(메인) 너비 그리고 사이드바 너비 세 가지는 조절할 수 있습니다.다만, 조절 후에 테스트를 해 본 결과 문제는 발견되지 않았지만 특정한 기능에서는 오류가 발생할 수 도 있습니다.
이전의 코드에 비해 복잡해진 탓에 여타 수치를 조절하면, 접속기기에 따른 반응 기능이 제대로 작동하지 않습니다.
너비 조절 방법은
>> 블로그 대시보드 > 테마(Theme) > HTML 편집 (Edit HTML)버튼을 눌러 편집창을 연다
>> 아래 그림에서 좌측의 행 번호와 그룹(Group) 이름을 참조하여 해당 코드 부분으로 간다
>> 조절하고자 하는 영역 그룹의 값(value)을 조절한다.
다만, 최소값(min), 최대값(max) 범위 안에서 조절하여야 오류가 생기지 않습니다. 최소값이나 최대값을 변경하면, 테마의 틀 자체가 흩으러져 오류가 생길 가능성이 높습니다.
새로운 반응형 테마에서는 세로형 애드센스 영역을 별도로 두고 있고, 이 영역의 너비를 조절하면 오류가 발생하므로 조절할 수 없습니다.
[반응형 테마 헤더, 본문, 사이드바 너비 조절하기]
[테마 영역 너비/높이 설정하는 코드 그룹 이름]
ㅇ 헤더 (배경 이미지) 높이 설정
<Group description="Backgrounds">
ㅇ 본문(메인) 너비 설정
<Group description="Posts" selector="div.widget.Blog">
ㅇ 사이드바 너비 설정
<Group description="Sidebar" selector="div.sidebar-container">
<Group description="Backgrounds">
ㅇ 본문(메인) 너비 설정
<Group description="Posts" selector="div.widget.Blog">
ㅇ 사이드바 너비 설정
<Group description="Sidebar" selector="div.sidebar-container">
반응형 테마는 처음 나온 탓에 사용자가 영역을 조절할 수 없지만, 언젠가는 이전 테마들 처럼 사용자가 조절할 수 있도록 개선될 것으로 짐작됩니다.