구글 블로거(블로그 스팟) 초창기 시절, 복잡한 HTML 코드를 수정하며 블로그를 꾸며야 했습니다.
하지만 이젠 테마 디자이너라는 기능이 추가 되어 손쉽게 다양한 레이아웃, 가젯(위젯), 색상, 글꼴 등을 수정하여 블로그의 테마를 수정할 수 있습니다.
Essential 테마, 다크 테마로 변신!!
현재 테스트 중인 구글 블로거(블로그 스팟) 블로그에 적용 되어 있는 Essential 테마에서 다크 테마로 변경하며 테마 디자이너를 어떻게 사용 방법에 대해 알려 드립니다.
참고 : 현재 테스트 용 블로그 레이아웃에 활성화된 가젯은 블로그 검색 가젯, 블로그 게시물 가젯, 저작자 표시 가젯, 악용사례 신고 가젯 등만 활성화 되어있습니다.
그 외에 적용되어 있던 가젯 들은 삭제 또는 비활성화 상태 입니다.
이 부분은 참고 하시길 부탁 드립니다.
테마 디자이너 접속 방법
테마 디자이너에 접속 방법은 2개의 방법이 존재 합니다.
첫 번째 접속 방법
구글 블로거(블로그 스팟) 대시보드에서 레이아웃 페이지로 이동 하면 상단에 테마 디자이너라는 링크 이동 텍스트를 클릭 하여 이동 가능 합니다.
두 번째 접속 방법
구글 블로거(블로그 스팟) 대시보드에서 테마 페이지로 이동 하면 상단에 적용된 테마가 보이고 테 명 아래에 맞춤설정 이라는 버튼을 클릭 하여 시동 합니다.
테마 디자이너 구성
구글 블로거(블로그 스팟) 테마 디자이너를 사용하면 왼쪽에는 '백그라운드', '고급', '가젯' 탭이 있어 블로그 테마에 색상이나 글꼴 등을 수정할 수 있고, 오른쪽에는 실시간 미리보기 화면이 있어 변경 사항을 바로 확인할 수 있습니다.
백그라운드 탭
테마의 배경 색상을 변경 가능한 탭입니다.
하지만 테스트 중인 구글 블로거(블로그 스팟) 블로그에 적용 되어 있는 Essential 테마에서는 백그라운드 탭에서는 수정하여도 변경되지 않고 링크 색상이 변경 됩니다.
고급 탭
고급 탭에서는 테마에 적용된 디자인들을 세부적으로 수정할 수 있는 탭입니다.
거의 대부분의 테마는 고급 탭에서 수정이 이루어집니다.
드롭다운 메뉴 항목에는 적용한 테마마다 구성이 다르지만 기본적으로 색상, 글꼴, 기타 기능 on or off를 수정, 변경 가능합니다.
가젯 탭
레이아웃에 추가된 모든 가젯을 수정할 수 있는 탭 입니다.
테스트 중인 구글 블로거(블로그 스팟) 블로그에 적용 되어 있는 Essential 테마에서는 표시 여부 정도만 수정 가능합니다.
하지만 테마 마다 레이아웃에 추가된 가젯에 설정을 수정할 수 있게 지원하는 테마도 있습니다.
해당 수정은 배포하는 테마에 대체적으로 설명 또한 이루어지므로 적용 한 테마에 테마 디자인에 대한 설명 또한 확인하고 원하는 부분을 수정 하시면 됩니다.
다크 모드 테마로 변경
고급 탭 -> 배경
고급 탭에서 드롭다운 메뉴 항목 중 '배경'을 선택 합니다.
Background overlay shadow 항목
Background overlay shadow에서 투명을 활성화 합니다.
Background overlay shadow 항목은 블로그의 배경에서 상단 부분에 색상을 변경 하거나 투명하게 변경할 수 있는 항목 입니다.
본문 배경 색상 항목 :
블로그의 배경 색상을 수정 하는 항목입니다.
여기서 '추가' 링크 버튼을 클릭하고 맞춤 색상 버튼을 클릭합니다.
맞춤 색상 선택으로 변경 되면 여기서 16진수에 입력된 색상 코드 값을 #1A1A1A로 변경 하고 저장 합니다.
그럼 실시간 미리 보기 탭에서 블로그의 배경 색상이 변경된 것을 확인할 수 있습니다.
글 배경 색상 항목 :
블로그 게시물의 배경 색상을 변경 하는 항목 입니다.
이것 또한 똑같이 '추가' 링크 버튼을 클릭하고 맞춤 색상 버튼을 클릭합니다.
맞춤 색상 선택에서 16진수에 #2B2B2B로 변경 하고 저장 합니다.
그럼 실시간 미리 보기에서 블로그 글 배경 색상이 변경된 것을 확인할 수 있습니다.
고급 탭 -> 글
고급 탭에서 드롭다운 메뉴 항목 중 '글'을 선택 합니다.
글 제목 색상 항목 :
블로그 글 제목의 색상을 변경 하는 항목 입니다.
'추가' 링크 버튼을 클릭하고 맞춤 색상 버튼을 클릭합니다.
맞춤 색상 선택에서 16진수에 #f6f7f8로 변경 하고 저장 합니다.
그럼 실시간 미리 보기에서 블로그 글 제목 색상이 변경된 것을 확인할 수 있습니다.
글 제목 스트림 글꼴 항목 :
블로그 글 제목의 폰트 크기를 변경 하는 항목 입니다.
30px에서 22px로 변경 하면 실시간 미리 보기에서 블로그 글 제목의 폰트 크기가 변경된 것을 확인할 수 있습니다.
글 텍스트 색상 항목 :
블로그 글 텍스트의 색상을 변경 하는 항목 입니다.
'추가' 링크 버튼을 클릭하고 맞춤 색상 버튼을 클릭합니다.
맞춤 색상 선택에서 16진수에 #b4b6ba로 변경 하고 저장 합니다.
그럼 실시간 미리 보기에서 블로그 글 텍스트 색상이 변경된 것을 확인할 수 있습니다.
고급 탭 -> 사이드바
배경 색상 상단, 상단-HD, 하단 항목 :
상단과 상단-HD 배경 색상은 투명으로 활성화 하고 배경 색상(하단) 항목에서 '추가' 링크 이동 버튼을 클릭 합니다.
맞춤 색상 선택에서 16진수에 #1b1b1b로 변경 하고 저장 합니다.
실시간 미리 보기에서 Essential 테마의 사이드바는 실시간 미리 보기에서 확인이 안될 경우 테마 디자이너 페이지 하단 오른쪽에 저장 아이콘을 클릭하여 저장 후 블로그에서 직접 변경된 것을 확인 해야 합니다.
고급 탭 -> 너비 (선택 사항)
너비 항목은 사이드바, 콘텐츠, 콘텐츠 여백 등의 가로 너비를 수정할 수 있는 항목 입니다.
전 콘텐츠의 너비가 조금 줄이고 싶어서 768px를 주고 여백은 177px 주었습니다.
너비는 굳이 줄이지 않아도 큰 상관이 없지만
추후 너비를 조절 하셔야 한다면 위 고급 탭 -> 너비 항목에서 수정 하시면 됩니다.
마무리
이렇게 화이트 테마였던 Essential 테마를 다크 테마로 코드 수정 없이 손쉽게 수정하였습니다.
이것 외에도 테마에 따라 더욱 세부적으로 수정이나 적용 등의 여러 기능을 포함한 테마도 있습니다.
추후 다른 테마의 디자인을 수정 하실 분이시라면 테마 디자이너에서 수정 하시면 됩니다.
