티스토리 #2 스킨 본문 폰트 종류/크기 변경하기

 

 

#티스토리 #2 스킨 본문 폰트 종류/크기 변경하기

 

 

내가 사용 중인 스킨은 티스토리 #2 반응형.

기본 제공으로도 세팅이 편하고 예쁘지만 매번 글을 올리고 수정하거나 글을 모두 작성한 다음 미리보기로 확인하는 작업을

생략하고자 조금씩 만져보기로 했다.

 

성격이 진짜 생각한대로 안되면 스트레스 엄청 받는 성격이라 글을 다 쓰고 나서 업로드 했는데 생각한 자간이나 글밀림 현상,

혹은 제멋대로 폰트크기가 왔다갔다 하는걸 봤더니 진짜 오만짜증이 다 났었는데 이번에야 말로 이걸 신경안쓰이게 고쳐보리라 마음먹음.

 

 

 

 

 

우선 블로그 관리에서 반응형 #2 스킨을 찾아 점선버튼을 클릭하면 적용이 가능하다.

다른 분들은 보니 스킨다운로드로 파일을 먼저 다운 받아 원본을 보관하고 하시던데 처음에 적용할 때

다운로드 없이 바로 적용해버렸다가 원래 만들어져있던 소스를 알 수 없어 원본으로 다시 다운로드 받고 적용함...

그랬더니 처음에 다 만져두었던 것들이 초기화 되버렸따아ㅏㅏㅏ....

 

전문가와 초짜의 차이가 이렇게 큽니다 여러분ㄴㄴㄴ....

일을 진짜 어렵게 돌아감 하 그래도 이렇게 내 쪼다짓을 적을 수 있는 자료를 챙길 기회라고 생각하고 좋게좋게 해나감

저 같은 쪼다짓을 안하시려면 아래 순서를 참고하세용

 

스킨 선택 > 스킨 다운로드 > 편집 후 업로드 혹은 스킨편집

 

 

 

 

이미 설정해서 사용중이시라면 왼쪽 카테고리 꾸미기 부분에 스킨편집이 있다

이 부분으로 들어가면 아래 이미지처럼 미리보기 페이지와 HTML / CSS / 파일업로드가 가능한 편집기가 제공된다.

 

 

 

하..이 때 안건데 배경이미지는 왜 없는데...(마른세수)

진짜 산넘어산임

 

어차피 이미지도 변경하려고 했던거니 이것도 하나하나 캡쳐해서 따로 올려야겠다.

 

우선 본문 폰트 종류와 크기를 수정하는데에만 집중해보자

 

참고로 위에 이미지는 폰트 종류를 수정하는건 맞는데 사이즈는 백날 바꿔봤자 본문엔 적용이 안되는 부분이니 참고하시길-

아래에서 보시겠지만 저걸로 몇번 삽질해서 꼭 알려드리고 싶다

 

순서는

 

편집기 > CSS > 캐릭터셋 영역 찾기(@charset) > font-family 영역 수정

 

 

 

 

우선 다른 분들 블로그를 몇 군데 참고해서 조금씩 적용해보았다.

 

가장 무난한 나눔고딕부터 추가해봄.

 

아, 혹시 이걸보고 참고하시는 분이 계시다면 지금부터 따라하지 마시고 이따 아래에 따라하라고 하는데부터 따라하심 됩니다

난 쪼다지만 쪼다인 내가 해보고 설명하는게 처음 해보시는 분들에게는 좀 더 도움이 되지 않을까 싶어 올리는 것이고

그렇기 때문에 전문 지식이나 올바른 순서는 제공할 수 없음을 미리 밝힌다:) 헤헿

 

 

 

 

 

▲ 변경 전 미리보기

 

 

 

 

▲ 변경 후 미리보기

 

어디가 바뀐건지 안보셔도 된다. 안바꼈으니까^^

 

넣으란대로 넣었는데 왜 아무것도 안 바뀌지. 여기서부터 이미 넋나갔음

