자신만의 로고를 추가해보세요. 방문자가 자신의 블로그를 더 기억하기 쉽습니다.

이미지 가이드라인

데스크탑과 모바일에서 같은 로고를 표시하거나 또는 각각 다른 로고를 표시할 수 있습니다.

1. svg 또는 png, jpg 형식의 이미지
2. 반응형: 최대 250X40픽셀(logo.svg)
3. 데스크탑, 모바일: 데스크탑의 경우 최대 500X200 픽셀(logo-desktop.svg), 모바일의 경우 최대 250X40픽셀(logo.svg)

• 가급적이면 svg 파일을 사용해주세요. 태블릿과 모바일의 경우 데스크탑보다 해상도가 높아 흐릿하게 표시될 수 있습니다.
• png, jpg 이미지의 경우 원본 사이즈보다 2배 더 큰 이미지를 준비해주세요. 300X100픽셀의 로고의 경우 600X200픽셀의 로고를 업로드 해야 모바일에서도 선명합니다

로고 추가하기(반응형)

데스크탑과 모바일에서 같은 크기의 로고를 표시하고자 할 경우 이 가이드라인을 참고하세요.

1. 관리자 메뉴에서 꾸미기 > HTML/CSS 편집으로 이동합니다.
2. 파일 업로드 탭에서 logo.svg파일을 업로드합니다.
3. HTML 탭으로 이동하여 <!-- site-title -->를 검색한 뒤 다음과 같이 변경합니다.

   <!-- site-title -->
   <h1 class="site-title">
     <a class="logo" href="[##_blog_link_##]">
       <figure>
         <img src="./images/logo.svg" alt="블로그 로고">
       </figure>
     </a>
   </h1>
   <!-- //site-title -->
   

Tip: svg 이미지를 사용할 경우 다음과 같은 방법으로 로고 크기를 변경할 수 있습니다.

1. 관리자 메뉴에서 꾸미기 > HTML/CSS 편집으로 이동합니다.
2. CSS 탭으로 이동하여 맨 아래에 다음 코드를 추가합니다.

   /* 로고 크기 변경하기(svg) */
   @media (min-width: 961px) {
     .sidebar .site-profile .site-title .logo img{
       height: 50px;
     }
   }
   

로고 추가하기(데스크탑, 모바일)

데스크탑과 모바일에서 다른 크기의 로고를 표시하고자 할 경우 이 가이드라인을 참고하세요.

1. 관리자 메뉴에서 꾸미기 > HTML/CSS 편집으로 이동합니다.
2. 파일 업로드 탭에서 logo-desktop.svg, logo.svg파일을 업로드합니다.
3. HTML 탭으로 이동하여 <!-- site-title -->를 검색한 뒤 다음과 같이 변경합니다.

   <!-- site-title -->
   <h1 class="site-title">
     <a class="logo" href="[##_blog_link_##]">
       <figure>
         <img class="desktop" src="./images/logo-desktop.svg" alt="데스크탑 로고">
         <img class="mobile" src="./images/logo.svg" alt="모바일 로고">
       </figure>
     </a>
   </h1>
   <!-- //site-title -->
   

Tip: 데스크탑에서 고해상도 기기를 위해 2~3배 더 큰 png, jpg 이미지를 사용할 경우 반응형 로고와 달리 자동으로 사이즈가 변하지 않아 크게 표시될 수 있습니다. 다음 가이드를 참고하세요.

1. 관리자 메뉴에서 꾸미기 > HTML/CSS 편집으로 이동합니다.
2. CSS 탭으로 이동하여 맨 아래에 다음 코드를 추가합니다.

   /* 로고 크기 변경하기(png, jpg) */
   @media (min-width: 961px) {
     .sidebar .site-profile .site-title .logo img.desktop {
       height: 50px;
     }
   }
   

   • 2배 더 크게 제작된 로고 이미지의 세로길이의 절반값을 max-height에 입력해줍니다.(50px)
   • 이와 같이 로고를 설정하면 고해상도 기기 및 4K 모니터에서도 선명한 로고를 보실 수 있습니다.