워드프레스 소제목 꾸미기 (H2 제목)

워드프레스를 처음 시작할 때는 잘 모르지만, 점점 소제목이 조금 더 눈에 띄었음 좋겠다고 생각하는 워드프레스 운영자 분들이 있으실 수 있습니다. 그런 분들을 위해 워드프레스 소제목(H2 제목) 꾸미기에 대하여 이야기해 보도록 하겠습니다.



목차




워드프레스 소제목 및 중요성

워드프레스 소제목


워드프레스 제목과 소제목의 차이를 아시나요? 워드프레스 제목은 말 그대로 검색을 했을 때 나오는 타이틀을 의미하는 것이고, 소제목은 그 블로그 글에서 단락별의 제목을 의미합니다.

예를 들어 위의 사진에서 보시면 ‘워드프레스에서 제공하는 링크버튼’ 이라는 것이 소제목이 될 것이고, 일반적으로 H2 제목으로 알려져 있습니다.

제목과 블로그 썸네일은 사람들의 관심을 이끌고 내 블로그로 들어오게 하는 가장 큰 요소들이라면, 들어온 블로그에서 방문자들이 이탈하지 않고 끝까지 글을 잘 읽을 수 있게 도와주는 것이 소제목이며, 이는 블로그 체류 시간에 큰 영향을 끼치므로 아주 중요한 요소라 할 수 있습니다.

워드프레스를 시작하고 소제목을 수정하고 싶었지만, 하는 방법을 몰라 워드프레스의 제목을 선택하고 색으로 강조를 주면서 운영하고 있었습니다. 여기에다 글자가 조금 두꺼워 보여 [서체] – [외모] 에서 기본값을 ‘가늘게’로 지정하여 사용하고 있었습니다

하지만 소제목을 예쁘게 꾸미고 싶다는 마음은 사라지지 않았습니다. 왜냐하면 제가 티스토리 블로그를 운영하면서 소제목을 꾸미면서 좋은 효과를 보았기 때문입니다.



워드프레스 소제목 꾸미는 법 (CSS 코드 추가)

워드프레스에서 소제목을 꾸미는 것은 CSS에 소제목(H2 제목) 관련 코드를 입력하면 됩니다. 인터넷에 워드프레스 소제목 꾸미기로 검색을 하시면 다양한 스타일의 소제목 CSS 코드를 찾아낼 수 있습니다.

여러 사이트를 둘러보시고 마음에 드시는 소제목 스타일을 발견하시면 그 CSS 코드를 복사해 놓으시기 바랍니다.

코드를 붙일 장소는 [워드프레스 관리자 화면] – [외모] – [사용자 정의하기] – [추가 CSS]로 들어오셔서 붙여 넣으시면 됩니다. 기존 다른 코드가 있어도 상관 없으니, 그냥 CSS 화면 제일 아래에 넣으시면 됩니다.

제가 사용한 소제목 CSS는 아래와 같습니다. 어떻게 보이는 소제목인지 아래에서 알려드리도록 하겠습니다.

.entry-content h2 { background: linear-gradient(to bottom right, darkblue, skyblue); font-size: 30px; color: #fff; padding: 10px 20px; border-top-left-radius: 15px; border-bottom-right-radius: 15px; }


워드프레스 소제목 코드 및 각 부분 설명




워드프레스 글에서 소제목 적용하기

추가 CSS에서 소제목 코드를 입력하시고 공개를 하였다면, 기존에 제목 설정하시는 방법으로 하시면 그래도 변경하여 나타납니다. 우선 소제목을 작성하시고, 마우스 커서를 소제목에 갖다 놓으면 편집창이 뜨게 됩니다.

거기서 가장 먼저 있는 문단 아이콘을 클릭하시어 제목을 선택하시면 됩니다. 기본 제목 설정은 H2로 되어 있습니다. 변경하니 훨씬 강조도 되고, 느낌이 있는 블로그가 된 것 같습니다.

워드프레스 CSS 코드 추가를 만든 소제목 서식



<함께 읽으면 좋은 글>

워드프레스 CSS 링크버튼 가운데 정렬 만들기 (중앙정렬) (8mtree.com)

워드프레스 링크버튼 만들기 (CSS 코드추가) (8mtree.com)


오늘은 워드프레스 소제목(H2 제목) 꾸미는 법에 대하여 알려드렸습니다. 완전한 방법을 알려드리지 못한 것 같아 조금 아쉽긴 한 것 같습니다. 어쨌든 이런 소제목 강조를 통하여 블로그에 방문하시는 사람들의 이목을 끌 수 있고 결국 이것이 글을 끝까지 읽게 만들 수 있는 중요한 요소가 될 수 있을 것 같으니 꼭 활용하시기를 추천 드립니다. 글 읽어 주셔서 감사합니다.

답글 남기기

이메일 주소는 공개되지 않습니다. 필수 필드는 *로 표시됩니다