티스토리 Book Club 스킨 수정: 본문 글자 크기 변경하는 방법

2019. 9. 26. 14:57 | 댓글 27

이 블로그에는 현재 최근 공개된 Book Club (북 클럽)이라는 스킨이 적용되어 있습니다. 북 클럽 스킨에서는 본문 글자 크기가 0.9375em으로 설정되어 글자가 다소 작게 느껴질 수 있습니다. 북클럽 스킨에서 본문 글자 크기를 변경하고 싶은 경우 아래 내용을 참고해보세요.

저는 스킨을 변경하면 제일 먼저 본문 글자 크기를 키웁니다. 이제 노안이 들 나이가 되어 글자 크기가 작은 사이트의 글을 잘 안 보게 되네요.ㅠㅠ

아래의 내용은 북클럽 스킨을 예를 들어 본문 글자 크기를 키우는 방법을 설명했지만, 다른 스킨에서도 그대로 응용이 가능합니다. 제대로 적용되지 않을 경우 댓글에 주소를 남겨주시면 CSS 코드를 확인해드리겠습니다.

목차

    티스토리 Book Club (북 클럽) 스킨에서 본문 글자 크기 변경하는 방법

    북 클럽 스킨에서 본문 글자 크기를 키우려면 다음과 같은 CSS 코드를 추가하면 됩니다.

    /* 북클럽 스킨 본문 글자 */
    .entry-content p {
         word-wrap: break-word; 
         font-size: 1.25em;
    }

    .entry-content a {
    word-wrap: break-word
    }

    /* 본문 제목 */
    .post-cover h1 {
        font-weight: 500;
    }


    /* 목록 */

    .entry-content ul li,
    .entry-content ol li {
      font-size: 1.2em;
    }


    .entry-content ul li p,
    .entry-content ol li p {
        display: inline;
       font-size: 1.0em;
    }

    위와 같은 코드를 넣으면 글자 크기가 이 블로그와 같이 표시될 것입니다. 숫자를 적절히 변경하여 원하는 크기로 지정해보시기 바랍니다.

    그리고 모바일에서 줄간격(line height)이 너무 좁은 경우 다음과 같은 코드도 함께 추가하도록 합니다. (기기 해상도에 따라 레이아웃을 다르게 하려면 CSS 미디어쿼리를 사용하면 됩니다.)

    @media only screen and (max-width : 783px) {
    
    .entry-content p {
          line-height: 1.8em;
    }
    }

    북클럽 스킨 글자 크기

     

    티스토리 블로그에서 CSS 코드를 추가하려면 티스토리 로그인 페이지에서 꾸미기 > 스킨 편집 > html 편집 > CSS 탭을 차례로 클릭하면 됩니다.

    티스토리 스킨 편집

    코드를 CSS 섹션의 맨 아래에 입력해보세요.

    북클럽 스킨 커스텀하기



    • 네이버 블러그 공유하기
    • 네이버 밴드에 공유하기
    • 페이스북 공유하기
    • 트위터 공유하기
    • 카카오스토리 공유하기

    댓글을 달아 주세요

    ">
    1. thumbnail
      내로라하다

      오 아주 보기 좋은 정보입니다. ^^

    2. thumbnail
      현재는없다

      감사합니다 기다리던 포스팅이었어요 즐거운 하루되세요.

    3. thumbnail
      현재는없다

      감사합니다 기다리던 포스팅이었어요 즐거운 하루되세요.

    4. thumbnail
      현재는없다

      전 왜 안되죠...ㅠㅠ 그대로 복사해서 css에 넣어줬는데... 넣어 줘야 되는 위치가 따로 있는건가요?
      컴맹이라 슬프네요..

    5. thumbnail
      현재는없다

      정말 감사합니다.잘 되네요. 바보같이 맨 위에 붙여넣기 했었거든요. 글자 크기 1.1 정도로 적용해 뒀는데,
      계속 바꿔가면서 해봐야겠어요. 다시 한 번 감사드립니다. ㅋ

    6. thumbnail
      현재는없다

      정말 감사합니다.잘 되네요. 바보같이 맨 위에 붙여넣기 했었거든요. 글자 크기 1.1 정도로 적용해 뒀는데,
      계속 바꿔가면서 해봐야겠어요. 다시 한 번 감사드립니다. ㅋ

    7. thumbnail
      TTeGGu

      감사합니다. book club 스킨 적용 후 말머리 기호를 쓰면 줄바뀜 문제가 있었는데 글자크기 조절하고 나서 해결이 되었습니다. 감사합니다!

    8. thumbnail
      2020.03.01 13:11

      비밀댓글입니다

    9. thumbnail
      노마드로

      어머! 글씨가 바로 커졌어요~ 신기하네요. 제목 키우는 건 어떻게 해야 할까요?

    10. thumbnail
      노마드로

      답글 바로 주셔서 정말 감사해요ㅠ... 이거 역시 css에 붙이나요? 그런데 어디에 붙여넣어야 할까요?

    11. thumbnail
      노마드로

      이것도 됐어요. 감사합니다.~ 궁금한 게 있는데요, 이런 것들이 스킨 따라 모두 다른가요? 그렇다면 반응형이라고 쓰인 스킨을 선택하면 글씨 크기를 키우기 위해 다른 코드가 필요하게 되나요?

    12. thumbnail
      mjeagles99

      정말 좋은 정보 감사합니다. 변경하니 PC 화면이 너무 보기 좋네요. ^^

      그런데 모바일 폰트 사이즈를 좀더 키우려면 어떻해야 할까요?

    13. thumbnail
      Giant's Life Diary

      정말 알짜배기 코드 융용하게 잘쓰겠습니다!!
      그런데 북클립을 사용하면 동영상이나 애드핏 광고가 모바일 크기를 넘어서
      엄청 크게 변화하게 되나요? 저는 모바일로 제블로그에있는 유튜브 동영상이나
      애드핏 길이가 가로로 엄청 길거나 매우크게 나오네요 ㅠㅜ
      https://giants-life-diary.tistory.com/93

      • thumbnail
        홈페이지 제작, 워드프레스, 웹호스팅 정보를 제공하는 블로그 Avada
        2020.06.14 21:49 신고

        광고 크기를 PC와 모바일 기기에 따라 달리하여 넣으셔야 할 것입니다.

        참고로 애드센스 신청을 하셨다면 다른 광고는 넣지 않는 것이 바람직할 것입니다.

        애드핏 광고를 제거하면 모바일에서 유튜브가 가로로 길어지는 것도 해결될 것으로 보입니다.

        광고를 어떤 식으로 넣었는지는 몰라도, 애드핏 광고를 계속 이용하려는 경우에는 "CSS 미디어쿼리"로 구글을 검색해보시기 바랍니다.

      • thumbnail
        Giant's Life Diary
        2020.06.15 23:30 신고

        답변해주셔서 정말 감사합니다!!
        그런데.. 왜 이해가 안될까요.. ㅋㅋㅋ 뭐지.. 분명히 한글을 보고있는데 ㅋㅋㅋ
        핸드폰 사이즈 광고를 320x50 사이즈를 넣었는데... 참 이상하네요 ㅠㅜ

      • thumbnail
        홈페이지 제작, 워드프레스, 웹호스팅 정보를 제공하는 블로그 Avada
        2020.06.16 08:07 신고

        모바일에서 728px 크기 광고가 표시되고 있기 때문에 문제가 발생하는 것입니다.

        다음 CSS 코드를 추가하여 모바일에서 이 광고를 없애는 것을 고려해보시기 바랍니다.

        @media screen and (max-width:767px) {
        .tt_article_useless_p_margin .kakao_ad_area {
        display: none !important;
        }
        }

        위의 코드가 실제로 잘 작동할지는 모르겠습니다.

        코드는 어떻게 추가하신 건가요?

        플러그인을 사용했다면 플러그인을 사용하지 말고 직접 HTML 파일에 추가해보시기 바랍니다.

        두 개의 광고를 넣어서 하나는 모바일에서만, 하나는 PC에서만 표시되도록 하시면 됩니다.

        이렇게 하기 위해서 CSS 미디어쿼리를 알아야 합니다. 그 때문에 구글에 "CSS 미디어쿼리"를 검색해보시라고 한 것입니다.

      • thumbnail
        Giant's Life Diary
        2020.06.16 17:23 신고

        답변해주셔서 감사합니다~! 우선 코드를 넣어봤는데 휴대폰 광고자체가 안나왔습니다 지금 플러그인을 사용해서 넣었는데.. 아무래도 css 공부를 해야할 것 같네요..ㅠㅠ 그리고 따로 고객센터에 문의해봤는데 답장이 올런지..

      • thumbnail
        홈페이지 제작, 워드프레스, 웹호스팅 정보를 제공하는 블로그 Avada
        2020.06.16 17:33 신고

        네. display:none이 그 역할을 합니다.

        글 상단에 두 개의 광고를 삽입하여 하나는 모바일에서, 하나는 PC에서 표시되도록 해보시기 바랍니다. 별로 어려운 작업은 아닙니다.

    14. thumbnail
      밀리언마일러

      안녕하세요 :)
      저도 요즘 노안이 오는지 ㅜㅜ
      작은 글씨 보면 좀 답답한 느낌이었는데.
      큰 도움 됐습니다. 대박 감사합니다!!!!!

      전문가이신거 같아 한가지 여쭤보고 싶은게 있는데 괜찮으려나요?^^;;

      북클럽 스킨은 아니고 레터 스킨에서 모바일 꾸미기 설정에서
      티스로티 모바일웹 자동연결을 사용합니다. 로 해놓고 사용하는 블로그가 있는데요.
      여기서는 모바일 폰트 크기 어떻게 변경하면 되려나요?
      이게 반응형이 아니다 보니 따로 뭔가를 해줘야 되는거 같던데.
      찾아봐도 잘 모르겠네요ㅜㅜ

      • thumbnail
        홈페이지 제작, 워드프레스, 웹호스팅 정보를 제공하는 블로그 Avada
        2020.06.25 05:50 신고

        Letter 스킨이 반응형이 아닌가요?
        테스트해보니 스마트폰에서도 잘 작동하네요.

        티스토리 모바일 웹 자동 연결을 사용하는 경우 CSS를 일반적인 방법으로는 넣을 수가 없네요. CSS 파일을 만들어서 올린 다음 로드해주면 가능하다고 합니다.

        다음 글을 참고해보세요.

        https://samyeon.tistory.com/122

      • thumbnail
        밀리언마일러
        2020.06.25 07:51 신고

        어머! 이렇게 빨리 답변 주시고 너무 감사합니다!! 어려운말인거 같긴한데 ㅜㅜㅋㅋ찬찬히 읽어보고 한번 해봐야겠네요~.
        좋은 하루 되세요 :)