그동안 티스토리 블로그에 많은 변화가 있었는데요.

 

카카오 계정으로 전환하기는 일찌감치 했었고, 티스토리에서 구글 애드센스 연동은 여러 가지 말이 많아서 최대한 미루다가 작년 12월 말일 몇 시간을 남겨두고 했습니다.

 

연동하지 않을 경우, ads.txt 파일 문제와 기존 광고도 정상 노출되지 않을 수 있으니 (중요) 2020년 12월 말까지는 티스토리에서 구글 애드센스 계정을 연동하라고 공지한 바 있습니다.

 

저는 블로그 관리 홈에서 광고 설정은 사용하지 않고, 스킨 html에 삽입한 본문 상하단 광고 외에는 자동 광고로 송출하고 있습니다. 

 

 

 


티스토리 신에디터 

폰트글자크기 줄간격 

수정하는 방법


 

또한 플래시 종료와 함께 구 에디터, 일부 플러그인도 종료하게 되었는데요. 구에디터는 2021년 01월 중에 종료 예정이라고 합니다. 종료 전까지 구 에디터 작성 글을 신 에디터로 글 별 전환 기능 제공, 종료 후에도 마찬가지로 수정할 수 있게 지원한다고 합니다.

 

 

 

신에디터는 아쉽게도 보완이 필요한 부분이 많아서 가끔씩만 사용하고 있었고, 대부분의 글 발행을 구에디터로 하고 있었습니다. 무엇보다 구편집기의 폰트크기에 익숙해져 있었는데요. 

 

 

 

줄간격 역시 다양하게 설정할 수 있었습니다. 기존 발행 글을 신에디터로 모두 개별 전환할 수는 없는 노릇이니, 구버전 종료 후에 기존 글에 수정이 필요한 부분이 있는지 변화를 살펴봐야 할 것 같습니다.

 

 

 

블로그 관리 홈 > 콘텐츠 > 설정에서 새로운 글쓰기"사용합니다"는 신에디터, "사용하지 않습니다"는 구에디터입니다. 01월 07일 현재까지는 구 에디터 사용이 가능합니다. 설정 후 "변경사항 저장" 클릭 후 "저장 완료" 된 것을 확인합니다.

 

 

 

글쓰기로 들어가서 새에디터로 편집을 해보면, 글자크기가 좀 애매합니다. 구버전에서 12pt를 주로 사용하고 있었지만, 여기서는 그에 해당하는 크기가 없습니다. 본문 2는 작다고 느껴지고, 본문 1은 크다고 느껴져서 그 사이 크기가 없어서 아쉽더라고요. 

 

CSS 수정하기 귀찮아서 아쉬운 대로 새 버전은 가끔씩만 사용했었습니다. 물론 사용할 때마다 폰트 크기에 불만을 품으면서 말이죠. ㅋㅋ (CSS 수정하기 너무 간단한데 왜 귀찮다고 미뤘는지 모르겠어요! 결국 발등에 불 떨어지니까 하네요 ㅎㅎ)

 

 

 

제가 쓰고 있는 스퀘어(Square) 스킨을 기준으로 설명드릴 건데, 어떤 스킨을 사용하더라도 같은 방법으로 CSS 위치만 찾으시면 됩니다. 크롬(Chrome)에서 블로그 본문 창을 하나 띄우고 키보드 F12 키를 눌러주세요. 화살표 표시를 클릭합니다.

 

 

F12 개발자 도구, 블로그 스킨 편집 CSS 위치 찾기

안녕하세요! 사진찍는 꿈작가 앨리손입니다~ 이전 포스팅에서 티스토리 블로그 WHATEVER 스킨 편집, 블로그 이름(타이틀) 글꼴 폰트 변경하기, 섬네일 리스트 2 글 '더보기' 색상 변경에 대해서 알

allyson.tistory.com

 

 

화살표가 파란색으로 바뀌는 걸 확인하고, 본문의 내용의 한 부분에 (클릭하지 않고) 커서만 올리면 현재 폰트크기를 확인할 수 있습니다. 원래 15px이었는데 16px로 수정한 상태입니다. 제가 사용했던 12포인트(pt)=16픽셀(px)입니다. 대부분의 브라우저에서 사용하는 폰트 기본값이 12pt=16px=1em=100%입니다.

 

 

 

글자크기 확인 후 클릭을 하면 CSS 위치를 파악할 수 있습니다. 제가 쓰는 스퀘어(Square) 스킨은 수정도 많이 했었고, 다른 스킨에 비해서 파악이 바로 잘 되진 않았어요. 처음엔 .entry (137번째 줄) font size를 수정했다가 줄 간격이 함께 움직이지 않아서 다시 원상 복구하고 #body (99번째 줄) 부분을 추가 및 수정했습니다.

 

 

 

