FastBoot 스킨 글 제목(title) 요소 스타일 조절하기

반응형

FastBoot 스킨 글 제목(title) 요소 스타일 조절하기

 

FastBoot 반응형 스킨은 티스토리 블로거들이 애용하는 스킨 중 하나입니다. 많은 분들이 스킨 스타일에 수정을 가해 변화를 주고 있습니다. 본문 제목 부분 스타일 변경에 대해서도 많은 글이 포스팅돼 있습니다. 본문 제목 스타일을 몇 가지 변경해 보겠습니다.

 

FastBoot 스칸 제목 스타일 변경

 

 

해당 요소 HTML 태그 변경

 

티스토리 관리 좌측 메뉴에서 다음 항목을 차례로 선택합니다.

  • 꾸미기 하단 스킨편집을 선택
  • 열린 스킨편집 창에서 우측 상단 html 편집 선택
  • 우측 상단의 메뉴 항목 중 html 편집 선택

본 FastBoot 스킨 html 내용이 나옵니다. control+F를 눌러 article을 검색하면 아래와 같은 내용이 나옵니다. article 태그 밑의 <h3 class="title"> 태그가 글 제목 요소입니다. title 클래스를 갖는 h3 태그가 몇개 있습니다. 제목 글에 한해 변경하기 위해 클래스명을 "article-title"로 변경하겠습니다.

<!--F 포스트의 본문 시작 -->
<s_article_rep>
<article>
<h3 class="title">
<i class="fa fa-bars"></i>
<a href="/58"> FastBoot 스킨 글 제목(title) 요소 스타일 조절하기</a>
</h3>

 

<i class="fa fa-bars"><i>가 제목 글 앞의 아이콘인데요, 폰트 어썸 중에 있는 폰트 아이콘입니다. 심플하게 없애실 수도 있고 폰트 아이콘을 바꾸시려면 약간의 작업이 필요합니다.

 

 

폰트 아이콘 변경

  • 본 FastBoot 스킨의 폰트 어썸 적용 버전은 4.0.3입니다.
  • 폰트 어썸 홈페이지에 가면 현 버전은 5.2.0이며 버전 5.0 이상부터 폰트 아이콘 클래스 Prefix가 변경됐습니다. 현 버전을 본 스킨에 적용하기엔 무리가 있습니다.
  • CDN 링크를 4.0.7 버전 CDN <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">으로 대체하고
  • 폰트 아이콘은 w3cscool 폰트 아이콘페이지에서 가져오시면 됩니다.

제목 글 색상 css 스타일 변경

 

css 파일에서 h3.title을 control+F로 검색하면 아래 내용이 나옵니다.

h3.title a {
color: #fff;          //#1 제목 글 색상
}
h3.title {
color: #fff;          //#2 폰트 아이콘 색상
line-height:32px;
font-size: 20px;
font-weight: bold;
border-radius:3px;
padding-top: 3px;
padding-bottom: 1.5px;
padding-left: 10px;
margin-bottom: 2px;
margin-top: 5px;
background: #aab2bd;
}

 

위의 내용에서

  • 본 스타일은 그대로 두고 내용을 복사해 css 파일 끝에 붙혀놓고 두 군데 h3.title은 h3.article-title로 변경하겠습니다. 
  • #1은 제목글 색상이며 #fff는 흰색입니다.
  • #2는 제목 글 앞의 폰트 아이콘의 색상이며 #aab2bd로 돼있군요.

 

 

색상 적용

  • 티스토리 에디터에서 직접 적용할 수 있습니다.
  • 그림 소프트웨어에서도 색상 헥사 코드를 얻을 수 있습니다.
  • 옆에 표시된 페이지에서도 편리하게 색상 코드를 얻을 수 있습니다. [html color codes]

제목 글 태그에 관해

html 태그에는 h1. h2, h3, h4, h5, h6의 6개 태그가 있으며 이 태그들을 활용해 글 내용을 구조적으로 알아 볼 수 있으며 구글 seo(검색 최적화) 등 에서는 중요하게 간주하는 것으로 알려져 있습니다. 본 스킨에는 h1, h2 태그가 없고 font-size도 스킨 요소별로 다르게 설정돼 있습니다. 연구해 볼 문제라 생각합니다.

 



반응형
저작자표시
Trackback: Comment: 1

티스토리툴바