로고 추가하기

가이드/tokii at whale2017.09.04 00:11

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


이미지 가이드라인

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

  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 -->
    

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

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

  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) {
      .header .site-title .logo img.desktop {
        max-height: 50px;
      }
    }
    
    • 2배 더 크게 제작된 로고 이미지의 세로길이의 절반값을 max-height에 입력해줍니다.(50px)
    • 이와 같이 로고를 설정하면 고해상도 기기 및 4K 모니터에서도 선명한 로고를 보실 수 있습니다.
신고

작성자

Posted by 9월 'ㅅ')/

태그

관련 글

네이버톡톡

네이버 톡톡

댓글 영역

티스토리 툴바