ドールと文章の置き場所https://example.com/jahttps://example.com/posts/embed-test/https://example.com/posts/embed-test/XとInstagramの投稿をiframeで埋め込む表示テスト用の記事です。実際の投稿URL（共有パラメータ付き）で検証しています。Fri, 30 Oct 2026 00:00:00 GMT<p>import XEmbed from "@components/embeds/XEmbed.astro"; import InstagramEmbed from "@components/embeds/InstagramEmbed.astro";</p> <p>XとInstagramの投稿を、noteのようにそのまま記事内で表示するためのテスト記事です。記事に書くのは投稿のURLだけで、埋め込み用のiframeは専用コンポーネントが自動で生成します。</p> <p>いま表示されているのは実際の投稿です。URLは共有時に付くパラメータ（?s=46 など）を含んだまま書いてあり、コンポーネント側で投稿IDだけを抽出して埋め込んでいます。</p> <h2>Xの投稿</h2> <p>&lt;XEmbed url="https://x.com/pomo_bjd/status/2045004591864135693?a=23csznbAHHZ1zdtoPdI&amp;s=46" /&gt;</p> <h2>Instagramの投稿</h2> <p>&lt;InstagramEmbed url="https://www.instagram.com/p/DdwT6nuiazp/?mdxt=bzZodmZpd2huNjFx" /&gt;</p> <h2>仕組みについて</h2> <ul> <li>URLの形式が正しい場合だけ、iframeが生成されます</li> <li>形式が違うURLは埋め込まれず、通常のリンクとして表示されます</li> <li>埋め込み用の外部スクリプト（widgets.jsなど）は読み込みません</li> </ul> https://example.com/posts/hello-prototype/https://example.com/posts/hello-prototype/個人ブログの試作ページです。noteと並行して、自分の場所にも文章を置いておくための準備をしています。Fri, 30 Oct 2026 00:00:00 GMT<p>これは試作中の個人ブログの、最初のサンプル記事です。ふだんはnoteに文章を書いていますが、自分のドメインにも文章の置き場所を持ちたいと思い、このブログを準備しています。</p> <p>デザインは、ドールの写真が映えるように、大きなバナーとカード型の記事一覧があるテーマを選びました。テーマカラーは写真に合わせて淡いピンクにしています。</p> <h2>このブログでやること</h2> <ul> <li>noteに書いた文章のアーカイブ置き場にする</li> <li>noteには載せない短いメモや日記も書く</li> <li>XやInstagramの投稿を、記事の中に埋め込んで紹介する</li> </ul> <h2>使い方の方針</h2> <p>記事はMarkdownで書きます。むずかしい機能は足さず、まずは「書く・公開する」が気持ちよくできる形を優先します。コメント欄やフォームは、必要になるまで付けない予定です。</p> <p>次の記事では、XとInstagramの埋め込み表示のテストをしています。実際にどう見えるかは、そちらで確認できます。</p>