本記事は、「2026年の簡易ブログシステム」の技術デモです。 マークダウンに加えて、MDX によるインタラクティブでリッチな要素を簡単に記事内に配置できます。

1. 文字修飾（インラインスタイル）

文章の中で特定のキーワードを強調するための、2026年最新トレンドカラーに基づいたインライン装飾です。

  • 黄色マーカー（Muted Gold）：標準マークダウンの HTML <mark> タグを拡張し、目に優しい 半透明のミュートゴールド で文字の背景を塗りつぶします。
  • 赤文字（Deep Cherry Red）：原色のどぎつい赤を避け、上品で視認性の高い ディープチェリーレッド で文字を強調します。

ビルド時に自動で OGP 情報を取得し、ローカルにデータをキャッシュした上で静的な HTML カードをレンダリングします。 これにより、クライアントサイドでのフェッチ遅延や CLS（累積レイアウトシフト）を完全に防ぎます。

Google
世界中のあらゆる情報を検索するためのツールを提供しています。さまざまな検索機能を活用して、お探しの情報を見つけてください。
google.com

3. 吹き出し（Speech Bubble）

会話形式での解説に欠かせない吹き出し要素です。 左右の配置切り替え、アバター画像の設定が可能です。 画像がない場合は、ライセンスフリーの SVG アバターが自動的にフォールバック表示されます。

開発者

Astro をベースに構築しているため、JavaScript をほとんどブラウザに送信せず、瞬時に読み込みが完了します！

読者

確かに読み込みが非常に速いですね。MDX を使うことで執筆もスムーズになりそうです。

4. 囲み記事（Checkpoint）

重要な注意点やまとめを際立たせるための、左端に太線とチェックマークが入った囲み枠です。 アイコンには MIT ライセンスの Lucide Icons の SVG をコードへインライン展開して使用しています。

ビルド速度とキャッシュの仕組み

外部リンクカードは、ビルド時に外部サイトから OGP 情報をスクレイピングします。 初回ビルド時は通信が発生しますが、2回目以降はプロジェクト内のローカルキャッシュを参照するため、ビルド速度が大幅に向上します。

5. 用語説明枠（Definition List）

用語とその定義をすっきりとグリッド状に並べるためのコンポーネントです。 スマホでは自動的に縦並びに最適化されるレスポンシブ設計です。

Astro

HTMLを最優先し、必要な部分だけ JavaScript を適用する「アイランドアーキテクチャ」を採用した、現代的な静的サイトジェネレーターです。

MDX

Markdownの中に JSX（コンポーネント）を直接記述できるようにしたフォーマットです。執筆の手軽さと表現の柔軟性を両立します。

6. 内部リンクのサンプル

ブログ内の他の記事へリンクする場合、以下のように標準の Markdown 記法で相対パス、または絶対パスを記述します。

7. 画像貼り付けのサンプル

Astro と MDX 環境では、記事の中に画像を貼り付ける方法として以下の 2つの手段が利用可能です。

案A：標準的な Markdown 画像記法

記事ファイル（MDX）と同じフォルダ、または相対パスで配置した画像を通常のマークダウン記法で読み込みます。 ビルド時に Astro が自動で画像を検出し、最適化（WebP形式への自動変換、リサイズなど）を行って配信します。

![技術イラスト](./tech_illustration.png)

実際の表示結果： 技術イラスト（標準記法）

案B：Astro 組み込みの Image コンポーネント（推奨）

MDX では、Astro が提供する高機能な画像最適化コンポーネント <Image /> をインポートして直接利用できます。 画像の縦横サイズ、アスペクト比、レイアウトシフト（CLS）防止などをコードレベルで厳密に制御できます。

import { Image } from 'astro:assets';
import techIllustration from './tech_illustration.png';

<Image src={techIllustration} alt="最適化された技術イラスト" width={600} />

実際の表示結果（幅 600px に最適化）：

最適化された技術イラスト

案C：クリックで最大化表示可能なズーム画像（追加機能）

画像をサムネイル表示し、クリックすると美しいライトボックス（モーダルダイアログ）で画面いっぱいに最大化表示します。 キーボード操作（ESCキー）や背景クリックでの閉じる動作など、アクセシビリティにも配慮した Vanilla JS 実装です。

import ZoomImage from '../../components/ZoomImage.astro';
import techIllustration from './tech_illustration.png';

<ZoomImage src={techIllustration} alt="拡大可能な技術イラスト" width={600} />

実際の表示結果（クリックして最大化できます）：

拡大可能な技術イラスト