Twitterの引用をしたい時に、ちょっと書き方に悩んだので似たような悩みを持つ方へご紹介。kekekeです。こんにちは
いいツイートや、紹介したいツイートなど色々あると思いますが、それらを引用する際にちょこっと見せ方を変えたい時の書き方を試してみようと思います。
Twitterからの単体ツイートの引用
ツイッターの標準機能のツイートをサイトに埋め込むだとこんな感じ
|
1 2 |
<blockquote class="twitter-tweet" data-lang="ja"><p lang="ja" dir="ltr">うさまる11リリースしました！<br>今回は夏夏夏〜🏝なスタンプです🍉<br>ぜひぜひたくさん使ってください✨<a href="https://t.co/VBTiTY5jFy">https://t.co/VBTiTY5jFy</a> <a href="https://t.co/pJYjgM0F1b">pic.twitter.com/pJYjgM0F1b</a></p>— sakumaru＠うさまるといっしょ (@skmr_29) <a href="https://twitter.com/skmr_29/status/1013983986224283648?ref_src=twsrc%5Etfw">2018年7月3日</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script> |
うさまる11リリースしました！
今回は夏夏夏〜🏝なスタンプです🍉
ぜひぜひたくさん使ってください✨https://t.co/VBTiTY5jFy pic.twitter.com/pJYjgM0F1b— sakumaru＠うさまるといっしょ (@skmr_29) 2018年7月3日
メディア(画像等)を含めない場合はこのような表示。
|
1 2 |
<blockquote class="twitter-tweet" data-cards="hidden" data-lang="ja"><p lang="ja" dir="ltr">うさまる11リリースしました！<br>今回は夏夏夏〜🏝なスタンプです🍉<br>ぜひぜひたくさん使ってください✨<a href="https://t.co/VBTiTY5jFy">https://t.co/VBTiTY5jFy</a> <a href="https://t.co/pJYjgM0F1b">pic.twitter.com/pJYjgM0F1b</a></p>— sakumaru＠うさまるといっしょ (@skmr_29) <a href="https://twitter.com/skmr_29/status/1013983986224283648?ref_src=twsrc%5Etfw">2018年7月3日</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script> |
うさまる11リリースしました！
今回は夏夏夏〜🏝なスタンプです🍉
ぜひぜひたくさん使ってください✨https://t.co/VBTiTY5jFy pic.twitter.com/pJYjgM0F1b— sakumaru＠うさまるといっしょ (@skmr_29) 2018年7月3日
Twitterのリプライのツイートの引用元も含める
ツイッターの標準機能で埋め込むとこんな感じ
|
1 2 |
<blockquote class="twitter-tweet" data-lang="ja"><p lang="ja" dir="ltr">リリースおめでとうございますヽ(・∞・)ノ<br>遊び心満載で、リストを見てるだけでもクスっとしてしまいます(・∞・)笑<br>たくさん使わせていただきますヽ(・∞・)ノ<br><br>わっしょいヽ(・∞・)ノわっしょい <a href="https://t.co/jsAvgH8fon">pic.twitter.com/jsAvgH8fon</a></p>— Noir@さくまらー (@FromNoir) <a href="https://twitter.com/FromNoir/status/1014065695829602304?ref_src=twsrc%5Etfw">2018年7月3日</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script> |
リリースおめでとうございますヽ(・∞・)ノ
遊び心満載で、リストを見てるだけでもクスっとしてしまいます(・∞・)笑
たくさん使わせていただきますヽ(・∞・)ノわっしょいヽ(・∞・)ノわっしょい pic.twitter.com/jsAvgH8fon
— Noir@さくまらー (@FromNoir) 2018年7月3日
ツイッターの引用元を含めないパターン
|
1 2 |
<blockquote class="twitter-tweet" data-conversation="none" data-lang="ja"><p lang="ja" dir="ltr">リリースおめでとうございますヽ(・∞・)ノ<br>遊び心満載で、リストを見てるだけでもクスっとしてしまいます(・∞・)笑<br>たくさん使わせていただきますヽ(・∞・)ノ<br><br>わっしょいヽ(・∞・)ノわっしょい <a href="https://t.co/jsAvgH8fon">pic.twitter.com/jsAvgH8fon</a></p>— Noir@さくまらー (@FromNoir) <a href="https://twitter.com/FromNoir/status/1014065695829602304?ref_src=twsrc%5Etfw">2018年7月3日</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script> |
リリースおめでとうございますヽ(・∞・)ノ
遊び心満載で、リストを見てるだけでもクスっとしてしまいます(・∞・)笑
たくさん使わせていただきますヽ(・∞・)ノわっしょいヽ(・∞・)ノわっしょい pic.twitter.com/jsAvgH8fon
— Noir@さくまらー (@FromNoir) 2018年7月3日
ツイッターのリプライ、引用元引っ張ってかつ、メディアは表示させないパターン。どうやらデフォルトで利用できるものだと引用元のメディアは使われるようだ。
|
1 2 |
<blockquote class="twitter-tweet" data-cards="hidden" data-lang="ja"><p lang="ja" dir="ltr">リリースおめでとうございますヽ(・∞・)ノ<br>遊び心満載で、リストを見てるだけでもクスっとしてしまいます(・∞・)笑<br>たくさん使わせていただきますヽ(・∞・)ノ<br><br>わっしょいヽ(・∞・)ノわっしょい <a href="https://t.co/jsAvgH8fon">pic.twitter.com/jsAvgH8fon</a></p>— Noir@さくまらー (@FromNoir) <a href="https://twitter.com/FromNoir/status/1014065695829602304?ref_src=twsrc%5Etfw">2018年7月3日</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script> |
リリースおめでとうございますヽ(・∞・)ノ
遊び心満載で、リストを見てるだけでもクスっとしてしまいます(・∞・)笑
たくさん使わせていただきますヽ(・∞・)ノわっしょいヽ(・∞・)ノわっしょい pic.twitter.com/jsAvgH8fon
— Noir@さくまらー (@FromNoir) 2018年7月3日
Twitterの引用を多数利用するならjavascriptを宣言しておく
bodyの前に以下のスクリプトを埋め込めば都度宣言する必要はない
|
1 |
<script id="twitter-wjs" type="text/javascript" async defer src="//platform.twitter.com/widgets.js"></script> |
TwitterカードのCSSを変更する場合
大本はこんな感じでblockquote.twitter-tweetを上書き追記すれば色々できそう。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 |
blockquote.twitter-tweet { display: inline-block; font-family: "Helvetica Neue", Roboto, "Segoe UI", Calibri, sans-serif; font-size: 12px; font-weight: bold; line-height: 16px; border-color: #eee #ddd #bbb; border-radius: 5px; border-style: solid; border-width: 1px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15); margin: 10px 5px; padding: 0 16px 16px 16px; max-width: 468px; } blockquote.twitter-tweet p { font-size: 16px; font-weight: normal; line-height: 20px; } blockquote.twitter-tweet a { color: inherit; font-weight: normal; text-decoration: none; outline: 0 none; } blockquote.twitter-tweet a:hover, blockquote.twitter-tweet a:focus { text-decoration: underline; } |
Twitterのサイトレベルのテーマオプションを定義する
metaに書き込んであげれば特に何もしなくても反映されるようだ。
|
1 2 3 |
<meta name="twitter:widgets:theme" content="light"> <meta name="twitter:widgets:link-color" content="#55acee"> <meta name="twitter:widgets:border-color" content="#55acee"> |
まとめ
ツイートの埋め込みでも色々と方法があり、いじってみるのは楽しそう。
この辺りの設定もCMSならプラグインを探せばGUI化されてるのもあるだろう。
ある程度設定を作ったらショートコード化してしまえばいいよってTwitterDevelopperサイトには書いてあったけど、そう思うならTwitterが作成してくれたらいいのに。
でもデフォルトで十分なら特に何もしなくても良いだろう。
ちょっと気になったのがAMP向けページはまた別の処理が必要そう。軽量化を目指すなら勉強しないといけないかも。
おしまい。
コメント