글
구글 블로그 테마(템플릿) 변경방법 / 나눔고딕체 적용방법
구글 블로그 ( Blogger )사용 시 블로그의 테마를 변경하는 방법입니다.
기본적으로 구글에서 제공하는 기본 템플릿이 여럿 있지만, 그 이외의 템플릿을 사용하고 싶은 사용자는 직접 제작하거나, 다운로드받은 템플릿 파일을 적용시킬 수 있습니다.
바로 본론으로 넘어가서 테마의 변경방법은 아래 순서와 같습니다.
먼저 블로거에 접속해 줍니다. Blogger.com
이후, 메인 화면에서 왼쪽 패널의 테마를 클릭해 줍니다.
테마 메뉴에 접속하면 아래와 같은 화면이 뜨게 됩니다. 외부 테마를 적용하기 전, 예기치 못한 오류가 발생할 수 있는 관계로 미리 현재 테마를 백업해 줍니다.
우측 상단의 백업/ 복원 버튼을 눌러 줍니다.
테마 > 백업/복원 탭입니다.
먼저 테마를 백업하여 위해 테마 다운로드 버튼을 눌러 현재 테마의 .xml 파일을 다운로드 받아 줍니다.
이제, 직접 제작하거나 다운로드받은 테마 .xml 파일을 아래 파일 선택 버튼과 업로드 버튼으로 올려 줍니다.
아래는 무료 템플릿 다운로드 사이트 목록입니다.
- http://designscrazed.net/best-free-blogger-templates/
- http://www.mybloggerthemes.com/
- http://www.themexpose.com/
- http://btemplates.com/
필자는 Hudson 이라는 템플릿을 다운받아 업로드하였습니다.
테마를 업로드 한 후, 모바일 화면이 비활성화 되어 있는것을 볼 수 있습니다.
모바일 테마를 활성화 시켜주기 위해서 모바일 항목 아래의 톱니바퀴를 눌러줍니다.
모바일 아래의 톱니바퀴를 눌러주면 아래와 같은 설정창이 하나 뜨게 됩니다.
아래 창에서 모바일 테마를 사용하는 것을 체크하면, 여러 테마가 선택 가능해지는데 사용할 테마를 선택해 주면 됩니다.
모바일 테마를 씌워주고 나서, 템플릿이 잘 적용되었는지 확인해 봤습니다. 확인결과, 템플릿에 본문 속 한글이 조금씩 흐릿하게 보이는 현상이 발생하였습니다.
이를 해결하기 위해서 나눔고딕 폰트를 템플릿에 적용해 주었습니다.
폰트 적용 방법은 아래와 같습니다.
먼저 테마 항목에서 HTML 편집을 들어가, <head> 태그 아래에
<link rel='stylesheet' href='http://fonts.googleapis.com/earlyaccess/nanumgothic.css'/>
코드를 작성해 줍니다.
이후 실제 테마에 적용시키기 위해 테마 항목에서 맞춤설정에 들어가 줍니다.
맞춤설정을 들어가면 새로운 웹 페이지가 뜨게 됩니다.
이 페이지 상단에 고급-너비조정을 클릭하면 CSS 추가 패널이 뜨게 됩니다.
해당 CSS 패널에 아래 코드를 붙여 줍니다.
body, h1, h2, h3, h4, a, div, input, p, span, td, label, select, textarea, iframe {
font-family: 'Nanum Gothic';
}
.post-body {
font-family: 'Nanum Gothic';
}
.Header .description, .Header h1 {
font-family: 'Nanum Gothic';
}
.main-inner .widget h2.date-header span {
font-family: 'Nanum Gothic';
}
h3.post-title {
font-family: 'Nanum Gothic';
}
h3.post-title a {
font-family: 'Nanum Gothic';
}
.sidebar .widget {
font-family: 'Nanum Gothic';
}
font-family: 'Nanum Gothic';
}
.Header .description, .Header h1 {
font-family: 'Nanum Gothic';
}
.main-inner .widget h2.date-header span {
font-family: 'Nanum Gothic';
}
h3.post-title {
font-family: 'Nanum Gothic';
}
h3.post-title a {
font-family: 'Nanum Gothic';
}
.sidebar .widget {
font-family: 'Nanum Gothic';
}
글꼴이 나눔고딕체로 변경된 것을 확인할 수 있습니다.
블로그에 적용 버튼을 눌러 저장해 줍니다.
이후 적용된 테마의 위젯들을 수정하고 싶다면 레이아웃 항목에서 기호에 맞춰 수정하면 됩니다.
0 개의 댓글:
댓글 쓰기