티스토리 블로그의 가독성을 높이는 방법, 폰트 변경하기 (스킨,본문)

 

 

 

 

 

 

 

안녕하세요 ?

포도알 입니다.

 

티스토리 블로그를 개설하고 몇가지 정도 글을 포스팅 하다보니 가독성을 높이고 더 깔끔한 블로그를 만들어야 겠다는 생각을 하게 되었습니다. 아래와 같이 블로그의 가독성을 높이는 방법과, 티스토리 블로그의 폰트변경 방법을 안내합니다.

 

 

블로그의 가독성을 높이기 위한 몇 가지 방법

1. 글꼴과 텍스트 크기: 읽기 쉬운 글꼴을 선택하고, 충분히 크고 명확한 텍스트 크기를 사용하세요. 너무 작거나 스타일리시한 글꼴은 가독성을 저하시킬 수 있습니다.
2. 문단 구조: 긴 문단을 피하고, 각 문단은 한 가지 주제에 집중하도록 구성하세요. 문단 간의 간격을 충분히 두어 시각적인 휴식을 제공합니다.
3. 간단하고 명확한 문장: 간결하고 명확한 문장을 사용하세요. 복잡하거나 어려운 단어나 문장 구조는 독자의 이해를 방해할 수 있습니다.
4. 목록과 번호: 글이나 정보를 목록이나 번호로 구분하여 정리하세요. 이는 정보를 시각적으로 구분하고 이해하기 쉽게 만듭니다.
5. 그림과 이미지 사용: 필요한 경우 이미지나 그림을 삽입하여 글의 내용을 보충하고 시각적인 흥미를 끌 수 있습니다. 이미지는 글의 주제와 관련이 있어야 하며, 과도하게 사용하지 않아야 합니다.
6. 단락 제목: 글의 구조를 명확히 하기 위해 단락 제목을 사용하세요. 이는 독자가 글의 주요 내용을 파악하는 데 도움을 줍니다.
7. 배경과 테마: 밝고 깔끔한 배경과 사용자 친화적인 테마를 선택하세요. 너무 복잡하거나 어두운 테마는 글의 가독성을 저하시킬 수 있습니다.
8. 링크 사용: 글 내에서 필요한 링크를 제공하여 추가 정보를 제공하거나 관련 자료에 접근할 수 있도록 도와주세요. 링크는 짧고 명확해야 하며, 적절하게 사용하세요.
9. 반복과 강조: 중요한 정보나 주제를 반복하고 강조하여 독자가 기억하기 쉽게 만드세요. 이는 글의 일관성과 이해도를 높이는 데 도움을 줍니다.

티스토리 블로그에서 폰트를 변경하는 방법

 

1. 테마 설정에서 폰트 변경: 티스토리 블로그의 대부분 테마는 폰트 설정을 제공합니다. 먼저 티스토리 관리자 페이지에 로그인한 후, "꾸미기 > 테마 설정"으로 들어가세요. 여기서 폰트 설정이나 글꼴 설정 메뉴를 찾아 원하는 폰트로 변경할 수 있습니다.
2. 폰트 추가: 원하는 폰트가 기본 제공되지 않는 경우, Google Fonts 등의 외부 폰트 라이브러리를 티스토리 블로그에 추가하여 사용할 수도 있습니다. 이 경우 해당 폰트의 CSS 링크를 티스토리의 CSS 편집기에 추가하면 됩니다.
3. 글씨체 스타일 적용: 특정 부분에만 글씨체를 변경하고 싶은 경우, 해당 글을 작성할 때 직접 HTML 태그나 CSS 스타일을 적용할 수 있습니다.

 

 

위와같이 여러가지 방법중 두번째의 폰트추가 방법을 아래에 안내드리도록 하겠습니다.

 

 

웹폰트 적용하기

1. 폰트고르기

우선 저는 눈누 라는 사이트에서 라이선스 허용이 되는 폰트 '고운 밤' 폰트를 선택했습니다.

 

 

 

 

 

2. 웹폰트 서식 복사

오른쪽 상단 부분에 있는 이 수식들 모두 복사합니다.

 

 

 

 

3. CSS 화면 불러오기

블로그로 돌아가서 관리-스킨편집-오른쪽 상단 html편집 으로 들어갑니다.

 

 

 

 

 

 

4.웹폰트의 정보를 입력하기

팝업창이 나오면 확인을 눌러 주시고 CSS 클릭합니다.

1번 부분 밑에 복사해온 폰트수식을 붙여넣기 해줍니다. 

 

조금 아래로 가면 font-family 부분에  'cafe24oneprettynight' 폰트 이름을 입력합니다. (따옴표 포함)

참고로  control + F 키를 누르고 font-family를 검색하시면 바로 찾아줍니다.

 

여기까지 완료하시고 하단에 적용을 눌러주시면 스킨에 있는 폰트를 바꿀수 있게됩니다. 

 

 

 

 

 

 

 

본문내용 웹폰트로 변경하기

1. CSS창에서 본문에 해당하는 부분 찾기

상위의 CSS 창에서 control + F 검색을 이용해 article-view 를 찾아줍니다.

검색이 안되면 스크롤을 하단까지 내리시면 보입니다. 

 

줄번호가 3646 번인걸 보면 아래부분인걸 확인 하실 수 있습니다

(참고로 적용되어있는 스킨마다 줄번호가 상이합니다. 저는 book club스킨을 사용하고 있어요.)

 

2.적용하기

article-view 의 font-family에 웹폰트 이름  'cafe24oneprettynight' 을 입력해 주시고 적용을 눌러주시면 완성됩니다.

참고로 인용문의 폰트도 변경은

'article-view blockquote' 이곳에서 같은 방식으로 변경하면 된답니다.