SWELLでX（エックス）を埋め込む完全ガイド｜初心者でもすぐできる3ステップ

SWELLでブログを書いていて、「エックスのポストを記事に埋め込みたいのに、うまく表示されない…」とモヤモヤしていませんか。

このページでは、そんな悩みをスッキリ解消できるように、SWELLでXを埋め込む基本のやり方とコツをまとめて紹介します。

結論から言うと、エックスはカスタムHTMLで公式の埋め込みコードを使い、埋め込み数を絞って運用するのが、扱いやすくて失敗も少ないやり方です。

SWELLでエックスを埋め込むと何ができるのか

エックス埋め込みでブログがどう変わるか

私が自分のブログにエックス埋め込みを使ってみて感じたのは、「ただの文字だけの記事」から「今の空気感も伝わる記事」に変わることでした。パターンごとの違いをざっくりまとめると、次のようなイメージです。

パターン	見た目	読者に伝わる情報	特徴
テキストだけの記事	文字中心でシンプル	書き手の意見や説明だけ	すっきりしているが、淡々としやすい
記事内にエックスのポストを埋め込み	画像つきのカードが入って目を引く	実際のポストや第三者の声も見せられる	情報に厚みが出て、読み進めてもらいやすい
サイドバーにタイムラインを埋め込み	横で最新の投稿が流れ続ける	書き手の活動状況や雰囲気が伝わる	ブログが「動いているサイト」に見える

エックス埋め込みをうまく使うと、次のような効果が期待できます。

• トレンド系の記事なら、話題性や「今まさに盛り上がっている感」を出せる
• 商品レビュー記事なら、公式アカウントの情報も一緒に見せられて説得力が増す
• プロフィールページなら、自分の発信スタイルをそのまま見せられる

文章だけだと「本当にそうなのかな？」と思われる部分も、実際のポスト画面を見せるだけで、印象はかなり変わります。

どんなシーンでSWELL×エックス埋め込みが役立つ？

SWELLとエックス埋め込みの相性が良い場面を、もう少し具体的に挙げてみます。

例えばトレンド系の記事なら、「話題になったポスト＋自分の解説」という構成にすると、読者も状況をイメージしやすくなります。レビュー記事なら「公式アカウントの発表＋自分の使用感」という組み合わせにすることで、「ただ紹介しているだけ」という印象をやわらげられます。

このあとの章では、具体的な埋め込み方法を3パターンに分けて解説していきます。

SWELLでエックスのポストを埋め込む3つの基本パターン

方法1：URLを貼るだけでエックスを埋め込む

いちばんシンプルなのが「ポストのURLをそのまま貼るだけ」の方法です。WordPressにもともと用意されている仕組みを使うので、特別な設定は不要です。

流れは次のようなイメージです。

• 埋め込みたいXのポストをブラウザで開く
• 共有メニューなどからポストのURLをコピーする
• SWELLの記事編集画面で、段落ブロックにそのURLをペーストする

うまくいけば、URLが自動的にカード形式の埋め込みに変わります。

この方法の良いところは、次のような点です。

• 操作が直感的で、ブログ初心者でも迷いにくい
• テキストを書きながら、その場でサッとポストを挿入できる

一方で、こんなデメリットもあります。

• テーマやプラグインとの相性で、URLのまま表示されることがある
• 外部サービス側の仕様変更の影響を受けやすい
• 細かいデザイン調整はほとんどできない

「まずは1件試してみたい」というときには便利ですが、本格的に使うなら、次の方法も覚えておくと安心です。

方法2：SWELLの埋め込み（Twitter）ブロックで表示する

SWELLには、最初からエックス向けの埋め込みブロック（名前はTwitterのまま表示されていることが多いです）が用意されています。これを使うと、ブロックとして配置できるので、周りとのバランスを整えやすくなります。

大まかな手順は次のとおりです。

• 記事編集画面で「＋」ボタンを押す
• ブロック一覧から「Twitter」アイコンのブロックを探して選ぶ
• ブロック内に埋め込みたいポストのURLを貼り付ける
• 「埋め込み」ボタンを押してプレビューを確認する

この方法の特徴は、ブロック単位で扱えることです。例えば、次のような点が使いやすくなります。

• キャプション（「こんなツイートがありました」などの説明文）を付けやすい
• 上下の余白や配置を、他のブロックと同じ感覚で調整できる
• SWELLのデザインと合わせて、統一感を出しやすい

ただし、URLをそのまま貼る方法と同じく、環境によってはうまく表示されない場合もあります。SWELLブロックを活用しながら、手軽にエックスを使いたい人に向いている方法です。

