글 제목을 자동으로 본문 상단에 넣어주자
블로그 운영을 하다보니 검색,유입,방문자에 신경을 쓰게 되네요.
처음 시작할때 제가 경험하고 얻은 지식을 백업한다는 생각으로 글 작성을 시작했는데 사람 욕심이란게 끝도 없네요.
글 제목을 본문 상단에 다시한번 넣어주면 검색이 더 잘된다는 글을 읽어본적도 있고 또 많은 블로그에서 그렇게 하는것을 봤지만 정작 글 작성시 제목을 한번더 입력한다는게 귀찮아서 못하고 있다가 이번에 CSS를 이용해 자동으로 본문 상단에 제목을 입력하는 방법을 소개하는 블로그를 보고 따라 했더니 편하고 좋아서 소개 합니다.
이 글에 사용된 소스는 초매님 블로그에서 보고 적용한 내용입니다. 초매님 블로그를 방문해 보시면 좀더 유용한 정보가 많으니 참고 하세요.^^
소스 적용해 보기
관리자 -> 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_샵샵] 위에 아래 소스를 넣어주시면 됩니다.
저장하시면 새로 작성하시는 게시물, 기존 게시물 모두 본문위에 제목이 입력 됩니다.
적용하고나서 글을 읽어 보니 본문 상단에 배경에 본문 제목이 보이니 좀더 가독성도 올라간듯 합니다.
'블로그 관련 정보 > 블로그 꾸미기' 카테고리의 다른 글
| 블로그 스킨 수정시 style.css에 지정된 폰트 크기가 알쏭달쏭 할때... (4) | 2013.09.03 |
|---|---|
| iNove 티스토리 스킨 Ver 2.2 사이드바 메뉴 폭 조정하기 (12) | 2013.08.31 |
| 노력하고, 개선되는 티스토리 - 모바일웹 스킨 ON/OFF 기능 (0) | 2013.08.13 |
| 글 제목을 자동으로 본문 상단에 넣어주자 (8) | 2013.07.19 |
| [마감] 초대장 12장 배포 합니다. (26) | 2013.07.18 |
| Google AdSense(모바일용) 플러그인 머리쓴듯... (1) | 2013.07.18 |
| 티스토리 모바일 광고 플러그인 지원!! (2) | 2013.07.18 |
| 구글 번역기 달아서 외국 방문객 배려하기 (4) | 2013.07.16 |
좋은 정보 감사드립니다ㅎㅎ
댓글감사합니다.^^
비밀댓글입니다
안녕하세요.
정말 좋은 팁을 알려주셔서 잘 사용하고 있습니다.
이 글로 감사 인사드립니다.^^
좋은정보 감사드립니다.
댓글 감사합니다.
안녕하세요 문의 합니다
관리자의 승인을 기다리고 있는 댓글입니다