포스트 내의 제목에 시선을 끄는 효과 넣기

그동안 블로그의 디자인을 여기저기 뜯어고쳤는데 아직도 거슬리는 부분이 많이 남아있다.

다른 곳들을 먼저 고치느라 우선 순위에 밀렸지만, 이전부터 거슬렸던 오늘 수정할 부분은 포스트에서 사용되는 제목, <h2>나 <h3> 태그에 해당하는 부분이다.

h2 제목의 디자인이 너무 밋밋하다

포스트 본문 내에서 제목으로 자주 사용하는 h2 태그의 디자인이다.

글자의 크기가 크고 굵다는 것 말고는 시선을 끄는 요소가 없다.

그리고 h2 제목 내에서 소제목으로 h3 태그를 가끔 쓰기도 하는데, 이 둘의 차이가 거의 없다.

그래서 h3 제목과 차이를 두기 위해 h2 제목에는 약간의 디자인을 넣으려고 한다.

h2 제목이 두 줄이 될 경우 줄 간격이 너무 좁다

아, 그리고 시선을 잡아끄는 효과가 없다는 것 외에 이런 문제점도 있다.

제목이 너무 길어서 두 줄이 될 경우에 이렇게 줄 간격이 너무 좁아지는 문제도 있다.

h3 제목에도 같은 문제가 있다.

이 문제까지 같이 해결해 보자.

구글 블로그 본문의 줄 간격을 가독성 좋게 수정하는 방법

구글 블로그 글의 줄 간격이 보기 불편하다면 이 글을 참고하세요. HTML과 CSS 기본 지식을 활용하여 포스트의 줄 간격을 가독성 좋게 수정하는 방법을 상세히 알려드립니다.

참고로 이전에도 본문의 줄 간격을 수정하는 작업을 했었다.

이때와 똑같은 방법으로 해결할 거다.

h2 제목의 왼쪽에는 색이 들어간 굵은 선을 넣어보자

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

 .post-body h1,.post-body h2{
    font-size:23px;
    line-height:1.5; /* 추가 */
    padding:0.3em 0 0.3em 0.6em; /* 추가 */
    border-left:solid 0.6em $(2nd.color); /* 추가 */
}
 .post-body h3{
    font-size:21px;
    line-height:1.4; /* 추가 */
}

그리고 .post-body h2와 .post-body h3에 해당하는 부분에 위의 코드들을 추가한다.

h2에는 시선을 끌 수 있도록 왼쪽에 색이 들어간 굵은 줄을 넣고, 줄 간격도 수정했다.

h3에는 별다른 디자인을 넣지는 않고 줄 간격만 수정했다.

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

내 블로그를 원하는 색상으로 커스터마이징하고 싶다면 이 글을 보세요. 초보자를 위한 쉬운 컬러 변경부터, HTML 편집을 통해 CSS 변수를 활용하는 고급 방법까지 모두 담았습니다.

색상에 해당하는 코드인 $(2nd.color)는 이전에 작성했던 이 포스트에서 만들었던 변수다.

혹시라도 이 코드가 생소하신 분은 이 포스트도 확인하시길.

수정한 결과다. 훨씬 좋아졌다.

이제는 h2 제목 태그를 사용하면 이렇게 다른 문단으로 넘어간다는 느낌이 확실하게 나게 된다.

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

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