수익형 블로그 세팅2 : 폰트 및 글씨 크기변경, 본문 넓이 변경

들어가기 전에

블로그 스킨을 변경하기 전에 우선 현재의 스킨을 보관함에 저장해두자.(원래로 되돌리고 싶을 경우를 위해)

블로그관리 > 꾸미기/스킨변경 > 사용중인 스킨 > 보관 > 스킨명 지정 후 확인.(아래영상 참고)

 

 

 

이제 폰트를 변경해보자

본문넓이와 폰트 등을 변경하려면 일단 블로그 관리자에서 스킨편집에 들어가자.

스킨을 꾸미는 것의 대부분은 HTML이 아닌 CSS에 있다.

블로그관리 > 꾸미기/스킨편집 > HTML편집 > CSS

 

 

 

추가로 변경하고 싶은 부분 확인을 위해서 블로그 글 부분에 우클릭>검사버튼을 클릭한다.

 

 

 

그러면 오른쪽에 관련 정보가 컴퓨터 언어로 뜬다.(아래사진 가장 오른쪽 칸을 의미함)

글쓰는 화면에 대한 내용변경을 보고싶다면 왼쪽 상단에 선택사항을 위 사진처럼 글로 지정하면 된다.

처음 미지정 시에는 홈으로 되어있다.

같은 방식으로 내가 따라하고 싶은 블로그가 있다면 해당 화면에서 우클릭 > 검사를 눌러 폰트 사이즈나 정보를 확인할 수 있다.

 

 

 

 

오른쪽 화면정보 칸 중 왼쪽 상단에 마우스 모양의 셀렉트아이콘을 누르고 원하는 부분을 클릭하면 해당 부분 정보에 대해 표시가 된다. 우리가 알고싶은 폰트 정보는 styles 칸에 있다.

위 style의 내용으로 보면 내가 바꾸고자하는 부분은 article-view p(본문)이며, 이 부분 현재 폰트사이즈는 15px, 줄높이는 26px라는 내용 등을 알수있다.

 

 

 

 

이제 CSS에서 article-view p를 ctrl + f로 검색하여 수정할 부분을 찾고 원하는 크기와 색으로 조금씩 수정해보면서 결정하자.

왼쪽은 변경 전, 오른쪽은 변경 후

왼쪽은 변경 전, 오른쪽은 변경 후 정보이고 본문 글씨 크기, 색 이라고 설명을 달아 두었다.

색 변경은 color 부분이 색깔네모상자를 클릭하여 변경하면 된다.

 

본문 글씨체는 body영역의 font-family 부분을 수정하면 된다.

아래 그림에서 글씨체는 Montserrat 이다.

 

 

본문 넓이의 경우 area-main을 검색하여 노란 부분을 수정해준다.

원하는 스타일로 결정되면 CSS칸 오른쪽 상단의 적용버튼을 눌러주고 마무리하면 된다.

참고로 정보화면을 늘리고 줄이면 style칸이 아래로 가게 할 수 있다.