저 분류 전체보기 쪽이랑 recent posts라고 적힌 블로그 제목들의 글씨체가 바껴야되는데 안바뀜.

우선 다른 분들 정보를 더 참고해서 종류를 추가해야할 것 같아 잠시 보류하고 우선 본문 폰트부터 수정하기로 했다.

놀랍게도 이 건 한번에 성공함

 

 

 

 

역시 이 부분도 CSS에서 변경하면 된다.

 

.area_view p 를 찾으라고 해서 ctrl+F로 찾아봤지만 안나옴.

#2 스킨이랑은 다른건가..? 왜 안나오지 하고 눈이 뽑히도록 스크롤 내리며 수동으로 봤더니 이렇게 나왔다.

아니 대체 찾기로 왜안나옴? 진짜 노이해

 

#2 스킨 기준으로 보시는 분이라면 제작자 분이 이렇게 친절하게 뷰상단이라고 따로 묶어 두셨으니 참고하시기 바랍니다

 

이 부분에서 본문의 글씨 크기뿐만아니라 자간, 행간까지 수정이 가능하다.

물론 에디터로 작성 중일 때는 적용되지 않고 업로드 한 뒤에 적용되는 것.

 

 

 

 

내가 작성한 다른 포스팅들은 일일히 수작업으로 크기를 바꿔둔거라 적용되지 않기 때문에

손대지 않았던 첫 포스팅을 기준으로 확인해보았다.

 

미리보기로 볼 수 있는데 왜 따로 보냐고 하시는 분도 계시겠지만 미리보기로 보면 적용이 느려서

그냥 새 창으로 하나 켜두고 새로고침 해서 확인하는게 나는 훨씬 빠르고 편했다.

 

우선 위 이미지는 처음 적용되어 있던 사이즈 16px에 행간 24px로 적용된 내용이다.

 

 

 

 

평소에 9pt로 변경해서 올리기 때문에 똑같이 9라고 적는 멍청함을 보여줌ㅎㅎ

pt와 px는 다른겁니다 알겠냐 나 자신...ㅠ_ㅠ

 

우선 저렇게 변경하면 본문이 어떻게 바뀌는지 보자.

 

 

 

 

..........이건 뭐 개미가 읽어야 할 듯.

어느 한 단어도 읽을 수가 없다. 아 눈아파...

 

그때서야 뭐가 잘못되었는지 깨달았으므로 다시 한번 수정.

 

 

 

 

따라란-

폰트가 맘에 걸리긴 하지만 딱 원하는 사이즈로 조정됨. 요게 13px로 적용한 모습.

13px을 기준으로 업다운 해보시길 추천드립니다.

 

 

 

 

자- 크기는 조정 했으니 이제 다시 답답한 폰트 종류 추가로 돌아와보자.

 

이거 바꾸려고 내가 진짜 블로그 몇 개를 뒤졌는지 정말...

우선 다른 분들이 적용하신 내용을 보니 나눔고딕도 한글로도 적고 영문으로도 적고

어떤 분은 작은 따옴표로 구분하고 어떤 분은 큰따옴표로 적용하고 또 어떤분은 한글만 따옴표를 쓰고 영문은 따옴표 없이 그냥 올리시고

뭐가 맞는건지 몰라 우선 여러가지로 넣어보았따^^...!

 

하지만 새로고침을 아무리해도 뭔가 바뀔 생각조차 없음...

 

 

 

 

이때부터 좀 짜증나서 아예 어떤 분이 적용하신 내용을 그대로 갖다붙였다.

font-family: 이 뒤로 싹 지워버리고 아예 새로 써버림. 아 이런건 출처 밝혀야 되는데 어제 해본거라 어떤 분 블로그에서 참고했는지

다시 찾을 수가 없음ㅠㅠ제공해주신 분 감사합니다..! 다시 찾게되면 꼭 수정해둘게요ㅠㅠ

 

어찌됐던 저렇게 적용하고 났더니 바뀐 내용으로 적용된 것 같아 조금 욕심을 부려봄.

 

 

 

 

