ワードプレスプラグイン Tweet In2 WP講座 レッスン16ツイート内容をCSSで整形する

投稿されたツイート内容は通常だとなにもデザイン的な処理がされていません。
そこでCSSを使った整形してあげます。ツイート内容のタグ構成は以下のようになっています。

【投稿された記事のフォーマット】

投稿された記事のフォーマットは以下の通りです。見やすいようにインデントしてあります。

<div class="tweet">
	<div class="tweet-user">
		<div class="tweet-text">ツイート内容</div>
		<div class="tweet-user_name">ツイートしたユーザー名</div>
		<div class="tweet-date">ツイート日時</div>>
	</div>
</div>

このタグにスタイルシートを適用してあげます。スタイルシートの例を紹介します。

【Twitter】ヤバイ

【スタイルシートの記述例】

投稿された記事の見た目を変えるにはテーマフォルダにある「style.css」に例えば以下のように記述します。

/* Tweet In2 WP*/
.tweet
{
	width 100%;
}
.tweet-user
{
	width: 80%;
	margin-top: 8px;
	margin-bottom: 8px;
	margin-left: 32px;
	margin-right: 32px;

	padding-top: 16px;
	padding-bottom: 16px;
	padding-left: 16px;
	padding-right: 16px;

	border: 1px solid #55acee;
}
.tweet-text
{
	word-break: break-all;
	font-size: 90%;
	color: #333333;
}
.tweet-user_name
{
	font-size: 80%;
	color: #cccccc;

}
.tweet-date
{
	font-size: 50%;
	color: #cccccc;
}

記述を変えることによって見た目を変更することができます。
あなただけのオリジナルデザインを考えてみてください。

ポイント
  • 取得して投稿されたつぶやきはCSSで自由に整形することができる

Tweet In2 WP(ツイート イントゥ ワードプレス)
Tweet In2 WP(ツイート イントゥ ワードプレス)

 

関連記事