글 제목을 자동으로 본문 상단에 넣어주자
2013.07.19 16:05
글 제목을 자동으로 본문 상단에 넣어주자
광고 차단 플러그인을 꺼 주시면 블로그 운영에 도움이 됩니다. ^^

블로그 운영을 하다보니 검색,유입,방문자에 신경을 쓰게 되네요.

 

처음 시작할때 제가 경험하고 얻은 지식을 백업한다는 생각으로 글 작성을 시작했는데 사람 욕심이란게 끝도 없네요.

 

글 제목을 본문 상단에 다시한번 넣어주면 검색이 더 잘된다는 글을 읽어본적도 있고 또 많은 블로그에서 그렇게 하는것을 봤지만 정작 글 작성시 제목을 한번더 입력한다는게 귀찮아서 못하고 있다가 이번에 CSS를 이용해 자동으로 본문 상단에 제목을 입력하는 방법을 소개하는 블로그를 보고 따라 했더니 편하고 좋아서 소개 합니다.

 

이 글에 사용된 소스는 초매님 블로그에서 보고 적용한 내용입니다. 초매님 블로그를 방문해 보시면 좀더 유용한 정보가 많으니 참고 하세요.^^

 

이 글의 원본 출처 : 초매님 블로그 : http://chomae02.tistory.com/286

 

소스 적용해 보기

 

관리자 -> HTML/CSS 편집 -> style.css 하단에 아래 소스를 넣어 주세요.

 

/*본문 상단에 글 제목*/
.my_article_rep_title {
margin: 20px 0;
padding: 10px;
background-color: #6699ff;
font-weight: bold;
font-size: 18px;
color: white;
text-align: center;"
}

 

위 소스의 세부 설정은 아래 설명글을 참고 하셔서 원하시는 여백,색상을 지정할수 있습니다.

 

 margin: 20px 0;

 파란색 박스 외부의 아래, 위 여백을 20px로 설정합니다.

 padding: 10px;

 파란색 박스 내부에서 제목과의 여백을 10px 로 설정합니다.

 background-color: #6699ff;

 파란색 박스로 보이게 끔 배경색을 설정합니다. 

 font-weight: bold;

 제목의 굵기를 굵게 설정합니다.

 font-size: 18px;  제목 크기를 18px 로 설정합니다.
 color: white;

 제목 색상을 흰색으로 설정합니다.

 text-align: center;

 제목을 가운데 정렬로 설정합니다.

 

이제 제목을 자동으로 본문에 넣어주는 소스 적용을 하셔야 합니다.

관리자 -> HTML/CSS 편집 화면에서 Ctrl + F를 눌러 "article_rep_desc"를 검색 하세요.

 

 

검색된 [샵샵_article_rep_desc_샵샵] 위에 아래 소스를 넣어주시면 됩니다.

 

<div class='my_article_rep_title'>[샵샵_article_rep_title_샵샵]</div>

 

저장하시면 새로 작성하시는 게시물, 기존 게시물 모두 본문위에 제목이 입력 됩니다.

 

이 글의 원본 출처 : 초매님 블로그 : http://chomae02.tistory.com/286

 

적용하고나서 글을 읽어 보니 본문 상단에 배경에 본문 제목이 보이니 좀더 가독성도 올라간듯 합니다.

, , ,

  1. 좋은 정보 감사드립니다ㅎㅎ

  2. 댓글감사합니다.^^

  3. Blog Icon

    비밀댓글입니다

  4. 안녕하세요.
    정말 좋은 팁을 알려주셔서 잘 사용하고 있습니다.

    이 글로 감사 인사드립니다.^^

  5. 좋은정보 감사드립니다.

  6. 댓글 감사합니다.

  7. Blog Icon
    김수철

    안녕하세요 문의 합니다

  8. Blog Icon
    이은영

    관리자의 승인을 기다리고 있는 댓글입니다