구글 블로그 사용법: 엠포리오 (Emporio) 반응형 테마 포스트 (아이템) 페이지 헤더 이미지 안보이게 설정/삭제하는 방법

구글 블로그의 반응형 테마 가운데서 엠포리오(Emporio) 템플릿은 개별 글 (포스트) 페이지에서는 본문의 첫 그림을 확대하여 헤드 이미지로 사용하므로, 본문에 큰 사이즈의 사진이나 그림 이미지가 들어 있는 경우에는 멋진 모습을 보여 줍니다.

반면에, 작은 그림이 들어 있는 경우에는 모양새가 좀 어수선해 보이기도 합니다. 이럴 경우에, 헤드 이미지를 보이지 않도록 해당 코드 부분을 삭제하는 것도 하나의 방법이 될 것 같습니다.

[ 엠포리오 테마 헤드 이미지가 있는 경우와 없는 모양새 비교]
구글 블로그 사용법: 엠포리오 (Emporio) 반응형 테마 포스트 (아이템) 페이지 헤더 이미지 안보이게 설정/삭제하는 방법



1. 개별 글 페이지의 헤더 이미지 기능 코드 찾아 가기

==> 블로그 대시보드 > 테마(Theme) > HTML편집(Edit HTML)을 클릭하여, HTML 편집창을 연다
==> 코드가 있는 본문의 아무곳에나 마우스로 한 번 클릭하여 창을 활성화 한다

==> 키보드의 [컨트롤(Ctrl) + F]키를 쳐서, 아래 그림의 오른쪽 위와 같은 검색기를 열고, 아래의 코드를 복사하여 붙여 넣고 > [엔터/Enter] 키를 친다. 그러면, 해당 코드가 있는 부분으로 이동되어, 노랑색으로 표시된다.

[찾아 갈 코드 부분 : 검색기에 붙여 넣고, 엔터키를 침]
data:widgets.Blog.first.posts.first.featuredImage

구글 블로그 사용법: 엠포리오 (Emporio) 반응형 테마 포스트 (아이템) 페이지 헤더 이미지 안보이게 설정/삭제하는 방법


2. 해당 코드 부분 삭제 하기

글 페이지 헤더 이미지 기능을 하는 코드 부분은 아래와 같습니다.
아래의 코드 부분을 삭제하고, 편집창 맨 위의 [저장하기 / Save Theme] 버튼을 누르면, 변경사항이 저장됩니다.

실제로 저장을 해 보면, 시간이 한 참 걸리기도 하고, 저장이 되지 않았다는 오류 메시지가 뜨기도 합니다. 그러나, 저장은 별 탈없이 잘 되니 걱정하지 않아도 되겠습니다.

[ 삭제할 코드 부분]
<b:if cond='data:view.isSingleItem'>
  <b:if cond='data:widgets.Blog.first.posts.first.featuredImage'>
    <b:include data='{                                 
                      image: data:widgets.Blog.first.posts.first.featuredImage, selector: &quot;.bg-photo&quot;                               
                     }' name='responsiveImageStyle'/>
    <div class='bg-photo-container'>
      <div class='bg-photo'/>
    </div>
  </b:if>
</b:if>



3. 코드를 그냥 두고, 기능을 중단시키는 방법

일단 코드를 삭제하고 난 뒤에 해당 기능을 다시 복원할 경우를 대비하여 방법을 생각해 보면,

1) 템플릿 자체를 다시 적용하는 방법을 생각해 볼 수 있겠지만, 그렇게 하면, 이런저런 설정을 모두 다시 하여야 하므로 매우 번거롭게 됩니다.

2) 코드를 삭제하기 전에,
==> 블로그 대시보드 > 테마 (Theme) 페이지의 오른쪽 맨 위에 있는 테마 백업/복원(Backup/Restore) 기능을 이용하여, 테마를 백업해 두었다가, 필요할 때 복원하는 것이 안전하고 편리하겠습니다. (자세한 방법은 링크 페이지 참조: 템플릿 백업과 복구 하기)

3) 또 하나의 방법은, 아래와 같이 주석태그를 이용하는 것입니다.
위의 헤더 이미지 기능을 하는 코드 부분을 삭제하지 말고, 그냥 두되, 아래와 같이 주석 코드로 감싸면 됩니다. 나중에 기능을 다시 복원하려면, 주석태그만 제거하면 됩니다.

<!--
표시되지 않게 할 코드 부분
 -->

그러면, 아래와 같은 모양이 됩니다.

<!--
<b:if cond='data:view.isSingleItem'>
  <b:if cond='data:widgets.Blog.first.posts.first.featuredImage'>
    <b:include data='{                                 
                      image: data:widgets.Blog.first.posts.first.featuredImage, selector: &quot;.bg-photo&quot;                               
                     }' name='responsiveImageStyle'/>
    <div class='bg-photo-container'>
      <div class='bg-photo'/>
    </div>
  </b:if>
</b:if>
 -->



4. 페이지 헤드와 글 제목간의 간격 조절하기

위와 같이 헤드 이미지 기능을 중지시키면, 헤드 이미지 부분이 없어지므로, 해당 기능에서 설정되어 있는 여백 부분이 없어져, 헤드와 글 제목이 딱 붙어 갑갑해 보이게 됩니다. 아래와 같이 CSS 코드를 추가하여, 여백을 적절하게 조절하면 됩니다.

.item-view .post-wrapper {padding-top:45px;}

위 코드는 HTML의 <head> 란에 추가하면 됩니다. HTML편집창에서 직접 입력하기 보다는,
==> 블로그 대시보드 > 테마(Theme) > 설정(Customize) > 고급설정(Advanced) > CSS추가 (Add CSS)로 이동하여, CSS 입력창에 추가하면 편합니다.

자세한 방법은 아래 링크 페이지를 참조하면 되겠습니다.
>> 구글블로그 사용법: CSS코드 추가 변경하는 방법 2가지

위와 같이 코드를 제어한 실제 페이지보기 :
>> 유전자조작 지엠오 GMO로 인한 첫 인간 사망 - 의사들이 공식적으로 확인


도움이 되기를 바랍니다.