Inblog
시작하기

블로그 커스텀 디자인

디자인 메뉴에서 헤더, 배너, 레이아웃, 푸터, 404 페이지까지 블로그의 전체 디자인을 커스터마이징하는 방법을 안내합니다.

좌측 메뉴바에서 디자인을 클릭합니다.

헤더 (Header)

  • 로고 (Logo)

    • 로고 이미지와 로고 URL 을 통해 네비게이션을 세팅할 수 있습니다.
    • 로고는 250 x 150 혹은 400 x 200 사이즈를 권장드립니다.

  • 헤더 버튼 (Header button)

    • 구독 폼 (Subscribe form) : 버튼을 통해 구독 폼을 띄울 수 있습니다. 구체적인 폼 설정은 폼 탭에서 설정 가능합니다.
    • URL 네비게이션 (Navigate to URL) : 타 URL 로 연결시킬 수 있는 버튼을 만들 수 있습니다.

  • 네비게이션 바 (Navigation)

    • 기본 메뉴 바 : 블로그 상단에 메뉴 바를 설정할 수 있습니다.
    • 선택 메뉴 바 : 메뉴 바 클릭시 하단의 여러 메뉴 바를 설정할 수 있습니다.

  • 커스텀 코드 (Custom Code)

    • 코드 작업을 통해 우리 홈페이지 톤앤 매너에 맞는 디자인을 제작할 수 있습니다.

배너 (Banner)

  • 블로그 제목 (Blog title) & 블로그 설명 (Blog description)

    • 블로그 메인 페이지의 제목과 블로그 설명을 설정할 수 있습니다.

  • 글자 색 (Text Color)

    • 글자 색을 지정할 수 있습니다.

  • 배너 레이아웃 (Banner Layout)

    • 글자의 레이아웃을 좌측 정렬, 가운데 정렬로 설정할 수 있습니다.

  • 백그라운드 색(Background color) / 이미지(Background image)

    • 배너의 백그라운드 색을 지정할 수 있습니다.
    • 배너의 이미지를 설정할 수 있습니다. 1680 x 450 (데스크톱 기준) 혹은 390 x 300 (모바일 기준) 사이즈를 권장드립니다.

  • 커스텀 코드 (Custom Code)

    • 코드 작업을 통해 우리 홈페이지 톤앤 매너에 맞는 디자인을 제작할 수 있습니다.

레이아웃 (Layout)

  • 기본적으로 세가지 포스트 레이아웃(Post Layout)을 제공드립니다.

  • 커스텀 코드 (Custom Code)

    • 코드 작업을 통해 우리 홈페이지 톤앤 매너에 맞는 디자인을 제작할 수 있습니다.

  • 회사 정보를 푸터에 적용시킬 수 있습니다.

  • 커스텀 코드 (Custom Code)

    • 코드 작업을 통해 우리 홈페이지 톤앤 매너에 맞는 디자인을 제작할 수 있습니다.

커스텀 코드 입력하고 저장하기

헤더 · 배너 · 레이아웃 · 푸터의 커스텀 코드는 모두 같은 편집기를 사용합니다. 위쪽 HTML 칸과 아래쪽 스타일 CSS 칸으로 나뉩니다. 스타일 CSS에는 CSS 규칙을 그대로 입력하거나 아래처럼 <style> 태그로 감싸서 입력할 수 있습니다. 새로 작성하거나 수정한 CSS 규칙은 코드 적용 시 자동으로 <style> 태그로 감싸집니다.

<style>
  h2 {
    font-size: 20px;
  }
</style>

수정하지 않은 기존 CSS는 그대로 보존됩니다. 다른 설정이나 HTML만 수정해도 기존 CSS가 자동 변환되지는 않습니다. 태그 없이 저장된 기존 CSS를 적용하려면 내용을 검토한 뒤 직접 <style> 태그로 감싸 주세요. 적용 전에 미리보기에서 디자인을 확인하세요. CSS 규칙이나 <style> 블록이 올바르게 닫히지 않았거나 cover 같은 프리셋 이름을 입력하면 빨간 글씨로 오류가 표시됩니다. CSS 칸에 HTML이나 스크립트를 새로 추가하지 마세요. 기존에 함께 저장된 코드가 있다면, 해당 코드와 스타일 태그 속성·순서를 그대로 둔 채 CSS 내용만 수정할 수 있습니다.

입력한 코드는 두 단계를 모두 거쳐야 블로그에 반영됩니다.

  1. 코드 적용하기 를 누릅니다. 코드가 검사된 뒤 편집 화면의 미리보기에 반영됩니다. 아직 저장된 상태는 아닙니다.
  2. 설정 패널 위쪽에 고정되어 있는 저장하기 를 누릅니다. 이 단계까지 마쳐야 실제 블로그에 반영됩니다.

코드 적용하기 만 누르고 디자인 화면을 벗어나면 변경 사항이 사라집니다. 저장하지 않은 상태로 나가려고 하면 확인 창이 표시됩니다.

  • 커스텀 코드는 화면별 · 영역별로 따로 저장됩니다. 디자인 화면 위쪽의 공통 · 홈 / 카테고리 · 포스트 · 작성자 · 404 탭이 각각 자기 코드를 보관하고, 공통 안에서도 헤더 · 배너 · 푸터가 서로 다른 칸입니다. 바꾸려는 화면의 탭에서 입력해야 그 화면에 반영되므로, 예를 들어 글 상세 화면의 본문 여백을 조정하려면 포스트 탭에서 입력하세요.
  • CSS 선택자를 a · button 처럼 넓게 지정하면 블로그 전체에 영향을 줄 수 있습니다. 이 경우 편집기에 주의 문구가 표시되며, 해당 영역에만 적용하려면 선택자 범위를 좁혀 주세요.

404 에러 페이지 설정

  • 404 에러 페이지 설정 또한 가능합니다.

모바일 뷰 지원

  • 데스크톱 버전 뿐만 아니라 모바일 뷰로도 블로그 디자인을 미리 살펴볼 수 있습니다. 반응형 뷰를 지원합니다.

최종 업데이트 2026-09-08

이전블로그 기본 세팅다음팀원(Staff) 관리