동적뷰 타이틀에 이미지 삽입하기 #1

동적뷰의 타이틀에 이미지를 삽입하는 것과 관련하여 제가 알고 있는 방법은 두가지입니다. 일단, 이 글에서는 첫번째 방법에 대해서만 다룰 것입니다. 이 방법은 무난하고 따라하기 쉽고, 또 코드 수정도 거의 필요로 하지 않는 방법입니다.

그림1

동적뷰에서는 정상적인 방법으로는 이미지 삽입이 되지 않습니다. <그림1>에서 보시는 바와 같이 레이아웃의 머릿글 구성에서 이미지를 삽입해도 '블로그보기'를 하면, 이미지는 보이지 않고 여전히 텍스트로 된 '블로그 제목'과 '블로그 설명'이 타이틀로 나타납니다.

그래서 약간의 꼼수를 쓰는 것이 바로 백그라운드 이미지를 이용하는 것입니다. 정확히 말하면, 백그라운드 이미지를 타이틀 이미지처럼 보이게 하는 것입니다.

그림2

타이틀의 높이(height)는 65px이라는 것을 기억하시기 바랍니다. 저 위치에 정확히 높이 65px(또는 그 이하)의 이미지를 삽입할 수 있습니다.

그림3

예를 들어 설명하기 위해, <그림3>의 이미지를 타이틀 자리에 삽입하겠습니다.

먼저, [대시보드→템플릿→맞춤설정] 으로 이동한 후 [배경]에 원하는 이미지를 업로드합니다.

그림4

정렬은 <좌측상단>(중앙 정렬을 원할 경우 <중앙상단>), 배치는 <타일식 배치 안 함>으로 선택합니다. 

그림5

여기까지 마치고 나면, 블로그의 모습이 <그림5> 처럼 보일텐데요. 여기서 두가지 선택이 있습니다.

하나는, '블로그 제목'과 '블로그 설명'의 폰트 색상을 투명으로 처리하는 방법이고,

다른 하나는, '블로그 제목'과 '블로그 설명'을 아예 표시되지 않도록 하는 방법입니다.

1. '블로그 제목'과 '블로그 설명'의 폰트 색상을 투명으로 처리

그림6

[대시보드 → 템플릿 → 맞춤설정 → 고급] 에서 '블로그 제목'과 블로그 설명'의 폰트 색상을 모두 투명(transparent)로 설정합니다.

(사용하고자 하는 타이틀 이미지의 색상·배경이 흰색이 아닌 경우에는 페이지와 헤더의 색상을 자신의 이미지의 색상에 맞게 조절해줍니다.)

그림7

그러면, <그림7>과 같은 모습이 됩니다. 타이틀 자리에 이미지를 성공적으로 삽입하였지만, 우리는 '블로그 제목'과 '블로그 설명' 항목을 아예 삭제한 것은 아니란 점을 기억하시기 바랍니다. 

그림8

즉, 투명처리된 '블로그 제목'과 '블로그 설명' 자리에 마우스 커서를 올리거나 해당 자리를 드래그하면, 숨겨져 있던 '제목'과 '설명'이 독자(reader)에게 나타납니다. 

독자들이 블로그의 제목을 애써 드래그 해보는 일은 많지 않을 것이므로, 이 부분이 크게 문제되리라고 생각지는 않습니다. 신경이 쓰인다면, 드래그 방지 코드를 심어 놓는 것도 좋은 방법이라고 생각합니다.

2. '블로그 제목'과 '블로그 설명'을 아예 표시되지 않도록 설정

'블로그 제목'과 '블로그 설명'이 아예 표시되지 않도록 코드를 삽입할 수도 있습니다. 다시 위로 돌아가서, <그림5>의 상태에서 [대시보드 → 템플릿 → 맞춤설정 → 고급 → CSS추가] 의 자리에 아래의 코드를 삽입해줍니다.

 .header-bar {  
 display: none !important;  
 }   

이 코드는 블로그의 '제목'과 '설명'이 아예 디스플레이되지 않도록 설정해주는 코드입니다. '제목'과 '설명'이 아예 표시되지 않기 때문에 드래그가 불가능해지지만, 대신 헤더의 클릭도 불가능해집니다.

※ 제 블로그의 우클릭, 드래그 방지를 해제하였습니다. 이제 코드를 편하게 복사하실 수 있습니다.