본문 바로가기
블로그 관련 정보/블로그 꾸미기

이미지를 이용한 본문 글 안에 소제목 꾸미기

by 가온누리™ 2012.10.10
이미지를 이용한 본문 글 안에 소제목 꾸미기
광고 차단 플러그인을 꺼 주시면 블로그 운영에 도움이 됩니다. ^^

블로그에 글을 읽다 보면 예쁘게 강조된 주제 글 제목이 있습니다.

 

그냥 폰트 키우고 찐하게 보이게 하는것 보다 이미지를 이용하든 html을 이용한 꾸미기를 하든 읽는 입장에서 눈에 확 들어오게 만든게 소제목 입니다.

 

글 중간 중간 소제목을 이용해 정리해 주면 읽는 입장에선 글 전체 가독성이 올라가고 눈이 조금은 편안함을 느낄수 있을듯 합니다.

 

이번에 블로그 스킨을 수정하면서 저 역시 소제목 꾸미기를 적용했습니다.

 

본문 글 안에 소제목 이란

 

  h1.rar첨부 파일을 다운하셔서 압축을 풀어주세요.

파일안에 h1.gif,h2.gif,style.txt 가 들어 있습니다. h1은 첫번째 소제목에 사용된 이미지,h2는 두번째 소제목에 사용된 이미지 입니다.

 

블로그 관리로 들어가셔서 "HTML/CSS 편집"을 선택합니다.

html소스 화면이 나오면 하단 "style.css"창 하단에 style.txt 내용을 넣고 저장해 주세요.

그리고 화면 스크롤을 위로 해서 "파일업로드"를 선택합니다.

"추가"를 눌러서 h1.gif,h2.gif 파일을 업로드 해주시면 준비는 끝났습니다.

첨부된 h1.gif,h2.gif 이미지 가로 사이즈가 제 블로그에 맞게 682로 적용되 있습니다. 설치하는 블로그 본문 사이즈에 맞게 직접 수정하셔야 합니다.

 

style.css에 들어가는 소스 간단히 알아보기

 

style.txt 를 메모장이나 기타 텍스트 에디터로 열어보면

/*배경이 포함된 <h>태그 소 제목 만들기*/
.article h1 {
font-size: 15pt;
font-family:"맑은 고딕";
color:#000000;
letter-spacing:0px;
padding: 5px 0 10px 45px;
margin: 0 0 0 3px;
background:url(./images/h1.gif) no-repeat;
}
.article h2 {
font-size: 15pt;
font-family:"맑은 고딕";
color:#000000;
padding: 5px 0 10px 45px;
margin: 0 0 0 3px;
background:url(./images/h2.gif) no-repeat;
}

--------------------------------------------------------------------------------------------


.article h1 {
font-size: 15pt;  ← 글씨크기
font-family:"맑은 고딕";  ←   글씨체
color:#000000;  ← 글씨색
letter-spacing:-3px;  ← 글자간격
padding: 5px 0 10px 45px; ← <h>태그속 (글씨)여백 (위쪽 오른쪽 하단 왼쪽순서)
margin-left: 0 0 0 3px; ← <h>태그전체 여백 (위쪽 오른쪽 하단 왼쪽순서)
background:url(./images/h1.gif) no-repeat; ← 배경 이미지
}

소스를 열어보면 위 화면처럼 나옵니다. 점선 윗 부분을 style.css에 넣어주시면 됩니다.

점선 아래는 간단한 설명 글 입니다.

 

본문 글 작성시 소제목 이용해 보기

 

소스 적용이 잘 됬는지 확인해야 겠지요. <h>제목</h>를 이용해 작성해 보겠습니다.

 

 

글 인용,참고 사이트 ( 티비의 세상구경 )

 

댓글4