[티스토리 블로그 꾸미기] 예쁜 글씨로 바꿔보아요
안녕하세요 솜잉이예요
몇일 사이에 날씨가 많이 따땃해졌네요
추위를 많이 타서 날이 따땃해지니 너무 좋네요
봄맞이 기념으로? 티스토리도 분위기를 바꾸고 싶어서 카테고리 정리도하고 폰트도 변경을 해보았습니다
오늘은 블로그 전체에 적용하는 방법과 원하는 곳에만 적용하는 방법 두가지를 알려드릴게요
1. 폰트 전체 적용
우선 마음에 드는 글씨를 선택을 해야겠죠?
저는 무료로 사용가능한 한글폰트를 소개해주는 사이트 눈누를 이용했습니다
눈누
상업용 무료한글폰트 사이트
noonnu.cc
사이트에 들어가셔서 폰트이름을 아신다면 오른쪽 상단에서 검색을 하셔도 되구
맘에 드는 폰트를 선택하셔도 돼요!
이미지에 표시해둔 곳에 허용 범위 > 임베딩 으로 검색을 하여 골라주세요
제가 선택한 폰트는 엘리스디지털배움체입니다
선택을 하여 보이는 화면의 중간부분 웹폰트로 사용에서 코드를 복사합니다 Ctrl + C
티스토리 설정 > 꾸미기 > 스킨편집 > html 편집 > CSS 차례대로 클릭해줍니다
이제 조금 친해진 편집기화면이 보이네요
/*Web Font Load */
밑부분에 복사한 코드를 붙여넣어줍니다 Ctrl + V
코드를 붙여준 부분 조금 아래
/* Type Selector Reset */
body { } 바디에 스타일(취향에 맞게 디자인을 바꾸는것)을 적용하는 부분입니다
부분에 font-family : 'EliceDigitalBaeum(폰트명)' 을 추가해줍니다 이미지를 참고하시어 기존것은 그대로 두시고 제일 앞쪽에 추가를 해주세요 (새로 추가한 폰트를 불러오지 못할 경우 후순위 폰트들을 불러오게 됩니다)
그다음 오른쪽 상단 적용을 눌러 저장을 해주세요
전체적용방법은 요렇게만 바꿔주시면 끝입니다 간단하죠!
2. 원하는 부분만 적용하는 방법
원하는 부분만 적용하는 방법도 스타일을 적용할 부분의 이름만 알고있다면 어렵지 않게 적용할 수 있습니다 1번에서 /*Web Font Load */ 부분에 폰트를 복사해서 붙여넣는것 까지는 같아요
폰트를 불러올 수 있도록 삽입을 해주는 부분입니다
로고(블로그이름) 적용
로고는 #header h1 { } 부분에 스타일을 적용해주면 됩니다
앞서 한번 해보았듯 font-family : '폰트이름' ; 부분을 선택할 폰트이름으로 변경해주세요
*찾으실 때는 Ctrl + F 누르셔서 header h1 으로 검색하시면 노랗게 표시를 해줄거예요
로고아래 리스트 제목 적용
로고아래 리스트 제목은 .list-type-thumbnail .post-item .title { } 부분에 스타일을 적용합니다
마찬가지로 font-family : '폰트이름' ; 부분을 선택할 폰트이름으로 변경해주세요
*찾으실 때는 Ctrl + F 누르셔서 list-type-thumbnail 으로 검색하시면 노랗게 표시를 해줄거예요
포스트 커버 제목 적용
포스트 커버 제목은 .post-cover h1 { } 부분에 스타일을 적용합니다
적용방법은 상단내용과 같습니다
*찾으실 때는 Ctrl + F 누르셔서 post-cover 으로 검색
**Tip : 오른쪽 스크롤바에 노란색 표시부분이 검색한 글자가 있는부분을 알려주는 거예요 그 부분에서 찾으면 좀 더 찾기 쉬울거예요
태그 제목 적용
태그 제목은 .tags h2 { } 부분에 스타일을 적용합니다
*찾으실 때는 Ctrl + F 누르셔서 tags 으로 검색
관련글 제목 적용
관련글 제목은 .related-articles h2 { } 부분에 스타일을 적용합니다
*찾으실 때는 Ctrl + F 누르셔서 related 으로 검색
댓글 제목 적용
댓글 제목은 .comments h2 { } 부분에 스타일을 적용합니다
*찾으실 때는 Ctrl + F 누르셔서 comments 으로 검색
**응용방법: 댓글제목이 아닌 댓글전체에 폰트를 바꾸고 싶으시다면 .comments h2 { }가 아닌 .comments { }에 font-family : '폰트이름' 으로 적용하시면 됩니다!