7월 16, 2021

Ghost theme(테마) 변경하기

Ghost theme(테마) 변경하기

고스트 사이트(https://ghost.org/)에서 상단 메뉴 Resources > Themes 로 이동합니다.

[그림1] 고스트 Resources 화면

많은 테마들이 있지만 저는 돈이 없으므로 Free 메뉴에서 찾아봅니다.

저는 일상생활(살림, 음식, 식물) / 망하고 있는 장사 이야기 / 개발 공부 기록을 블로그에 남기려고 하는데요, 제 망 라이프 느낌을 잘 살려줄 무료 템플릿이 있나 찾아보겠습니다.

흐음, 테마가 기대했던 것보다 많지 않네요. 저는 빈티지 갬성의 Editorial 테마를 골랐습니다. 마음을 정했으니 주십쇼!해야죠. 무료로 받는 것이니 감사하면서도 조심스러운 마음으로, 테마 소개 상단의 [Install Editorial] 버튼을 누릅니다.

앗! 당황스럽게 제 사이트 주소를 물어봅니다.  

[그림2] 네 사이트 주소를 입력하세요.

그렇지만 당황하지 않고, 팝업 하단에 있는 download 글자를 클릭합니다.

그리고 zip 파일이 다운로드되면, 어드민 페이지(http://localhost:2368/ghost) 에 들어갑니다. 어드민 페이지 왼쪽 하단에 있는 설정(톱니바퀴 아이콘)을 클릭 > 나오는 메뉴들 중 Theme 을 클릭하여 테마 설정 화면으로 진입합니다.

[그림3] 고스트 관리자 페이지 > 설정 > Theme 선택

이곳이 우리 블로그의 테마를 적용하는 곳입니다. 하단에 있는 [Upload a theme] 버튼을 클릭하여 아까 다운로드 받아놓은 Editorial zip 파일을 업로드 합니다. Activate 할거냐고 묻는 팝업이 나오면 당연히 [Activate] 를 클릭합니다.

[그림4] 업로드 성공! 활성화 하겠습니까?

이제 우리 블로그 http://localhost:2368 에 접속해 봅니다.

디자인이 바뀌긴 했는데, 제가 Editorial 테마에서 봤었던 차분한 오렌지 컬러가 아닙니다. 아.. 뭔가 속은 것 같습니다.

Editorial 테마 소개로 가서 사용된 색상을 확인합니다. 크롬 검사 기능을 사용하여 확인해보니 #56a6a 컬러를 사용했네요.

다시 어드민 페이지로 접속하여 설정(왼쪽 하단 톱니바퀴 아이콘) > Branding 메뉴로 이동합니다. 이곳에서 사이트 컬러, 아이콘, 로고, 메인화면 이미지(이건 테마에 따라 필요없을수도 있음)를 변경할 수 있습니다. 저는 Accent color를 오렌지 컬러로 바꿔주었습니다.

[그림7] Branding 메뉴

오른쪽 상단의 [Save and close]를 누르고, 다시 블로그로 돌아와서 새로고침 해 봅니다. 잘 적용되었습니다.

한글 폰트도 바꾸고 좀 더 다듬고 싶지만, 글을 쓰면서 점점 눈이 감기네요. 오늘은 여기까지 해야겠습니다.


추가: 테마 숲(https://themeforest.net/)에 가서 ghost theme으로 검색하니 더 많은 테마들이 있네요! 대신 그 숲에서 돈을 좀 쓰셔야 뭐라도 건져 가지고 나오실 수 있을 겁니다.