方法3：カスタムHTMLでXのコードを貼る（おすすめ）

私が個人的にいちばんおすすめしているのが、「エックス公式の埋め込みコード」を使って、SWELLのカスタムHTMLブロックに貼る方法です。少しだけ手順は増えますが、慣れてしまえば難しくありません。

おおまかな流れは次のようになります。

• ブラウザで埋め込みたいポストを開く
• 共有メニューから「ポストを埋め込む」などの項目を選ぶ
• 表示された画面で、埋め込み用のHTMLコードをコピーする
• SWELLの記事編集画面で「カスタムHTML」ブロックを追加する
• コピーしたHTMLコードをそのまま貼り付けて保存する

カスタムHTMLを使う方法には、次のようなメリットがあります。

• URL方式よりも、動作が比較的安定しやすい
• 必要に応じて高さなどのカスタマイズがしやすい
• 公式の手順に近い形で埋め込めるので安心感がある

一方で、コードをコピー＆ペーストする手間は増えるので、「毎回たくさんのポストを一気に埋め込みたい」という人には少し面倒に感じるかもしれません。

3つの方法の違いを、もう一度まとめておきます。

方法	手間	安定性	カスタマイズ性	向いている人
URLを貼るだけ	とても少ない	環境によっては不安定	ほぼ無し	まずは試しに1件だけ表示したい人
SWELLのTwitterブロック	少ない	URL方式と同程度	キャプションなどは入れやすい	SWELLブロックを中心に使いたい人
カスタムHTML＋埋め込みコード	少しだけ増える	比較的安定しやすい	高さなどの調整がしやすい	長く使うブログで本格的に運用したい人

今後もずっとXを使っていく予定なら、カスタムHTMLでの埋め込みに慣れておくと、テーマや仕様が多少変わっても落ち着いて対応しやすくなります。

SWELLのサイドバーにエックスのタイムラインを埋め込み

エックス公式の埋め込みコードを取得する手順

タイムラインの埋め込みは、エックス側で用意されている埋め込み用のページからコードを取得するのが基本です。細かい画面は変わることがありますが、流れはだいたい共通しています。

• ブラウザでエックスの埋め込み用ページ（Publishなどのサービス）を開く
• 自分のプロフィールやリストなど、タイムラインにしたいページのURLを入力する
• 「タイムライン」「Embedded Timeline」などの形式を選ぶ
• 背景の明るさや高さなどを指定する設定があれば調整する
• 生成されたHTMLコードをコピーする

この時点では、まだコードをコピーしただけです。ここからWordPress側の設定に進みます。

SWELLのウィジェットエリアにタイムラインを設置する

取得したタイムライン用のHTMLコードは、SWELLのウィジェット機能を使ってサイドバーやフッターに設置します。

• WordPress管理画面の「外観」から「ウィジェット」を開く
• タイムラインを表示したいエリア（サイドバーやフッター）を選ぶ
• そのエリアに「カスタムHTML」ウィジェットを追加する
• ウィジェット内にコピーしたHTMLコードを貼り付ける
• 保存して、実際のブログで表示を確認する

ここまでできれば、対象のエリアにエックスのタイムラインが表示されるようになります。表示されない場合は、コードの貼り付けミスや他のウィジェットとの競合がないかも確認してみてください。

タイムライン埋め込みの設定項目とおすすめ値

タイムラインの埋め込みコードを作るときは、いくつか設定項目が出てきます。よくある項目を整理すると、次のような感じです。

設定項目	内容	使いどころの目安
テーマ（ライト／ダークなど）	タイムラインの背景色を選ぶ	ブログ全体の配色に合わせると統一感が出る
高さ	タイムラインの縦の長さ	サイドバーなら短め、フッターなら少し長めに設定する
幅	横幅の指定（自動調整される場合もある）	スマホで横スクロールが出ない程度に収める
言語	タイムラインの表示言語	海外向けや多言語ブログで使うときに便利

最初から細かく調整しようとすると疲れてしまうので、まずはテーマだけブログに合わせておき、高さは実際に表示を見ながら少しずつ変えていくくらいで十分です。

SWELL×エックス埋め込みがうまく表示されないときの対処法

URLのまま表示されてカードにならないとき

いちばんよくあるのが、XのURLを貼ったのに、いつまでたっても文字列のままで、カード型の表示に切り替わらないパターンです。この場合は、まず次の点を確認してみてください。

