「Cocoonを使っているブログにツイートを埋め込みたい」
「簡単にできる方法はないの？」
「サイドバーにタイムラインを貼る方法も教えて！」
こんな悩みを解決します。
記事の信頼
|
この記事を書く僕は、ブロガー兼WEBライターとして稼ぐ大学生。 Twitter(kan_blogger)も運営中。 |
ブログでよく見かけるTwitterの埋め込み。SNS流入が主流の現在、導入文としても使えて非常に便利ですよね。
そこで今回は、10秒で完了するCocoonにTwitterを埋め込む方法とサイドバーにタイムラインを張り付ける方法も紹介します。
| 記事の内容 |
|
この記事を読み終わると、無料テーマCocoonに下記のようなTwitterの埋め込みを10秒で簡単にできるようになります。
✅週一にプチご褒美を
— カン|ブログ×大学生×webライター (@kan_blogger) August 4, 2020
新しい事を始めようとしても最初から稼げませんよね？
やはり何事も「継続」こそ命
しかし「継続」こそが99%の人の足を止める壁
「継続スキル」を身につけるには
・前に進む感覚
→日々の行動を記録（可視化する）
・週一にプチご褒美を与える
→モチベーション向上
尚、「Wordpress」を前提としています。
CocoonにTwitterを埋め込む方法は2つ
|
1つずつ紹介します。
リンクをコピー
手順はこちら
|
それぞれ画像付きで解説します。
１．ツイートを表示させる
まずは埋め込みたいツイートを見つけます。
今回はこちら
２．右下の「共有アイコン」から「リンクをコピー」
右下にある箱から矢印が出ているような形をしている「共有アイコン」を押して、その中にある「リンクをコピー」を押します。
ちなみに僕は英語にしているので「Copy link to Tweet」
「共有アイコン」
「リンクをコピー」
３．そのまま貼りたい部分に「張り付け」して完了
後はそのままブログに張り付けて完了です。
「張り付け」方法
もしくは
|
これで完了です。簡単ですよね？
HTMLの埋め込み
手順はこちら
|
それぞれ画像付きで解説します。
１．ツイートを表示させる
まずは埋め込みたいツイートを見つけます。
今回はこちら
２．右上の「下向きの矢印」から「ツイートを埋め込む」
今回は右上にある「下向きの矢印」を押して、その中にある「ツイートを埋め込む」を押します。
ちなみに僕は英語にしているので「Embed Tweet」
この時、別ウインドウに飛ばされますが正解です。次で解説します。
「下向きの矢印」
「ツイートを埋め込む」（英語版「Embed Tweet」）
３．Twitter Publishから「コードをコピー」
Twitter Publishに移動したら「コードをコピー」もしくは「Copy Code」を押します。
４．Cocoonブロックの「カスタムHTML」に張り付けて完了
コピーが完了すれば、張り付けたい部分にCocoonブロックの「カスタムHTML」を押して、挿入したら完了です。
ぶっちゃけると「リンクをコピー」の方が簡単ですよね。
特別な理由がない限りは「リンクのコピペ」でOKです！
サイドバーにTwitterのタイムラインを貼る方法
ツイートの埋め込みだけじゃなくて、
サイドバーにTwitterのタイムラインも張り付けたい！
少し長いですが簡単なので画像付きで紹介します！
１．ダッシュボード→外観→ウイジェット→テキストのサイドバーをウィジェットに追加
まずはダッシュボードの「外観」から「ウィジェット」を選択しましょう。
次に「テキスト」の中から「サイドバー」を選択して「ウィジェットに追加」を押します。
ここで注意ポイントがあります。
「テキスト（PC用）」があるので間違えないようにしましょう。
正しくは「テキスト」です。
ここを間違えていると上手く表示されません。
|
× ○ |
２．TwitterのタイムラインURLを張り付けて「Embed」
続いて、「サイドバー」の「テキスト」に張り付けたいTwitterの「タイムラインのURLをコピー」して「ビジュアル」タブに張り付けます。
タイトルをTwitterなどにして、「ビジュアル」タブの下の方にある「Embed」を押します。
この時に別ウインドウが開きますが正解です。次で解説します。
３．左の「Embedded Timeline」を選択して「set customization options」で高さと幅を決める
|
英語が並んでいますが、意味が分からなくても全く問題ありません。 画像を見て進めましょう。 |
別ウインドウ「Twitter Publish」が開いたら、「Embedded Timeline」と「Twitter Buttons」の二つが並んでいますが、左の「Embedded Timeline」を選択して、下にある「set customization options」を押して、高さと幅を決めます。
ここで大きさを決めないとブログのサイドバーが
タイムラインで延々と続くからです！
「What size would you like your timeline to be?」の下に数字が書かれていますが、左が高さで、右が幅です。
おすすめは高さ600、幅700程度ですが、ほとんどの場合幅は変更しても変わらないはずです。
おそらくCocoonがサイドバーの中がぐちゃぐちゃにならないように自動的に適応させてくれているはずです。
しかし「高さ」は決めないとタイムラインが延々続くので、
自分のブログデザインに合った高さにしましょう。
高さを決めたら「Update」を忘れずに押して、「コードをコピー」もしくは「Copy Code」も押します。
４．「テキスト」タブに張り付けて完了
自動生成されてHTMLをコピーしたら、TwitterのURLを張り付けた「ビジュアル」タブの横にある「テキスト」タブに張り付けます。
この時、元からある自分のURLは消してください。
「保存」もしくは「save」を押して完了です。
これで完了です。大きさを確認しましょう！
まとめ：CocoonにTwitterを埋め込み、見やすいブログを作ろう！
今回はCocoonにTwitterを埋め込む方法について紹介しました。
まとめると
|
【ツイートを埋め込む方法】 その１：リンクをコピー
その２：HTMLの埋め込み
|
|
【サイドバーにTwitterのタイムラインを貼る方法】
|
ブログにTwitterを埋め込む事は、ブログを書く時に意外と良く使う方法で覚えておいて損はないはずです。
Twitterを埋め込む事で導入文の一つとして使えて、スムーズに読めます！
サクッと終わらせましょう！
人気記事
コメント