CSS를 사용하여 말풍선을 추가하는 방법이 인터넷에 많이 나와 있습니다. bbPress에서 Reply(답변)말풍선으로 대체하려고 여러 가지 코드를 적용했지만 레이아웃이 틀어지는 현상이 나타나네요. 그러다가 말풍선 코드를 쉽게 생성해주는 사이트를 발견했습니다.

http://www.ilikepixels.co.uk/drop/bubbler/라는 사이트입니다.

Speech Balloon Creator - 말풍선 CSS 생성기위의 그림과 같이 아래의 세 개의 박스에서 슬라이드 막대를 적절히 이동시키면 위쪽에 실제 모양이 표시되어 쉽게 원하는 모양의 말풍선 CSS를 만들 수 있습니다. 적절히 옵션을 지정한 후에 사이트의 오른쪽 맨 위에 있는 “CSS” 버튼을 누르면 CSS 코드를 복사하여 실제 작업에 사용할 수 있습니다.

여기에서 핵심은 인용구임을 표시하는 삼각형 모양의 아이콘을 추가하는 것입니다. 그리고 http://www.ilikepixels.co.uk/drop/bubbler/ 사이트에서는 삼각형 아이콘의 위치를 원하는 곳에 배치할 수 있어 매우 유용합니다.

워드프레스 포럼 플러그인 bbPress에 적용해보면:

Speech Balloon in bbPress

위와 같이 말풍선 모양이 만들어졌습니다. 단순히 라운딩 처리(border-radius)하는 것보다 보기가 더 좋아졌네요. 한가할 때 색상도 조정해보아야 하겠습니다.

참고:

떠나시기 전에 아무 댓글(Comments)이라도 남겨두세요.