• URLの前後に余計な文字やスペースが入っていないか
• ブロックの種類が「段落」になっているか（別のブロックだと自動変換されないことがある）
• キャッシュ系プラグインを使っている場合は、一度キャッシュを削除してみたか

それでも解決しない場合は、URLを自動変換する方法にこだわらず、カスタムHTML＋埋め込みコードの方式に切り替えたほうがスムーズです。少し手間は増えますが、表示が安定しやすくなります。

一部のXの投稿だけ表示されないとき

次に、「あるポストは表示されるのに、別のポストだけ真っ白になる」というケースです。この場合は、ブログ側ではなくポスト側に原因があることも多いです。

• ポスト自体が削除されていないか
• 投稿者のアカウントが鍵付きになっていないか
• 見る人を制限する設定がされていないか

まずはブラウザでそのポストのURLを直接開き、通常どおり見られるかをチェックしてみてください。ここで表示されない場合は、ブログに埋め込んでも表示できません。問題のない別のポストに差し替えるのが手っ取り早い解決方法です。

表示が重い・スクロールがガクガクするとき

エックス埋め込みを増やしすぎると、ページの読み込みが重く感じやすくなります。とくにタイムライン埋め込みは、読み込む情報量が多いため、影響が出やすい部分です。

私が実際にやっている対策は次の3つです。

• 1記事に入れるエックス埋め込みの数を、必要最低限に絞る
• タイムラインではなく、代表的な数件だけ単発で埋め込むようにする
• 画像が多いページでは、X埋め込みを減らしてテキスト中心にする

どうしてもたくさんのポストを見せたい場合は、「ポストへのリンク一覧＋代表的な数件だけ埋め込み」という形にすると、読み込み負荷を抑えやすくなります。

トラブルシューティング早見表

ここまでの内容を、ぱっと見で確認できるように表にまとめました。何かおかしいと思ったときに、上から順にチェックしてみてください。

症状	よくある原因	主な対処法
URLのまま表示される	ブロックの種類が合っていない、キャッシュの影響など	段落ブロックで試す、キャッシュ削除、カスタムHTML方式に切り替える
一部のポストだけ真っ白	ポスト削除、鍵アカウント、公開範囲の制限	ブラウザで直接開いて確認し、問題があれば別のポストに差し替える
ページが重く感じる	埋め込み数が多すぎる、タイムラインの読み込み負荷	埋め込み数を減らす、タイムラインではなく単発埋め込みを使う

一度この表を作っておくと、次に同じトラブルが起きたときも落ち着いて対処しやすくなります。

X埋め込みの注意点とSWELLでの安全な使い方

エックスのポストを埋め込むときに意識したいルール

エックスが公式に用意している埋め込み機能を使ってポストを表示するのは、サービス側も想定している使い方です。ただ、そのポストの内容はあくまで投稿者のものであり、自分の言葉として扱うものではありません。

意識しておきたいポイントは次のとおりです。

• 埋め込みは、ポストが公開されていることを前提にしている
• 引用するポストの文脈を変えて紹介しないようにする
• 差別的・攻撃的な内容のポストは、ブログの信用に関わるので避ける

とくに商用ブログやアフィリエイトサイトでは、「誰の発言なのか」「どんな意図で引用しているのか」が読者にも伝わるよう、周りの文章で説明を添えておくと安心です。

スクリーンショットと埋め込みの違い

Xの内容をブログで紹介したいとき、「スクリーンショットを貼る」のと「埋め込みで表示する」のでは、扱いが少し変わります。ざっくり違いを表にすると、次のようなイメージです。

表示方法	特徴	向いている使い方	注意点
エックス埋め込み	公式機能を使って表示され、ポストへのリンクも付く	コメント付きでポストを紹介したいとき	ポストが削除されると表示できなくなる
スクリーンショット	画像として記事に貼る	画面全体の雰囲気を見せたいとき	画像としての扱いになるため、取り扱いにより慎重さが必要

迷ったときは、まずエックス埋め込みを試し、それではどうしても表現が難しい場合にだけスクリーンショットを検討する、くらいの感覚でいると無難です。

SEOとユーザー体験のバランスを取るコツ

エックス埋め込みは便利ですが、あまりにも数が多いとページが重くなり、読み込みに時間がかかってしまいます。これはユーザー体験だけでなく、検索評価にも影響してくる部分です。

私が意識しているのは、次のようなことです。

ブログの主役はあなたの文章で、X埋め込みはそれを裏付けたり、具体例として見せたりする脇役です。この感覚を持っておくと、ちょうどよいバランスで配置しやすくなります。

