구글 블로그 템플릿의 색상을 변경해 보자.

이번에는 블로그의 색상을 변경하는 방법을 알아보겠다.

두 가지 방법을 소개할 건데, 하나는 쉬운 방법이고, 하나는 조금 어렵지만 좀 더 자신이 원하는 대로 커스터마이즈가 가능한 방법이다.

구글 블로그 템플릿 컬러 변경 (쉬운 방법)

구글 블로그 관리 페이지에서 '레이아웃' > '테마 디자이너'로 이동,

혹은 '테마' > '맞춤설정'으로 이동한다.

그러면 위에 캡처한 페이지로 이동하는데, 여기서 '고급'을 클릭하고, 'Main Theme Colors'를 클릭한다.

그리고 여기서 색상을 변경한다.

변경 후에 하단의 저장 버튼도 클릭을 해야 변경한 색상이 적용된다.

구글 블로그 템플릿 컬러 커스터마이즈 하는 방법 (HTML 편집)

이 방법은 역시 HTML과 CSS의 지식이 어느 정도 있어야 하고,

거기에 더해 프로그래밍을 조금이라도 공부해 본 경험이 있어서 변수에 대한 지식이 있어야 한다.

구글 블로그 관리 페이지에서 '테마' > 'HTML 편집'으로 이동한다.

그리고 [ctrl + F] 키를 눌러서 'color'로 검색해 보면 색상과 관련된 코드들이 보인다.

여기서 색상 코드를 직접 수정한다.

<Variable
    name="main.color"
    description="Theme Color"
    type="color"
    default="#84a8c1"
    value="#84a8c1"
/>

위의 코드 중에 한 줄을 보기 쉽게 표시해보면 이렇다.

이 코드에서 우리는 value 속성의 색상만 바꾸면 된다.

default 속성의 색상은 수정하지 말고 그대로 두자

• default 속성은 기본값이다.
  해당 변수가 별도로 지정되지 않았을 때 사용될 기본 색상 값을 나타낸다.
• value 속성은 현재 블로그에 실제로 적용되어 있는 색상 값을 나타낸다.

<Variable
    name="2nd.color"
    description="Second Color"
    type="color"
    default="#f4f6f8"
    value="#A5C9CA"
/>

이 방법을 응용하면 원래는 없었던 변수를 만들어서 사용할 수도 있다.

두 번째 메인 컬러라는 의미로 '2nd.color'라는 이름의 변수를 만들었다.

그래서 그 색상을 사용할 부분에 이렇게 변수명을 넣어주면 된다.

나중에 색상을 바꾸고 싶어질 때 변수의 value 속성만 수정해 주면, 이 변수를 사용하고 있는 모든 곳의 색상이 한 번에 자동으로 바뀌게 된다.

참고로 나는 이 $(2nd.color) 변수를 .queryMessage와 .blog-pager .blog-pager-newer-link,.blog-pager .blog-pager-older-link와 .blog-pager .page-num과 .comments-title > h3와 .sidebar .widget > .widget-title > h3, 총 다섯 곳의 background-color에 넣었다.

혹시라도 나와 똑같은 템플릿을 사용하는 분이 보신다면 참고하시길.

색상을 변경하기 전의 블로그를 캡처한 모습이다.

색상을 변경한 후의 모습이다.

전체적으로 녹색 계열로 바꾸어 보았다. 뭔가 눈 건강에 좋을 것 같은 색이다.

Footer의 색상도 변경했다.

Footer 색상 변경 전의 모습은 캡처하지 못했지만, 어쨌든 바꿨다.

정말 구글 블로그는 HTML과 CSS를 다룰 줄 모르면, 그리고 변수의 개념을 모르면 진입 장벽이 꽤 높을 것 같다.

이 글이 도움이 됐거나 유익했다면 스크롤을 조금만 더 내려서 댓글을 남겨주세요. (비로그인도 가능합니다!)
응원이나 피드백이 담긴 댓글은 제가 계속 블로그를 해나갈 수 있는 원동력이 됩니다. 😊

지인에게 보여주고 싶은 글이었다면 URL을 복사해서 메신저나 소셜 미디어에 공유해 주세요.