제주고딕체도 하나 껴 넣어주기 후후

 

티스토리는 이렇게 하나하나 설정이 되어있기 때문에 유입되는 유저에 따라서 각각 가지고 있는 폰트에 따라 제공된다고 한다.

그러니까 나는 내 블로그를 찾은 유저에게 제주고딕체가 있으면 가장 우선으로 글씨체를 제공하고,

없으면 나눔고딕 > 맑은고딕 > 돋움 > 굴림 순으로 쭉쭉 제공되게 되고 도대체 왜인지는 모르겠지만 마지막에 산세리프체를 넣고 끝냈더니

비로소 마음에 쏙 드는 글씨들로 짜라란 변경이 되었다.

 

그러니 여러분.

이제 더 이상 저처럼 삽질하지 말고 이거 써요...

 

font-family:"Jeju Gothic", "나눔고딕", NanumGothic, Malgun Gothic, "맑은 고딕", Dotum, "돋움", Gulim, "굴림", Verdana, Arial, "Trebuchet MS", sans-serif;

 

오타가 있거나 틀린 부분 있으면 제발 알려주세요. 쪼다에게 많은 도움이 됩니다.

 

 

 

 

▲ 수정 전 내용

 

 

 

 

▲ 수정 후 내용

 

종류에 따라서 사이즈가 다르다보니 크기도 같이 커져버림.

그래도 왠지 모르게 쭈굴거리는 글씨들이 모두 또박또박 읽기 좋게 바껴서 기분이 왕좋아졌다.

 

 

 

 

하지만, 띠로리-

 

생각지도 못한 곳에서 복병 발견. 저거 왜저렇게 또 작아졌어...!

 

 

 

 

 

하지만 우린 이제 어디에서 변경하는지 알아요! 괜찮아요!

 

13px로 되어있던 사이즈를 14px로 변경하고 적용했더니 이렇게 다시 뿅뿅 커짐

아니 근데 1px차이가 저렇게 크단 말야..? 정말 알수없는 신기한 세계다.

 

 

 

 

자- 이제 생각보다 너무 커져버린 본문 사이즈만 다듬고 마무리 할 시간.

 

우선 내 에디터 기본 설정은 이렇게 9pt로 쓸 수 있게 예전에 변경해두었다.

가끔 문장이 가로폭보다 넘어가 이상한 부분에서 짤리는걸 방지하기 위해 이렇게 변경해두었고 업로드를 해도 크게 벗어나지 않는 선에서

보여질 수 있도록 변경해보자.

 

새로 문장을 쓰고 미리보기로 확인해야하기 때문에 요즘 내가 즐겨듣는 노래가사로 적어봄

발라드 좋아하신다면 저 노래 꼭 들어보세요 노래 넘나 좋음.

 

가사만 쓰려고 했는데 누가 나 오글터지는 일기쓴 줄 알까봐 가수명과 제목까지 부득부득 써둠.

 

 

 

 

 

우선 다시 뷰상단 > .area_view p 를 찾아서 사이즈를 바꿔준다.

12px부터 시작해볼까

 

 

 

 

▲ 적용 후

 

음 괜찮긴 한데 좀 작은 느낌이 없잖아 있다. 다시 수정-

 

 

 

 

14px로 맞춰두고 다시 미리보기로 확인

 

 

 

 

 

 

아까보다 훨씬 시원시원해진 글을 볼 수 있다.

 

지금까지 티스토리 #2 스킨 본문 폰트 종류와 크기를 변경해보았다.

확실히 손도 많이가고 잘 모르는 사람에게는 어렵지만 난 이런걸 해보려고 티스토리 시작을 선택한거라

아직까진 재밌다:)

 

관심있는 분야지만 혼자 조금씩 하다보니 확신도 없고 여태 초짜티도 못벗는중

그래도 누가 보고 웃을진 모르겠지만 아주 사소한거라도 올려보려한다.

다음엔 저 회색부분에 이미지 빠진거 넣는 포스팅을 써봐야지-