트위터 트윗, 개인 홈페이지로 담아갈 때 가운데 정렬하는 방법

트위터의 트윗을 개인 홈페이지로 공유할 때에 트윗을 ‘가운데 정렬’하는 방법에 관한 글입니다. 개인 웹페이지에 공유한 트윗에는 <center></center> 태그가 먹히지 않기 때문에 트위터에서 제공하는 클래스를 추가해서 가운데 정렬을 하셔야 합니다. 간단한 내용이니 본문의 내용 참고하여 정렬해보시기 바랍니다.

  • UPDATE 2019-03-03 : 이미지 및 문구 수정

가운데 정렬된 트윗 예시 ▼


트윗 가운데 정렬하는 방법

트윗을 ‘담아가기’부터 ‘가운데 정렬’까지의 과정을 단계별로 나열한 문단입니다. 개인 블로그 혹은 웹페이지로 담아갈 때 이용하시면 됩니다.

 

1) 트윗 우측 상단의 화살표 버튼을 누르시고 ‘트윗 담아가기’ 버튼을 클릭합니다. ▼

 

2) 해당 트윗의 담아가기 코드를 복사하여 본인의 웹페이지에 붙여넣습니다. ▼

<blockquote class="twitter-tweet" data-lang="ko"><p lang="ko" dir="ltr">아이폰, 즐겨찾는 사진만 컴퓨터로 옮기는 방법<a href="https://twitter.com/hashtag/%EC%95%84%EC%9D%B4%ED%8F%B0?src=hash&amp;ref_src=twsrc%5Etfw">#아이폰</a> <a href="https://twitter.com/hashtag/%EC%82%AC%EC%A7%84?src=hash&amp;ref_src=twsrc%5Etfw">#사진</a><a href="https://t.co/M1qRctyKM1">https://t.co/M1qRctyKM1</a></p>&mdash; macinjune (@Mac_In_June) <a href="https://twitter.com/Mac_In_June/status/1098409472198877185?ref_src=twsrc%5Etfw">2019년 2월 21일</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

 

3) 복사한 코드의 첫줄 <blockquote> 태그 안에서 ‘tw-align-center’ 클래스를 추가합니다. 추가 위치는 아래 예시를 참고 바랍니다.

원본 ▼

<blockquote class="twitter-tweet" data-lang="ko">

tw-align-center 추가

<blockquote class="twitter-tweet tw-align-center" data-lang="ko">

 

4) 가운데 정렬된 트윗을 확인하실 수 있습니다. ▼


이상입니다.

참고

댓글 남기기