다른 스킨을 동일한 방법으로 해봤더니 위치를 바로 찾을 수 있었습니다. .entry-content p (1248번째 줄)에서 폰트크기와 줄간격, 색상 등을 수정할 수 있습니다. 포스터, 북클럽 스킨 등은 대부분 비슷한 위치를 찾으시면 될 거예요.

 

스퀘어 스킨에서는 폰트 사이즈 단위가 px, 여기서는 em인데요. 티스토리 신규 스킨은 대부분은 em 단위를 사용하고 있습니다.

 

px은 고정된 절댓값으로 반응형 웹사이트에 적합하지 않고, rem/em은 각각 최상위 html요소와 부모 요소의 영향을 받아 크기가 변하기 때문에 반응형 웹사이트에 적합합니다. 그중에서도 rem을 더 많이 사용한다고 합니다.

 

 

 

자, 그럼 티스토리 블로그 스킨으로 가서 CSS 수정을 해보겠습니다. 블로그 관리 홈 > 꾸미기 > 스킨 편집 > html 편집 > CSS 순서로 들어갑니다. 

 

 

 

content 아래 #body (99번째 줄)에 폰트 사이즈가 없어서 추가해주었습니다. 글자크기 font size: 16px; 삽입, 줄간격 line-height 180%; --> 190%;로 수정했습니다. 수정 후에는 적용을 꼭 눌러주세요. 동일 스킨이라도 수정을 했다면 CSS 위치는 다를 수 있습니다.

 

포스터, 북클럽 스킨 등은 앞서 말한 .entry-content p 위치로 들어가 수정하시면 됩니다. CSS 단위별 폰트크기 (px, em, %, pt) 참고 사이트는 아래에 있습니다.

 

 

Pixel to Em Converter [CSS 단위별 폰트크기(px, em, %, pt)]

Pixel to Em Converter [CSS 단위별 폰트크기(px, em, %, pt)] Pixel to Em Converter 및 변환 공식 PX TO EM Converter , EM TO PX Converter 상대적인 폰트 크기..

chongmoa.com

 

 

폰트사이즈와 줄간격을 수정하니 딱 제가 원했던 크기가 되었습니다. 그런데 본문과 댓글이 함께 움직여서, 댓글 크기도 덩달아 커졌더라고요. 본문보다 댓글은 살짝 작아도 될 것 같아서, #communicatefont-size: 15px; 를 삽입해주었습니다.

 

 

 

스킨 수정이 모두 끝나면 저장을 해두는 게 좋습니다. 수정을 여러 번 하다 보면 잘못돼서 이전 단계로 돌아가야 할 때가 꼭 한 번씩은 있으니까요. 블로그 관리 홈 > 꾸미기 > 스킨 변경 > 사용 중인 스킨 > 보관을 클릭합니다.

 

 

 

보기 편한 스킨명을 입력하고 확인~!!

 

 

 

블로그 관리 홈 > 꾸미기 > 스킨 변경 > 스킨 목록 > 스킨 보관함에서 보관한 스킨을 확인할 수 있습니다. 신, 구 편집기에 각각 장단점이 있지만 우선 폰트크기를 맞춰놓고 나니까 나머지 큰 불만은 없네요. ㅋㅋ 이미지는 원래 포토샵에서 다 작업하고, 특별히 에디터에서 사용하는 기능이 많진 않아서인가 봐요.

 

새로운 글쓰기로 계속 발행하셨던 분들에게는 뒷북 같은 정보 공유일 수도 있겠지만, 구에디터가 종료되는 시점을 앞두고 선택의 여지없이 신에디터를 쓰시는 분들에게 조금이나마 도움이 될까 해서 이번 글을 작성해 봤습니다.

 

앨리's Room에 방문해 주신 모든 분들께 사랑과 건강, 행운이 항상 함께 할 거예요 ♥

 

