Saturday, July 26, 2008

<BlockQuote> 꾸미기

글을 쓰다 보면, 인용구를 블록 잡아서 에디터 메뉴에 있는 '인용구 지정 BlockQuote'를 설정하여 들어 쓰기로 인용구를 표시하고는 한다. 여기에 큼지막한 따옴표로 꾸몄으면 했는데, Blogger Buster의 'How to customize "block quotes" in your posts'을 보면서 이를 꾸며 보았다.


먼저, 아래 quote.gif를 마우스 오른쪽 버튼으로 클릭하여 문맥메뉴에 있는 '그림을 다른 이름으로 저장'을 하여 컴퓨터에 저장한다.




블로그에서 '새 게시물' 작성을 하여 내려받은 quote.gif를 '이미지 추가'로 에디터로 불러들인 다음 '저장하기'로 초안 저장을 한다. 게시물로 저장할 필요는 없다. '미리보기'에서 그림 주소를 복사한다.




템플릿에 다음 코드를 ']]></b:skin>' 전에 입력하고 저장을 한다. 아래 코드에서 url은 그림 주소를 입력해야 하는데, 위에서 복사한 그림 주소를 입력을 하면 된다.

blockquote {
margin:1em 50px;
background: url(http://bp0.blogger.com/_RpG3h956_mA/SIg3c24DFMI/AAAAAAAAB7o/PiC6N-DfhHs/s400/quotes.gif) top left no-repeat;
padding: 15px 10px 10px 35px;
}


margin은 왼쪽에서 오른쪽으로 들여 쓰는 깊이를 정하는 것이고, url은 그림의 주소다. padding은 들여 쓰기 한 위치에서 그림의 위치를 top, right, bottom, left 방향으로 상대위치를 조정하는 것이다. 조금씩 값을 조정하면서 마음에 드는 위치를 정하면 되겠다.


'인용구 지정'이 된 인용구는 아래 그림과 같이, 왼쪽 상단에 따옴표 그림이 같이 표시되어 인용구로써 느낌을 바로 줄 수 있도록 인용구를 꾸며보았다.

quoted block


사실 이렇게 꾸미는 것을 정말 하고 싶었다. 다른 블로그에서 이렇게 꾸며 놓은 것을 보고 얼마나 부러웠는지. 마침 어느 블로그에서 마음에 드는 따옴표 그림을 있어 말없이 가져와서 꾸며보았다. 인용구 왼쪽에 바막대가 표시되는 것도 해 보고 싶은데, 실력이 딸려서 미루고 있다. ㅡ.ㅡ

2 comments:

  1. 주중에 돌관작업을 하셨으면 쉬시지 또 PC질(?)입니까요?
    비 오면 노가다는 쉬어야 합니다. 푸~~~욱...

    ReplyDelete
  2. [나무] 사무실 나와서 일하고 있지 말입니다.
    비가와도 사무실에서는 작업이 가능하니 일합니다. ㅋㅋㅋ
    건너편 노가다 현장사무실에서는 영화보고 있더군요.

    ReplyDelete