블로그스팟 가독성 전략 팁

가나톡ganaTOK
가나톡ganaTOK


블로그스팟 가독성 전략 팁

블로그스팟에 최적화된 가독성을 구현하기 위한 단계별 안내를 드리겠습니다.


1단계: Blogger 대시보드 접속

1. Blogger.com에 로그인합니다.

2. 해당 블로그의 대시보드로 이동합니다.


2단계: 테마 HTML 수정 모드 진입

3. 왼쪽 메뉴에서 "테마"를 클릭합니다.

4. 오른쪽 상단의 "HTML 수정" 버튼을 클릭합니다.


3단계: 폰트 추가

5. HTML 편집기에서 `</head>` 태그를 찾습니다.

6. 그 바로 위에 다음 코드를 추가합니다:

<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;700&amp;family=Roboto:wght@400;700&amp;display=swap" rel="stylesheet" />


4단계: CSS 스타일 추가

7. `<b:skin>` 태그를 찾습니다. 없다면 `<head>` 태그 안에 새로 만듭니다.

8. `<b:skin>` 태그 내부에 다음 CSS 코드를 추가합니다:


/css코드 시작

body {

  font-family: 'Noto Sans KR', 'Roboto', sans-serif;

  font-size: 16px;

  line-height: 1.6;

  color: #333;

}


h1 { font-size: 32px; line-height: 1.2; }

h2 { font-size: 26px; line-height: 1.3; }

h3 { font-size: 22px; line-height: 1.4; }

h4, h5, h6 { font-size: 18px; line-height: 1.5; }


.post-body {

  font-size: 16px;

  max-width: 720px;

  margin: 0 auto;

}


@media screen and (max-width: 768px) {

  body { font-size: 14px; }

  h1 { font-size: 28px; }

  h2 { font-size: 24px; }

  h3 { font-size: 20px; }

  h4, h5, h6 { font-size: 16px; }

}


a {

  color: #1a73e8;

  text-decoration: none;

}

a:hover { text-decoration: underline; }


blockquote {

  border-left: 4px solid #ddd;

  padding-left: 1em;

  margin-left: 0;

  color: #666;

}


code {

  background-color: #f5f5f5;

  padding: 2px 4px;

  border-radius: 3px;

  font-family: 'Consolas', 'Monaco', monospace;

}

/끝


5단계: 변경사항 저장 및 확인

9. 화면 오른쪽 상단의 "테마 저장" 버튼을 클릭합니다.

10. "변경사항 보기" 버튼을 클릭하여 블로그의 변경된 모습을 미리 확인합니다.


6단계: 최종 적용

11. 변경사항이 만족스럽다면 "완료" 버튼을 클릭하여 최종 적용합니다.


7단계: 테스트 및 미세 조정

12. 실제 블로그에서 다양한 기기(데스크톱, 태블릿, 스마트폰)로 접속하여 가독성을 확인합니다.

13. 필요하다면 CSS 코드로 돌아가 폰트 크기나 색상 등을 미세 조정합니다.


이 과정을 따라하시면 블로그스팟에 최적화된 가독성 높은 디자인을 적용할 수 있습니다. 각 단계를 천천히 진행하시고, 변경 사항을 저장할 때마다 미리보기로 확인하는 것이 좋습니다.


구현팁::

이 코드는 Blogger 템플릿의 중요한 부분입니다. 각 요소에 대해 설명해드리겠습니다:

  1. <b:skin>:
    • 이것은 Blogger에서 사용하는 특별한 태그입니다.
    • 블로그의 스타일(CSS)을 정의하는 섹션을 나타냅니다.
  2. version='1.3.0':
    • 이는 Blogger 스킨의 버전을 나타냅니다.
    • Blogger가 템플릿을 해석하는 방식을 결정합니다.
  3. <![CDATA[:
    • CDATA(Character Data) 섹션의 시작을 나타냅니다.
    • 이 안에 있는 텍스트는 XML 파서에 의해 파싱되지 않고 그대로 텍스트로 취급됩니다.
    • CSS 코드에 사용되는 특수 문자('<', '>', '&' 등)가 XML 파싱 오류를 일으키지 않도록 합니다.

이 구조의 전체적인 의미:

  • 이 섹션 안에 블로그의 전체적인 스타일(CSS)을 정의합니다.
  • CDATA 섹션을 사용함으로써 CSS 코드를 자유롭게 작성할 수 있습니다.
  • 일반적으로 이 섹션 뒤에는 ]]> 로 CDATA 섹션을 닫고, </b:skin>으로 스킨 정의를 마무리합니다.

CSS 코드를 추가하려면 이 <![CDATA[ 바로 다음에 넣으면 됩니다. 예를 들어:

xml
<b:skin version='1.3.0'>
<![CDATA[
/* 여기에 CSS 코드를 넣습니다 */
body {
  font-family: 'Noto Sans KR', sans-serif;
  font-size: 16px;
}
/* 기타 CSS 규칙들... */
]]>
</b:skin>

이 구조를 이해하고 활용하면 Blogger 템플릿을 안전하고 효과적으로 커스터마이즈할 수 있습니다.

Related Posts

로드 중…