阿修羅ワークスプラグイン講座44 テンプレートをカスタマイズして吹き出しにする ゲット・ツイート・イン06

記事
IT・テクノロジー
チャット ランファ 右.png
ところでゲット・ツイート・インのデザインって変更できるんですか?

チャット 阿修羅ワークス 左.png
テンプレート機能で可能です。
デフォルトでは、Twitter公式のテンプレートと、ゲット・ツイート・インオリジナルのテンプレートの2種類が用意されています。
これまで表示として使用していたのは、ゲット・ツイート・インオリジナルのテンプレートです。

チャット ランファ 右.png
オリジナルのテンプレートだとまだTwitterっぽいので、Twitter臭さって消すことができるんでしょうか?

チャット 阿修羅ワークス 左.png
テンプレートを編集すれば可能ですよ。

チャット ランファ 右.png
例えばよくある吹き出し風にできちゃったりしますか?

チャット 阿修羅ワークス 左.png
可能です。
ちょっと面倒ですがやってみましょう。

チャット ランファ 右.png
よろしくお願いしますっ!

チャット 阿修羅ワークス 左.png
吹き出しは最低限アイコン画像、ユーザー名、ツイート内容の3つあればOKです。
テンプレート内のプレースホルダ(独自変数)に置き換わります。
説明は省きますが、以下のようにテンプレートをHTMLで作ります。

これをダッシュボードの左サイドメニューにある [ Get Tweet In ] → [ 設定 ] をクリックして、 [ テンプレート設定 ] タブ → [ 検索ツイート用オリジナルフォーマット ] タブをクリックします。

「使用するフォーマットスタイル」「フォーマットスタイル2」に変更し、「検索ツイートのオリジナル表示フォーマットスタイル2」のテキストエリアにさきほどのHTMLを貼り付けます。

GetTweetIn01.png

次にスタイルシートを追加します。
[ テンプレート設定 ] タブをクリックして「オリジナルツイートフォーマットのCSSスタイル」のテキストエリアに以下のスタイルシートを最後に追加します。

GetTweetIn02.png

最後に [ 変更を保存 ] ボタンで保存して完了です。
細かいところはお好みで調整して下さい。

GetTweetIn03.png

チャット ランファ 右.png
おおっっーーー。すごーーーい!!


サービス数40万件のスキルマーケット、あなたにぴったりのサービスを探す