※ 공유 버튼을 이용한 비상업적 용도의 온라인 스크랩만 허용합니다. (2차 변경 및 불펌 X ) 

 

  1. Favicon of https://koo123.tistory.com BlogIcon 계리직 2021.01.07 18:04 신고

    저는 처음부터 신애디터로 써서 구 애티더가 어떤지 잘 모르겠더라고요
    그냥 글만쓰고 있어서...
    폰트글자크기를 잘 조정해주는것도 보시는분에게는 많은 영향을 미칠거 같아요
    감사히 잘 배우고 갑니다

    • 처음부터 신에디터를 사용하셨군요.
      디테일을 체크하는 것도 좋지만,
      무엇보다 콘텐츠 발행에만 주력하는 것도 좋은 방법같아요.
      오늘도 방문해 주셔서 감사합니다^^

  2. Favicon of https://dreamlover2425.tistory.com BlogIcon 드림 사랑 2021.01.07 23:02 신고

    앗 저에게 너무 어려운 이야기에요 ㅠㅠ
    누가 만져줬으면 좋겠네요

  3. Favicon of https://xuronghao.tistory.com BlogIcon 空空(공공) 2021.01.08 05:31 신고

    저도 이렇게 해 보고 싶은데 CSS 건드리는건 영 젬병이라 시스템에서
    좀 다양하게 설정하도록 했으면 좋겠더군요
    글 간격도 그렇고 폰트 크기도 영 마음에 안 듭니다
    그리고 사진 올리는것도 불편하고,,

    • 그죠~ CSS 안 건드려도 되게
      에디터에서 다양한 설정이 가능하면 더없이 좋겠어요.
      사용자가 불편함이 없게 말이죠~
      방문해 주셔서 감사합니다^^

  4. Favicon of https://sesack.tistory.com BlogIcon 세싹세싹 2021.01.08 11:42 신고

    아하 저는 신에디터 생겼을때 바로 갈아탔거든요~
    구에디터가 종료되는 군요~
    뭔가 유용하게 쓰던 플러그인 기능들이 없어지는 건 아쉬운 것 같아요
    과도기라 뭐 적응해야겠지만요~! ㅠ
    좋은 정보 잘 배우고 갑니다~^^

    • 맞아요~ 과도기니까 적응해나가야 할 것 같아요!
      신에디터로 바로 갈아타셨군요.
      저는 발만 살짝 담그고 있었네요 ㅎㅎ
      오늘도 방문해 주셔서 감사합니다 :)

  5. Favicon of https://sosotag.tistory.com BlogIcon 소소tag 2021.01.08 20:49 신고

    너무 어려운..

  6. Favicon of https://jiyooooo.tistory.com BlogIcon 지요(JIYO) 2021.01.08 21:19 신고

    오~ 이렇게 신에디터 폰트 글자 크기랑 줄간격을 수정할 수가 있군요!
    저는 항상 구에디터만 사용하고 있어서 생각도 못했습니다..ㅎㅎ
    그리고 무엇보다 아직도 html이랑 css는 잘 모르겠어요..ㅠㅠㅋㅋㅋ
    필요한 거 있을 때마다 검색해서 그대로 따라하는 정도랄까요..ㅎㅎ
    이렇게 앨리님 꿀팁 덕에 저처럼 잘 모르는 사람들은 보고 배울 수 있을 것 같아요 ㅎㅎ
    좋은 포스팅 감사합니다 ㅎㅎ

    • 항상 구에디터를 사용하고 계셨군요.
      신에디터를 가끔만 사용했는데, 지금 완전히 넘어와보니
      이게 더 편하네요~ (빠른 적응 ㅋㅋ)
      html, CSS는 많이 안 건드리는 게 좋더라고요. ㅎㅎ
      오늘도 방문해 주셔서 감사합니다^^

  7. Favicon of https://hayanreview.tistory.com BlogIcon 하얀리뷰 2021.01.09 12:27 신고

    엇엇 정보 감사합니다 ㅎㅎㅎ

  8. Favicon of https://newedge.tistory.com BlogIcon 뉴엣 2021.01.16 17:05 신고

    앨리님 너무 오랜만에 들렀습니다~ 요즘에는 블로그 접속을 잘 못했어요. 안 그래도 저도 최근에 처음으로 신에디터로 글을 올려 봤어요! 적응하느라 처음에 여러 시행착오를 겪게 되더라고요. 발행한 후에도 수정을 몇 번이나 했는지 ㅎㅎ 구에디터 없어진다는 소식 듣고도 새로운 것에 적응하기가 귀찮아서 미루고미루다 결국 없어지고 나서야 새에디터를 쓰게 되었네요. 없어지지는 않았지만 사진 기능을 사용하지 못하면 없어진 거나 마찬가지잖아요ㅠㅠ 그나마 이전 글들을 사진 제외하고는 편집하는 게 가능해서 다행이에요.

    카카오계정 연동도 해야 하고, 새해 맞아서 새로 적응해야 할 것들이 많이 있네요 ^^ 참, 앨리님 늦었지만 새해 복 많이 받으세요 :)

    • 뉴엣님 참 오랜만이네요^^
      블로그 접속을 잘 못하시는군요.
      저도 1일1포 이상 하시는 분들에 비하면
      아주 게으른 블로거입니다. ㅎㅎ
      블로그 변화에 적응 잘 하시고,
      뉴엣님도 새해 복 많이 받으세요 :)

+ Recent posts