FastBoot 스킨 머리말(h1-h4) 인용문(blockquote) 모양 바꾸기

Posted by 넉넉한

2018. 3. 4. 08:19 웹페이지

※FastBoot 스킨 머리말(h1-h4) 인용문(blockquote) 모양 바꾸기

많은 티스토리 블로거들이 FastBoot 스킨을 사용하고 있는 것을 보게됩니다. 저도 FastBoot 1.6.2 스킨을 사용하고 있습니다. 티스토리 블로그를 사용하는 이유는 애드센스 광고를 게시할 수있고 또한 스킨 기본 설정 변경이 어느 정도까지는 자유롭다는 것이지요. 글 작성시 머리말 인용문 등을 사용해 가독성을 높히고 내용을 강조합니다. 머리말, 인용문의 모양(디자인)은 스킨별로 또는 같은 스킨을 사용하는 블로그라도 다른 모양으로 표시되는데요. 대부분의 경우 테두리 모양과 배경 모양입니다. 머리말과 인용문의 모양을 변경해보겠습니다.

★머리말 스타일 변경

★인용구 스타일 변경

1. 머리말 스타일 변경

▲변경 전 모양

티스토리 블로그 머리말 3

▶위는 FastBoot 스킨 처음 적용시 머리말 3(H3) 모양입니다. 블로그관리에서 좌측메뉴=>꾸미기=>스킨편집=>우측상단=>html 편집=>css 선택하고 control+F로 'artcle h1'을 찾습니다.
▶css파일의 머리말(h1-h6) 스타일은 아래와 같습니다.(아래 내용과 다르면 control+G로 계속 검색)

제목 H1-4 CSS style

.article h1, .article h2 , .article h3, .article h4, .article h5, .article h6 { 
  font-size: 24px; 
  border-bottom: 2px solid #ccc; 
  border-left: 10px solid #55555B;
  text-height:200%;
  padding: 3px 5px; 
  margin: 5px 0;
  letter-spacing: 1px;
  word-spacing: 3px;
}

▶위의 스타일 내용에서 노란색으로 표시된 부분을 아래와 같이 변경해 보겠습니다.==>머리말(h1-h6) 모두
border-bottom: 1px solid #1fafda;
border-left:7px solid #1fafda;

▲변경 후

티스토리 블로그 머리말 3

좌측 막대 두께와 밑줄 두께를 줄이고 색(solid 뒷부분 핵사값)을 바꾼 모양입니다.

▶border-bottom과 boder-left 속성을 삭제하고 background-color: #eeeeee;를 추가해 보겠습니다.

▲변경 후

티스토리 블로그 머리말 3

테두리는 없애고 머리말 요소에 배경색이 적용된 모양입니다.

2. 인용구 스타일 변경

▲변경 전 모양

티스토리 블로그 인용문

▶위는 FastBoot 스킨 처음 적용시 모양입니다. css 파일에서 control+F를 눌러 'article blockquote'를 찾습니다.

제목 blockquote CSS style

.article blockquote {
  font: 14px/20px italic Times, serif;
  background-color: #EEEEEE;
  background-image: url(images/iconBlockquote.gif);
  background-position: top 10px left 10px;
  background-repeat: no-repeat;
  border-left: 10px solid #F5A431;
  padding: 23px;
}

▶스타일 위의 font 속성은 14px/20px로 돼있는데 14px는 글자크기이고 20px는 line-height입니다. 원하는 사이즈로 변경하시고
▶background-image는 따옴표입니다. 없애고 싶으면 이부분을 삭제하던가 주석처리(앞에)합니다.
▶배경색이 설정돼 있습니다. background-color: #EEEEEE; 원하는 색(뒷부분 핵사값)으로 변경할 수있습니다.
▶border-left: 10px solid #F5A431;에서 두깨만 7px로 변경했습니다.

▲변경 후