<?xml version="1.0" encoding="UTF-8"?><rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>Twitterをサイトに表示  |  太郎は考えた</title>
	<atom:link href="https://tarohakangaeta.com/tag/twitter%E3%82%92%E3%82%B5%E3%82%A4%E3%83%88%E3%81%AB%E8%A1%A8%E7%A4%BA/feed/" rel="self" type="application/rss+xml" />
	<link>https://tarohakangaeta.com</link>
	<description>WEBマーケターが役立つ情報発信</description>
	<lastBuildDate>Mon, 31 Aug 2020 13:32:53 +0000</lastBuildDate>
	<language>ja</language>
	<sy:updatePeriod>
	hourly	</sy:updatePeriod>
	<sy:updateFrequency>
	1	</sy:updateFrequency>
	<generator>https://wordpress.org/?v=5.5.18</generator>

<image>
	<url>https://tarohakangaeta.com/wp-content/uploads/2020/06/cropped-f_f_object_165_s256_f_object_165_0bg-32x32.png</url>
	<title>Twitterをサイトに表示  |  太郎は考えた</title>
	<link>https://tarohakangaeta.com</link>
	<width>32</width>
	<height>32</height>
</image> 
	<item>
		<title>【超簡単】Twitterを自サイトに表示させる方法【cocoon】</title>
		<link>https://tarohakangaeta.com/twitter/display-setting/</link>
					<comments>https://tarohakangaeta.com/twitter/display-setting/#respond</comments>
		
		<dc:creator><![CDATA[太郎（毎日サイト更新中）]]></dc:creator>
		<pubDate>Mon, 31 Aug 2020 12:45:36 +0000</pubDate>
				<category><![CDATA[Twitter]]></category>
		<category><![CDATA[cocoon]]></category>
		<category><![CDATA[twitter]]></category>
		<category><![CDATA[Twitterをサイトに表示]]></category>
		<category><![CDATA[WordPress]]></category>
		<category><![CDATA[コクーン]]></category>
		<category><![CDATA[ツイッター]]></category>
		<guid isPermaLink="false">https://tarohakangaeta.com/?p=987</guid>

					<description><![CDATA[WordPressの無料テーマcocoonを利用中の方向け！Twitterを表示させる方法をご紹介します。 この記事でわかる事/ポイント ○Twitter自サイトに表示させる方法 ○HTML等触らず簡単な設定方法 ○Tw [&#8230;]]]></description>
										<content:encoded><![CDATA[
<p>WordPressの無料テーマcocoonを利用中の方向け！Twitterを表示させる方法をご紹介します。</p>



<p>この記事でわかる事/ポイント</p>



<p>○Twitter自サイトに表示させる方法</p>



<p>○HTML等触らず簡単な設定方法</p>



<p>○Twitterの表示スタイルを複数選択できます（タイムライン表示等）</p>



<p>○図解で方法をご紹介（実際のキャプチャー画面）</p>




  <div id="toc" class="toc tnt-number-detail toc-center border-element"><input type="checkbox" class="toc-checkbox" id="toc-checkbox-2" checked><label class="toc-title" for="toc-checkbox-2">目次</label>
    <div class="toc-content">
    <ol class="toc-list open"><li><a href="#toc1" tabindex="0">Twitterをサイトに表示させる方法</a><ol><li><a href="#toc2" tabindex="0">Twitter側の設定</a></li><li><a href="#toc3" tabindex="0">WordPress側の設定</a></li><li><a href="#toc4" tabindex="0">Twitterタイムラインのスマホサイトでの見え方</a></li><li><a href="#toc5" tabindex="0">TwitterタイムラインのPCサイトでの見え方</a></li></ol></li><li><a href="#toc6" tabindex="0">表示させるタイムラインのサイズを変更する方法</a></li></ol>
    </div>
  </div>

<h2><span id="toc1">Twitterをサイトに表示させる方法</span></h2>



<h3><span id="toc2">Twitter側の設定</span></h3>



<figure class="wp-block-image size-large"><img loading="lazy" width="1024" height="777" src="https://tarohakangaeta.com/wp-content/uploads/2020/08/2-tarohakangaetaさん-tarohakanngaeta-Twitter-1024x777.png" alt="" class="wp-image-988" srcset="https://tarohakangaeta.com/wp-content/uploads/2020/08/2-tarohakangaetaさん-tarohakanngaeta-Twitter-1024x777.png 1024w, https://tarohakangaeta.com/wp-content/uploads/2020/08/2-tarohakangaetaさん-tarohakanngaeta-Twitter-300x228.png 300w, https://tarohakangaeta.com/wp-content/uploads/2020/08/2-tarohakangaetaさん-tarohakanngaeta-Twitter-768x583.png 768w, https://tarohakangaeta.com/wp-content/uploads/2020/08/2-tarohakangaetaさん-tarohakanngaeta-Twitter.png 1204w" sizes="(max-width: 1024px) 100vw, 1024px" /><figcaption><br></figcaption></figure>



<p>0,Twitterにログイン</p>



<p>1,自分のアカウント（私の場合は→@tarohakanngaeta）をコピーする</p>



<figure class="wp-block-image size-large"><img loading="lazy" width="1024" height="407" src="https://tarohakangaeta.com/wp-content/uploads/2020/08/Twitter-Publish-1024x407.jpg" alt="" class="wp-image-989" srcset="https://tarohakangaeta.com/wp-content/uploads/2020/08/Twitter-Publish-1024x407.jpg 1024w, https://tarohakangaeta.com/wp-content/uploads/2020/08/Twitter-Publish-300x119.jpg 300w, https://tarohakangaeta.com/wp-content/uploads/2020/08/Twitter-Publish-768x305.jpg 768w, https://tarohakangaeta.com/wp-content/uploads/2020/08/Twitter-Publish-1536x610.jpg 1536w, https://tarohakangaeta.com/wp-content/uploads/2020/08/Twitter-Publish-2048x814.jpg 2048w" sizes="(max-width: 1024px) 100vw, 1024px" /></figure>



<p>3,パブリッシュTwitterを開く　<a rel="noopener" target="_blank" href="https://publish.twitter.com/">https://publish.twitter.com/<span class="fa fa-external-link external-icon anchor-icon"></span></a></p>



<p>4,先程コピーした自分のTwitterアカウントを検索窓にコピペする</p>



<figure class="wp-block-image size-large"><img loading="lazy" width="1024" height="712" src="https://tarohakangaeta.com/wp-content/uploads/2020/08/Twitter-Publish-1-1024x712.jpg" alt="" class="wp-image-990" srcset="https://tarohakangaeta.com/wp-content/uploads/2020/08/Twitter-Publish-1-1024x712.jpg 1024w, https://tarohakangaeta.com/wp-content/uploads/2020/08/Twitter-Publish-1-300x209.jpg 300w, https://tarohakangaeta.com/wp-content/uploads/2020/08/Twitter-Publish-1-768x534.jpg 768w, https://tarohakangaeta.com/wp-content/uploads/2020/08/Twitter-Publish-1-1536x1069.jpg 1536w, https://tarohakangaeta.com/wp-content/uploads/2020/08/Twitter-Publish-1.jpg 1932w" sizes="(max-width: 1024px) 100vw, 1024px" /></figure>



<p>5,パブリッシュTwitterを下にスクロールする　※下にいくと上記の画面が表示</p>



<p>6,<strong>埋め込みタイムライン</strong>をクリック</p>



<p>7,<strong>コードをコピー</strong>をクリック</p>



<h3><span id="toc3">WordPress側の設定</span></h3>



<figure class="wp-block-image size-large"><img loading="lazy" width="1024" height="571" src="https://tarohakangaeta.com/wp-content/uploads/2020/08/ウィジェット-‹-太郎は考えた-—-WordPress-1-1024x571.jpg" alt="" class="wp-image-991" srcset="https://tarohakangaeta.com/wp-content/uploads/2020/08/ウィジェット-‹-太郎は考えた-—-WordPress-1-1024x571.jpg 1024w, https://tarohakangaeta.com/wp-content/uploads/2020/08/ウィジェット-‹-太郎は考えた-—-WordPress-1-300x167.jpg 300w, https://tarohakangaeta.com/wp-content/uploads/2020/08/ウィジェット-‹-太郎は考えた-—-WordPress-1-768x429.jpg 768w, https://tarohakangaeta.com/wp-content/uploads/2020/08/ウィジェット-‹-太郎は考えた-—-WordPress-1-1536x857.jpg 1536w, https://tarohakangaeta.com/wp-content/uploads/2020/08/ウィジェット-‹-太郎は考えた-—-WordPress-1-2048x1143.jpg 2048w, https://tarohakangaeta.com/wp-content/uploads/2020/08/ウィジェット-‹-太郎は考えた-—-WordPress-1-120x68.jpg 120w, https://tarohakangaeta.com/wp-content/uploads/2020/08/ウィジェット-‹-太郎は考えた-—-WordPress-1-160x90.jpg 160w" sizes="(max-width: 1024px) 100vw, 1024px" /></figure>



<p>8,WordPressにログイン</p>



<p>9,管理画面の左メニューにある<strong>外観</strong>をクリック</p>



<p>10,外観の配下にある<strong>ウィジャット</strong>をクリック</p>



<p>11,ウィジャットのページ下部にある<strong>カスタムHTML</strong>をクリック</p>



<figure class="wp-block-image size-large"><img loading="lazy" width="1024" height="543" src="https://tarohakangaeta.com/wp-content/uploads/2020/08/ウィジェット-‹-太郎は考えた-—-WordPress-1-1-1024x543.png" alt="" class="wp-image-992" srcset="https://tarohakangaeta.com/wp-content/uploads/2020/08/ウィジェット-‹-太郎は考えた-—-WordPress-1-1-1024x543.png 1024w, https://tarohakangaeta.com/wp-content/uploads/2020/08/ウィジェット-‹-太郎は考えた-—-WordPress-1-1-300x159.png 300w, https://tarohakangaeta.com/wp-content/uploads/2020/08/ウィジェット-‹-太郎は考えた-—-WordPress-1-1-768x407.png 768w, https://tarohakangaeta.com/wp-content/uploads/2020/08/ウィジェット-‹-太郎は考えた-—-WordPress-1-1-1536x814.png 1536w, https://tarohakangaeta.com/wp-content/uploads/2020/08/ウィジェット-‹-太郎は考えた-—-WordPress-1-1-2048x1086.png 2048w" sizes="(max-width: 1024px) 100vw, 1024px" /></figure>



<p>12,<strong>サイドバー</strong>をクリック</p>



<p>13,<strong>ウィジェットを追加</strong>をクリック</p>



<figure class="wp-block-image size-large"><img loading="lazy" width="1024" height="537" src="https://tarohakangaeta.com/wp-content/uploads/2020/08/ウィジェット-‹-太郎は考えた-—-WordPress-2-1-1024x537.jpg" alt="" class="wp-image-993" srcset="https://tarohakangaeta.com/wp-content/uploads/2020/08/ウィジェット-‹-太郎は考えた-—-WordPress-2-1-1024x537.jpg 1024w, https://tarohakangaeta.com/wp-content/uploads/2020/08/ウィジェット-‹-太郎は考えた-—-WordPress-2-1-300x157.jpg 300w, https://tarohakangaeta.com/wp-content/uploads/2020/08/ウィジェット-‹-太郎は考えた-—-WordPress-2-1-768x403.jpg 768w, https://tarohakangaeta.com/wp-content/uploads/2020/08/ウィジェット-‹-太郎は考えた-—-WordPress-2-1-1536x805.jpg 1536w, https://tarohakangaeta.com/wp-content/uploads/2020/08/ウィジェット-‹-太郎は考えた-—-WordPress-2-1-2048x1073.jpg 2048w" sizes="(max-width: 1024px) 100vw, 1024px" /></figure>



<p>14,<strong>タイトル</strong>の入力欄に任意の言葉を入力　※私の場合は：Twitter（太郎は考えた）と記載しました</p>



<p>15,<strong>内容</strong>の欄に先程パブリッシュTwitterでコピーしたコードを貼り付け</p>



<p>16,<strong>完了</strong>をクリックすれば完了</p>



<h3><span id="toc4">Twitterタイムラインのスマホサイトでの見え方</span></h3>



<figure class="wp-block-image size-large"><img loading="lazy" width="370" height="1024" src="https://tarohakangaeta.com/wp-content/uploads/2020/08/【アドセンス合格】記事用の画像はどうすべき？【初心者向け】-太郎は考えた-370x1024.jpg" alt="" class="wp-image-996" srcset="https://tarohakangaeta.com/wp-content/uploads/2020/08/【アドセンス合格】記事用の画像はどうすべき？【初心者向け】-太郎は考えた-370x1024.jpg 370w, https://tarohakangaeta.com/wp-content/uploads/2020/08/【アドセンス合格】記事用の画像はどうすべき？【初心者向け】-太郎は考えた-108x300.jpg 108w, https://tarohakangaeta.com/wp-content/uploads/2020/08/【アドセンス合格】記事用の画像はどうすべき？【初心者向け】-太郎は考えた-768x2124.jpg 768w, https://tarohakangaeta.com/wp-content/uploads/2020/08/【アドセンス合格】記事用の画像はどうすべき？【初心者向け】-太郎は考えた-555x1536.jpg 555w, https://tarohakangaeta.com/wp-content/uploads/2020/08/【アドセンス合格】記事用の画像はどうすべき？【初心者向け】-太郎は考えた-740x2048.jpg 740w, https://tarohakangaeta.com/wp-content/uploads/2020/08/【アドセンス合格】記事用の画像はどうすべき？【初心者向け】-太郎は考えた.jpg 786w" sizes="(max-width: 370px) 100vw, 370px" /></figure>



<p>スマホで見た場合が上記のように表示されます。</p>



<h3><span id="toc5">TwitterタイムラインのPCサイトでの見え方</span></h3>



<figure class="wp-block-image size-large"><img loading="lazy" width="874" height="1024" src="https://tarohakangaeta.com/wp-content/uploads/2020/08/【アドセンス合格】記事用の画像はどうすべき？【初心者向け】-太郎は考えた-1-874x1024.jpg" alt="" class="wp-image-998" srcset="https://tarohakangaeta.com/wp-content/uploads/2020/08/【アドセンス合格】記事用の画像はどうすべき？【初心者向け】-太郎は考えた-1-874x1024.jpg 874w, https://tarohakangaeta.com/wp-content/uploads/2020/08/【アドセンス合格】記事用の画像はどうすべき？【初心者向け】-太郎は考えた-1-256x300.jpg 256w, https://tarohakangaeta.com/wp-content/uploads/2020/08/【アドセンス合格】記事用の画像はどうすべき？【初心者向け】-太郎は考えた-1-768x900.jpg 768w, https://tarohakangaeta.com/wp-content/uploads/2020/08/【アドセンス合格】記事用の画像はどうすべき？【初心者向け】-太郎は考えた-1-1311x1536.jpg 1311w, https://tarohakangaeta.com/wp-content/uploads/2020/08/【アドセンス合格】記事用の画像はどうすべき？【初心者向け】-太郎は考えた-1-1748x2048.jpg 1748w" sizes="(max-width: 874px) 100vw, 874px" /></figure>



<p>レスポンシブなので私の場合PCで見た際サイドカラム（右メニューに）表示もされます。</p>



<h2><span id="toc6">表示させるタイムラインのサイズを変更する方法</span></h2>



<figure class="wp-block-image size-large"><img loading="lazy" width="1024" height="474" src="https://tarohakangaeta.com/wp-content/uploads/2020/08/Twitter-Publish-2-1024x474.png" alt="" class="wp-image-1000" srcset="https://tarohakangaeta.com/wp-content/uploads/2020/08/Twitter-Publish-2-1024x474.png 1024w, https://tarohakangaeta.com/wp-content/uploads/2020/08/Twitter-Publish-2-300x139.png 300w, https://tarohakangaeta.com/wp-content/uploads/2020/08/Twitter-Publish-2-768x356.png 768w, https://tarohakangaeta.com/wp-content/uploads/2020/08/Twitter-Publish-2-1536x711.png 1536w, https://tarohakangaeta.com/wp-content/uploads/2020/08/Twitter-Publish-2-2048x949.png 2048w" sizes="(max-width: 1024px) 100vw, 1024px" /></figure>



<p>1,カスタマイズオプションを設定する</p>



<p>※私の場合はGoogleの日本語翻訳機能をオンにしているので上記のように日本語ですが通常は</p>



<p>That’s all we need, unless you’d like to&nbsp;set customization options.　と表示されています。</p>



<figure class="wp-block-image size-large"><img loading="lazy" width="1024" height="829" src="https://tarohakangaeta.com/wp-content/uploads/2020/08/Twitter-Publish-3-1024x829.png" alt="" class="wp-image-1001" srcset="https://tarohakangaeta.com/wp-content/uploads/2020/08/Twitter-Publish-3-1024x829.png 1024w, https://tarohakangaeta.com/wp-content/uploads/2020/08/Twitter-Publish-3-300x243.png 300w, https://tarohakangaeta.com/wp-content/uploads/2020/08/Twitter-Publish-3-768x622.png 768w, https://tarohakangaeta.com/wp-content/uploads/2020/08/Twitter-Publish-3-1536x1243.png 1536w, https://tarohakangaeta.com/wp-content/uploads/2020/08/Twitter-Publish-3.png 1730w" sizes="(max-width: 1024px) 100vw, 1024px" /></figure>



<p>※<strong>幅</strong>の箇所は触らない</p>



<p>2,<strong>縦</strong>の長さを　初期値は1000になっているので私は800と短くしました。</p>



<p>3,更新をクリック</p>



<figure class="wp-block-image size-large"><img loading="lazy" width="1024" height="335" src="https://tarohakangaeta.com/wp-content/uploads/2020/08/Twitter-Publish-4-1024x335.png" alt="" class="wp-image-1002" srcset="https://tarohakangaeta.com/wp-content/uploads/2020/08/Twitter-Publish-4-1024x335.png 1024w, https://tarohakangaeta.com/wp-content/uploads/2020/08/Twitter-Publish-4-300x98.png 300w, https://tarohakangaeta.com/wp-content/uploads/2020/08/Twitter-Publish-4-768x251.png 768w, https://tarohakangaeta.com/wp-content/uploads/2020/08/Twitter-Publish-4-1536x502.png 1536w, https://tarohakangaeta.com/wp-content/uploads/2020/08/Twitter-Publish-4.png 1914w" sizes="(max-width: 1024px) 100vw, 1024px" /></figure>



<p>4,コードをコピーをクリック</p>



<p>5,先程と同様WordPressの<strong>ウィジェット</strong>の内容の欄に新しいコードを上書き保存</p>



<p>これでサイズの調整も完了です！</p>
]]></content:encoded>
					
					<wfw:commentRss>https://tarohakangaeta.com/twitter/display-setting/feed/</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
	</channel>
</rss>
