티스토리 블로그는 다른 블로그보다 블로거가 원하는 디자인으로 색상을 바꾸거나 아이콘을 넣거나 여러 플러그인 기능을 삽입해서 자유롭게 꾸밀 수 있다는 것이 큰 장점입니다. 이번 시간에는 블로그 글 제목에 아이콘을 넣고 변경하는 방법과 글 제목 배경 색상을 바꾸는 방법에 대해서 알아보도록 하겠습니다. FastBoot 스킨을 사용하고 계신 분들이라면 글 제목 왼쪽에 상병 마크, 석 삼과 같은 三 이러한 아이콘으로 되어 있을 것입니다. 그리고 기본 색상이 회색으로 되어 있을 것입니다. 전체적으로 흰색, 회색으로 디자인 되어 있는 스킨이기 때문입니다. 

회색은 안정적이고 침착한 분위기를 내는 색이지만, 어떻게 보면 조금은 칙칙하고 우울해보이는 색일 수도 있습니다. 그런 의미에서 글 제목만큼은 회색이 아닌 조금 더 밝은 색상을 띠는 색으로 바꾸어 보도록 하겠습니다.

블로그 글 제목의 최종 모습은 이렇게 연필 모양의 아이콘과 밝은 하늘색 배경색이 되도록 해봅시다. 

 블로그 글 제목 아이콘 변경 방법

먼저, 블로그 화면에서 q 버튼을 눌러 관리 화면으로 들어갑니다.

관리 화면 왼쪽에 꾸미기가 있습니다.

그 아래에 있는 HTML/CSS 편집을 클릭합니다.

오른쪽 화면 아무 곳이나 클릭한 후 

Ctrl키와 F키를 동시에 눌러 위에 검색창이 뜨도록 합니다. 

검색창에 포스트의 본문 시작을 입력하고 엔터를 쳐줍니다. 

위 화면처럼 포스트의 본문 시작이 보이면 그 아래 줄에 있는

  <i class="fa fa- > 부분이 보이실 겁니다. 

위 사진에서 옅은 분홍색으로 칠해준 곳에 pencil이라고 입력을 하고 

화면 오른쪽 위에 있는 저장 버튼을 누릅니다.

그리고 블로그로 와서 보면 글 제목 아이콘이 

상병 마크에서 연필 모양으로 바뀌어져 있는 것을 확인하실 수 있습니다.

만약 연필모양이 마음에 들지 않는다. 

좀더 개성 있는 모양으로 아이콘을 바꾸고 싶다. 

라고 생각하시는 분들이라면, Font Awesome이라는 사이트에서 

마음에 드는 아이콘을 골라 바꾸실 수 있습니다.

아래 글을 통해 더 다양한 아이콘을 이용해서 적용해봅시다.

※ 관련글 : FontAwesome 아이콘으로 티스토리 블로그 꾸미는 방법

 블로그 글 제목 바탕색 바꾸는 방법

이번에는 글 제목 바탕색을 바꿔보도록 하겠습니다. 

위와 동일한 방법으로 HTML/CSS 화면에 진입합니다.

아까는 HTML에서 작업을 했지만, 

이번에는 상단의 CSS를 눌러 CSS에서 작업을 해주셔야 합니다. 

화면 오른쪽 아무 곳이나 한 번 클릭해주고,

 Ctrl키와 F키를 눌러 검색창을 띄워 

h3.title이라고 써주고 엔터를 누릅니다. 

h3.title이 검색이 되면 아래 부분에 

background : #~~~~~~; 이라고 되어 있는 부분이 보일 것입니다. 

여기에서 샵(#) 뒤에 본인이 원하는 색상코드를 넣어 배경색을 지정해준 후 

오른쪽 위 저장 버튼을 눌러 저장해주시면 되겠습니다.

색상코드 관련해서는 관련글을 참고해주세요.

※ 관련글 : HTML 색상표, 색상코드표, 컬러코드표 간단히 이용하기

도움이 되셨다면, 로그인 없이 가능한

아래 하트♥ 공감버튼 을 꾸~욱 눌러주세요!

여러 티스토리 블로그, 사이트를 방문해보면 폴더 모양, 집 모양, 연필 모양, 카드 모양 등등 여러 모양의 아이콘을 볼 수가 있습니다. 블로그를 운영하기 전까지는 아, 그냥 그렇구나 하고 지나갔던 부분이지만, 디자인을 바꾸고 연구하다보니 저 아이콘 어떻게 한 거지? 하고 의문이 들었습니다. ㅁ을 누르고 한자키를 눌러서 나오는 다양한 특수기호나 한컴오피스 한글에서 입력할 수 있는 특수기호들을 이용한 건가?라고도 생각해보았습니다. 하지만, 다른 사이트에서 사용하고 있는 아이콘과 똑같은 아이콘을 찾을 수 없었습니다.

이곳 저곳 알아보았지만, 답은 가까운 곳에 있었습니다. 바로, FastBoot 스킨에 이미 적용되어 있던 아이콘에서 힌트를 얻어 찾아냈습니다. 그리고 블로그의 모든 곳에 원하는 아이콘을 적재적소에 배치를 하였습니다.

제 티스토리 블로그 상단에 보이는 홈 아이콘과 

폴더 아이콘, 글 제목에 포함된 연필 아이콘의 모습입니다.

오른쪽 사이드바에도 여러 아이콘이 있습니다. 

돋보기 아이콘, 지구본 아이콘, 카드 모양 아이콘 등등 

정말 다양한 아이콘이 있다는 것을 확인할 수 있습니다.

지금부터 이 아이콘을 가져올 수 있는 곳을 알려드리겠습니다.

바로, Font Awesome이라는 사이트입니다.

아래 링크를 눌러 Font Awesome 사이트로 들어갑시다.

http://fontawesome.io/icons/

 Font Awesome 사이트에서 아이콘 검색하는 방법

FontAwesome 사이트의 Icons라는 탭 화면입니다.

여기서 스크롤을 조금만 더 내려봅시다.

아래에 수많은 아이콘과 아이콘의 이름이 나열되어 있습니다.

정말 너무 많은 아이콘이 있기 때문에

내가 원하는 아이콘을 언제쯤이면 찾을 수 있을지 걱정부터 앞섭니다. 

노가다를 해서 눈이 빨개질 정도로 찾아보면 

언젠가는 찾을 수야 있겠지만, 매우 비효율적입니다.

그런 문제를 해결하기 위해 사이트에서는 검색 기능을 제공하고 있습니다.

Search icons라고 되어 있는 곳을 한 번 클릭하고, 

영어로 원하는 아이콘의 이름을 적고 엔터를 누르면 쉽게 찾을 수 있습니다.

저는 연필 모양의 아이콘을 찾아보기 위해

Pencil을 입력해보았습니다.

Search for 'pencil'이라는 표시가 뜨면서 

pencil, pencil-square-o, pencil-square이라는 세 가지 검색 결과가 나왔습니다. 

이 중에서 가장 눈에 잘 들어오는 pencil을 눌러봅시다.

그러면 위와 같이 내가 원하는 아이콘의 코드가 나옵니다.

티스토리 블로그나 본인이 운영하는 사이트에 가서

위와 같이 코드를 넣어 수정해봅시다.

만약 이미 fa fa- 와 같은 형식의 코드가 있다면

뒤에 있는 부분, 화면에서는 옅은 분홍색으로 표시된 부분만

바꿔주시면 원하는 아이콘으로 변경하실 수 있습니다.

도움이 되셨다면, 로그인 없이 가능한

아래 하트♥ 공감버튼 을 꾸~욱 눌러주세요!