SWELLブログでエックス埋め込みを活かす具体的な活用例

トレンド・ニュース系ブログでの活用例

トレンドやニュースを扱うブログでは、「今話題になっているポスト」をそのまま見せられるのが大きな強みです。

• 話題のニュースポストを埋め込み、その下で自分の解説を書く
• 複数ユーザーの反応ポストを並べて「世間の声」を見せる
• 自分がいち早く投稿した速報ポストを載せて、情報発信力をアピールする

ただしポストを貼りすぎると、読み進めるのが大変になります。「代表的な数件のポスト＋自分のまとめ」という構成にすると、情報量が多くてもスッキリ見せやすくなります。

商品レビュー・アフィリエイト記事での活用例

商品レビューやアフィリエイト記事とエックス埋め込みは、とても相性が良い組み合わせです。エックス側の情報を組み合わせることで、読者に安心感を持ってもらいやすくなります。

こうしたエックス埋め込みと、自分のレビュー文章を組み合わせることで、「公式情報＋利用者の声＋自分の意見」というバランスの良い記事に仕上げることができます。

プロフィール・実績紹介ページでの活用例

プロフィールや運営者情報ページに、SWELLのウィジェットを使ってXのタイムラインを載せるのもおすすめです。

• 普段どんなテーマで発信しているかが一目で分かる
• 更新頻度や活動量の雰囲気が伝わる
• 読者が「この人をフォローしてみようかな」と感じやすくなる

とくにコンサル系や制作者系のブログでは、「どんな考え方をしている人なのか」を知ってもらうのに役立ちます。

ブログのタイプごとの活用イメージをまとめると、次のような感じです。

ブログのタイプ	エックス埋め込みの例	ねらえる効果
トレンド・ニュース系	話題ポスト＋自分の解説	速報性、話題性、読者の共感
レビュー・アフィリエイト	公式ポスト、ユーザーの感想、自分の使用感ポスト	信頼性、説得力、購入後のイメージ
自己紹介・ポートフォリオ	自分のタイムラインや固定ポスト	人柄や活動内容を伝える、ファン化につなげる

「あなたの読者が、どんな情報を見られたらうれしいか」を想像しながらポストを選ぶと、エックス埋め込みが一気に使いやすくなります。

SWELL×エックス埋め込みのよくある質問

Q1. SWELLでエックスを埋め込みするとき、何個まで貼っても大丈夫ですか？

A. 明確な上限が決まっているわけではありませんが、SWELLでXを埋め込む数が増えるほどページは重くなりやすいです。私の目安としては、1記事につき3〜5件程度までに抑えることが多いです。

どうしてもたくさん紹介したい場合は、すべてを埋め込みにするのではなく、「代表的なポストだけ埋め込み＋他はリンクで紹介」という形にすると、読み込みの重さを抑えつつ情報も届けやすくなります。

Q2. SWELLのサイドバーにXのタイムラインを埋め込みすると、スマホではどう表示されますか？

A. 多くの場合、SWELLのサイドバーはスマホだと記事の下部に回り込んで表示されます。エックスのタイムラインを埋め込んだ場合も同じで、スマホの画面幅に合わせて縦方向に表示されることが一般的です。

設定時には、次の点を確認しておくと安心です。

• スマホ表示で横スクロールが出ていないか
• 高さが長すぎて、記事の下に巨大なタイムラインができていないか

実機やプレビューで確認しながら、必要であれば埋め込みコード側の高さを少し調整してあげるとバランスが良くなります。

Q3. エックスのポストをSWELLで埋め込みするのと、スクリーンショットを貼るのはどちらがいいですか？

A. 基本的には、まずエックス埋め込みを優先するのがおすすめです。公式の仕組みを使って表示されるため、ポストへのリンクも自動で付きますし、見た目もそのまま再現しやすいです。

スクリーンショットは、どうしても埋め込みでは表現しづらい場合や、画面全体の流れをまとめて見せたい場合にだけ検討するとバランスが取りやすくなります。

SWELLでエックスを埋め込むまとめ

このページの内容を振り返ります

今日からできる最初の一歩としては、まずどれか1つの記事を開いて、カスタムHTMLブロックを使い、自分が紹介したいエックスのポストを1件だけ埋め込んでみてください。

そのうえで、パソコンとスマホの両方で表示を確認し、「どの記事に、どんなポストを置くと読みやすくなるか」「どこまでなら重くならないか」を少しずつ試していけば、SWELLでのX埋め込みは自然と自分のものになっていきます。