포스트 내의 제목에 눈에 띄는 효과 넣기

블로그에 포스팅을 할 때, 긴 글의 경우에는 글 안에서 가독성을 위해서 제목과 단락으로 구분을 짓습니다.
그런데 제목으로 지정을 해도 눈으로 보이는 효과는 글씨가 커지는 것 뿐입니다.
이번에는 스킨을 편집해서 제목만 지정을 해주면 저절로 눈에 띄는 효과가 입혀지게 해보겠습니다.

참고로 저의 경우에는 MAGPRO 스킨을 쓰고 있습니다.
같은 스킨을 쓰고 계시다면 저를 보고 그대로 따라하시면 되는데, 아닌 분이라면 CSS를 조금 만져서 응용을 할 줄 아셔야 합니다.

지난 포스트

구글 블로그 MAGPRO 스킨의 글씨 크기 수정

구글 블로그의 기본 글자 크기를 에디터가 아닌 CSS 코드 수정으로 바꿔보겠습니다.

아무 효과 없는 디폴트 제목

글씨 크기만 커져있는 밋밋한 제목입니다.
제목이라는 느낌을 더욱 살리기 위해서 이제부터 효과를 넣어보겠습니다.

HTML 편집으로 들어가서 이전에 단락 구분을 위해서 추가했던 코드 아래에 이 코드를 추가하고 저장합니다.

블로그 포스트 본문 안의 h2 태그 스타일

#post-body > h2 {
    padding:0.4em 1em;
    margin:1em 0 1em 0;
    font-weight:bolder;
    line-height:1.2;
    border-left:0.8em solid var(--menu-bg);
    border-bottom:2px solid var(--menu-bg);
}
        

훨씬 더 제목 같아 보이고, 단락 구분에도 효과를 주는 제목으로 변했습니다.

참고로 제가 넣은 코드는 에디터에서 '제목'으로 지정했을 경우에만 효과가 나타납니다.
'주 제목', '부제목', '소제목'은 아까의 코드에서 h2라고 써있는 부분을 h1, h3, h4로 바꾸시면 됩니다.

다음 포스트

구글 블로그 스킨 색상 변경하는 방법

구글 블로그의 스킨 생각을 변경하는 방법을 알아보겠습니다. 저와 똑같은 스킨인 MAGPRO 스킨을 사용하는 분이라면 저와 똑같은 방법으로 변경을 하면 되지만, 다른 스킨의 경우라면 HTML과 CSS를 어느 정도 다룰 줄 안다면 응용해서 변경할 수 있을 거라고 생각합니다.