처음 인용문을 사용할땐 신선하게 느껴졌지만 시간이 지날수록 본문이 지저분하게 느껴졌습니다. 그런데 최근 인용문을 사용하는 이웃중 검정색 따옴표가 아닌 옅은 회색톤의 따옴표를 사용하는 포스팅을 보니 전혀 지저분해 보이지 않고 오히려 세련되 보였습니다. 

 오늘 글은 예전에 포스팅한 인용문의 내용을 더 업그레이드 시켜 다양한 인용문의 따옴표를 만들어 적용할수 있게 포스팅해봤습니다.  



블로그 인용문 재료  

 모양별로 5가지 무료서체를 선택해 3가지 색상으로 png파일로 만들어봤습니다. png파일로 만들어졌기때문에 익스프롤러 6.0에서는 호환이 잘 되지 않을 수도 있습니다.


 

 



블로그 인용문 설정하는 법

1. 따옴표모음.zip 다운받기
 
 따옴표모음.zip 압축을 풀고 원하는 따옴표(4-3.png)를 선택합니다. 

2. 이미지 업로드하기 

 아래의 2가지 방법중  원하시는것을 선택하시면 됩니다.  

 - 비공개 게시판에 이미지를 올려 주소를 복사
 - 티스토리 스킨 > 업로드에 이미지를 업로드 그때 주소는 (imags/이미지파일이름) 이 됩니다. 

3. HTML/CSS편집에서 CSS부분 수정하기 

아래 인용문.txt파일의 내용으로 수정해주시면 됩니다. (Life in mono 스킨기준) 그밖에 글상자처럼 배경색 설정하거나 글전체의 여백을 통해 따옴표 위치를 조정해주실수 있습니다. 

- 따옴표 아랫부분이 잘려보여서 아래그림처럼 아랫쪽 여백 10px;를 추가했습니다. 




 /* 인용문 */
.article blockquote {
 margin:5px;
 padding-left:30px;
 padding-top:7px;  
 padding-bottom:10px; 
 background:url(http://cfile25.uf.tistory.com/image/1212B2484D7E9673016C8) no-repeat;
}

4. 인용문 태그 자체가 없는 경우 

 - html/CSS편집에서 CSS부분에 인용문 내용을 추가시켜주시면 됩니다. 



블로그 인용문 적용하는 법

1. 티스토리 글쓰기 메뉴중 아래그림에 있는 인용메뉴를 선택해줍니다. 



2.  글상자속에  자신이 원하는 글을 입력해 주면됩니다.  


3. 완성된 모습


테스트 하나 둘 셋



후기

 세련된 인용문을 이용해 블로그 가독성을 한번 높여보시는건 어떠세요 ? ^^;;; 




신고

댓글을 달아 주세요

  1. 이전 댓글 더보기
  2. 우오오~정말 가독성...제대로~!입니다~!!!
    저도 당장 써 봐야 겠어요~^^

    2011.03.15 14:43 신고 [ ADDR : EDIT/ DEL : REPLY ]
  3. 다음.. 블로그는 안될까요 ㅠㅠ

    2011.03.15 15:32 신고 [ ADDR : EDIT/ DEL : REPLY ]
  4. 제가 찾아헤메이던 자료네요
    감사합니다~~ 잘 쓸께요~~

    2011.03.15 16:00 신고 [ ADDR : EDIT/ DEL : REPLY ]
  5. 좋은자료 감사합니다~
    인용구도 잘만 사용하면 가독성도 좋아지고 미적으로도 좋더라구요^^
    다운받아갑니다~

    2011.03.15 16:01 신고 [ ADDR : EDIT/ DEL : REPLY ]
  6. 티비님의 블로그에 대한 포스팅은 갈수록 섬세해지는 듯합니다...ㅎㅎㅎ
    인용부호까지 신경쓰는 세심함...!
    저도 얼렁 따라해보렵니다..^^

    2011.03.15 16:37 신고 [ ADDR : EDIT/ DEL : REPLY ]
  7. 일반적으로 인용문을 넣으면 좀 산만한 느낌이 드는데 깔끔해서 보기 좋네요.

    2011.03.15 16:39 신고 [ ADDR : EDIT/ DEL : REPLY ]
  8. 와우~ 대단한 내공입니다
    오늘도 화이팅하세요~

    2011.03.15 16:57 신고 [ ADDR : EDIT/ DEL : REPLY ]
  9. 와우...대단하셔유~
    어떻게 요런걸 알아내징;;ㅋㅋㅋ
    감사합니당 흐흐흐흐흐

    2011.03.15 17:59 신고 [ ADDR : EDIT/ DEL : REPLY ]
  10. 별개 다 되네요~ ㅎㅎ
    맘에 드는 따옴표가 있네요~~ 맨 아래꺼 ~~ ㅎㅎ
    좋은 정보 감솨 감사~ ^^

    2011.03.15 18:46 신고 [ ADDR : EDIT/ DEL : REPLY ]
  11. 인용문을 언제 사용해야할지몰라 잘 사용을 안하는데요. 앞으로 이글 참고하여 사용해봐야겠습니다.

    2011.03.15 19:21 신고 [ ADDR : EDIT/ DEL : REPLY ]
  12. 언제 한번 적용해 봐야 되겠네요.

    2011.03.15 19:46 신고 [ ADDR : EDIT/ DEL : REPLY ]
  13. ㅋㅋㅋ 뭔가 했습니다.^^;;
    에뻐서 많이들 쓰실 것 같아요.

    2011.03.15 20:49 신고 [ ADDR : EDIT/ DEL : REPLY ]
  14. @.@ ㅎ 블로그 연구하던 시절이 떠오릅니다. @.@ ㅎ !!
    저도 언젠가는 전문가가 될 수 있다고 믿습니다. ㅎ

    2011.03.15 21:02 신고 [ ADDR : EDIT/ DEL : REPLY ]
  15. 확실히 인용문 쓰면 가독성이 좋아져서 좋아요~~^^

    2011.03.15 23:22 신고 [ ADDR : EDIT/ DEL : REPLY ]
  16. 호오~ 세련스럽네요...!!!

    2011.03.16 00:41 신고 [ ADDR : EDIT/ DEL : REPLY ]
  17. 안녕하세요~
    티비님 블로그에서
    정말 많은거 배워갑니다.
    감사합니다!!

    2011.03.16 02:10 신고 [ ADDR : EDIT/ DEL : REPLY ]
  18. 호잇자~~
    이거 갖고 싶었는데 잘 가져갑니다~ㅎ

    2011.03.16 06:39 신고 [ ADDR : EDIT/ DEL : REPLY ]
  19. 좋은글 잘보고 갑니다. 참고할께요~~

    2011.11.23 10:09 신고 [ ADDR : EDIT/ DEL : REPLY ]
  20. 베스

    오오 다운받아갑니다~

    2012.07.03 03:14 신고 [ ADDR : EDIT/ DEL : REPLY ]
  21. 베스

    오오 다운받아갑니다~

    2012.07.03 03:14 신고 [ ADDR : EDIT/ DEL : REPLY ]

티스토리 툴바