본문 바로가기

키보드사장님/Fastboot Skin

Fastboot 제목(Title)색상과 크기 변경방법

반응형

Fastboot스킨을 적용 후에 글씨 크기와 폰트를변경해봤죠. 제목도 입맞에 맞게 바꾸고 싶은 분들이 계실 거에요. Title은 글을 대표하는 문구이고 내 블로그에 들어와 포스팅을 보는 분들도 눈에 들어오는 타이틀을 골라 보게 될 터이니 타이틀(제목)의 중요성은 아무리 강조해도 지나치지 않을 것입니다. 제목에 예쁜 색깔을 입히고 눈에 잘 들어오는 적당한 크기로 조절한다면 내 글을 읽는 분들이 더 늘어날 수도 있겠지요. 그런 의미에서  Fastboot skin 제목 색상과 크기 변경방법에 대해서 알아보겠습니다. Fastboot기본 스킨의 제목은 아래와 같은 양식이 지정되어 있는데요. 저는 깔끔하고 크기도 나쁘지 않다고 생각하는데 그래도 타이틀인데 약간 밋밋하다고 느끼시거나, 좀 더 눈에 확 띄는 색상이나 크기로 제목을 꾸미고 싶으신 분들이 분명 계실 거에요.

 

 

Fastboot제목 색상과 글자크기를 조정하기 위해서 우선 내블로그 관리자페이지로 들어가주세요. 그리고 HTML/CSS편집 클릭이요. 이제 어디있는지 다 아시죠? 관리자페이지 좌측 쭉 내려오시다보면 있습니다. HTML/CSS편집 클릭하시면 아래와 같은 화면이 보일텐데요. 오른쪽 화면 보시면 HTML이 빨간글씨에 밑줄이 그어져 있어서 고정으로 활성화되어 있을 거에요. 그 옆에 CSS를 클릭하셔서 활성화시켜주셔야 합니다.

 

그리고 오른쪽 화면 영문글씨 많은 곳에 아무곳이나 마우스를 클릭하신 후 컨트롤키와 F키를 동시에 누르셔서 검색을 해주셔야 되는데요.

h3.title이란 단어를 검색하면 아래와 같이 찾아질 거에요. h3.title 밑에 color라고 되어 있는 곳의 HTML색상코드를 본인이 원하는 색상으로 변경해주시면 됩니다. 이 색상이 바로 제목 글자 색상이 되는거구요. 아래처럼 h3.title 밑에 color라고 되어있는 두 군데 모두를 변경해주셔야 해요. 그리고 밑으로 좀 더 내려가보시면 background : 뒤에 있는 색상은 제목의 배경색이 되는 거에요. 제목의 배경색도 변경하고 싶으시면 마찬가지로 이 HTML색상코드를 변경시켜주시면 됩니다. HTML색상코드가 뭐냐구요? HTML색상표라고 따로 있는데요. HTML코드만 바꿔줌에 따라 색깔을 변경시킬 수 있답니다. HTML색상표의 코드들은 각기 고유한 색상을 가지고 있구요. 혹시 몰라서 필요하신 분들 계실까봐 HTML색상표 첨부하니 필요하신 분들은 받아 가세요.

HTML코드 색상조견표.xlsx

 

HTML코드 색상표에서 맘에 드는 색상코드를 골라 바꿔넣으면 아래처럼 됩니다. 직접 HTML색상코드들을 입력하고 바꿔가며 맘에 드는 색상을 골라 보시면 될 겁니다. 이렇게 다른 영문을 입력했는데 제목색상이 바뀐다는게 참 신기하지요.

여기까지 Fastboot스킨 제목 색상과 배경색상 변경하는 방법을 알아봤는데요. 타이틀 글자 크기변경하는 방법도 알아봐야겠죠.

방법은 동일합니다. 제목 색상을 변경한 상태에서 나가지 마시고 그 화면에서 제목 글자 크기를 조정하실 수 있어요.

만약 좀 전 화면에서 나가셨다면 다시 HTML/CSS편집 클릭하시고 우측상단의 CSS를 클릭해 활성하시켜줍니다.

그리고 컨트롤F키를 눌러 h3.title을 다시 검색해주세요. 그러면 좀 전에 제목 색상 수정했던 화면으로 다시 찾아다주었죠.

여기에서 color밑에 밑에 줄 보시면 font-size가 나오잖아요. fastboot 디폴트값은 20px라고 고정되어 있을거에요.

제목글자크기가 너무 크다 싶으면 이 숫자를 줄여주시면 되고, 너무 작아서 제목크기를 키우려고 한다면 이 숫자를 더 큰 숫자로 변경하여 주시면 됩니다.

 

저는 제목 글자 크기를 늘려주고 싶어서 아래처럼 40px로 바꾸어 봤습니다.

이 조정된 숫자와 실제로 보는 느낌은 조금 다를 거에요.

 

실제 크기가 어느 정도인지 어떤 느낌인지는 직접 블로그 글을 보시면서 타이틀 크기를 확인하여주시면 됩니다. 그러면서 숫자를 조정하다보면 원하는 크기의 제목이 될 수 있겠네요. 지금까지 Fastboot제목의 색상과 배경색상, 글자 크기 변경방법에 대해 알아봤습니다. 많은 도움이 되셨나요^^ 블로그내 다른 정보들도 많이 있으니 쭈욱 둘러봐주세요~

2017/10/11 - [키보드사장님/Fastboot Skin] - Fastboot본문 글자체 폰트(font) 변경하기

반응형