html_css:embed_twitter_tweets_responsive

差分

このページの2つのバージョン間の差分を表示します。

この比較画面へのリンク

両方とも前のリビジョン 前のリビジョン
次のリビジョン		 前のリビジョン
html_css:embed_twitter_tweets_responsive [2022/02/12 17:46] – ↷ html_css:embed_twitter_tweets_on_the_web から html_css:embed_twitter_tweets_responsive へページを名称変更しました。 ともやんhtml_css:embed_twitter_tweets_responsive [2024/01/05 14:14] (現在) – [Twitter の埋め込み方法] ともやん
行 2: 行 2:
 [[https://publish.twitter.com|Twitter Publish]]\\ [[https://publish.twitter.com|Twitter Publish]]\\
 {{:html_css:publish-twitter_001.png?400|Twitter Publish 001}}\\ {{:html_css:publish-twitter_001.png?400|Twitter Publish 001}}\\
 +
 +===== Twitter Publish が生成する基本的なコード =====
 +<WRAP embed_jsfiddle 800px><html>
 +  <style>
 +    .wrap_embed_jsfiddle iframe {
 +      height: 400px;
 +    }
 +  </style>
 +  <script async src="//jsfiddle.net/tomoyan596/wfbtL8r6/embed/html,js,css,result,resources/dark/"></script>
 +</html></WRAP>
 +
 +===== Twitter の埋め込み方法 =====
 +DokuWiki では Wrap プラグインを利用して以下のように書くことができる🤔\\
 +<WRAP color_term>
 +<WRAP color_mincode><code javascript>
 +<html>
 +  <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
 +  <style>
 +    div.wrap_twitter-tweet-scroll {
 +      width: 600px !important; /*fit-contents;*/
 +      height: 500px !important;
 +    }
 +  </style>
 +</html>
 +
 +<WRAP twitter-tweet-scroll><html>
 +<blockquote class="twitter-tweet" data-conversation="none" data-lang="ja" data-theme="dark">
 +  <p lang="ja" dir="ltr">
 +    YouTubeのレスポンシブは簡単でしたけど、Twitterのレスポンシブも上手く処理できるかなぁ🤔
 +    <a href="https://t.co/SJLKQlIkfm">https://t.co/SJLKQlIkfm</a>
 +    <a href="https://t.co/xViO4kR8wT">pic.twitter.com/xViO4kR8wT</a>
 +  </p>&mdash; 🍛𝕿𝖔𝖒𝖔𝖞𝖆𝖓𝟝𝟡𝟞🍛 🐍🏕♨️ (@tomoyan596)
 +  <a href="https://twitter.com/tomoyan596sp/status/1491924322528595968?ref_src=twsrc%5Etfw">
 +    February 10, 2022
 +  </a>
 +</blockquote>
 +<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
 +</html></WRAP>
 +</code></WRAP>
 +</WRAP>
 +
 +<html>
 +  <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
 +  <style>
 +    div.wrap_twitter-tweet-scroll {
 +      width: 600px !important; /*fit-contents;*/
 +      height: 500px !important;
 +    }
 +  </style>
 +</html>
 +
 +<WRAP twitter-tweet-scroll><html>
 +<blockquote class="twitter-tweet" data-conversation="none" data-lang="ja" data-theme="dark">
 +  <p lang="ja" dir="ltr">
 +    YouTubeのレスポンシブは簡単でしたけど、Twitterのレスポンシブも上手く処理できるかなぁ🤔
 +    <a href="https://t.co/SJLKQlIkfm">https://t.co/SJLKQlIkfm</a>
 +    <a href="https://t.co/xViO4kR8wT">pic.twitter.com/xViO4kR8wT</a>
 +  </p>&mdash; 🍛𝕿𝖔𝖒𝖔𝖞𝖆𝖓𝟝𝟡𝟞🍛 🐍🏕♨️ (@tomoyan596)
 +  <a href="https://twitter.com/tomoyan596sp/status/1491924322528595968?ref_src=twsrc%5Etfw">
 +    February 10, 2022
 +  </a>
 +</blockquote>
 +<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
 +</html></WRAP>
  
  • html_css/embed_twitter_tweets_responsive.1644655576.txt.gz
  • 最終更新: 2022/02/12 17:46
  • by ともやん