index

全要素サンプル記事

全要素サンプル記事

ブログで使える見出し・リスト・コード・脚注など全要素のサンプルと、テーマ上の注意点をまとめた記事です。

11min
sample guide test

この記事は、ブログで使用可能な全ての要素を含むサンプル記事です。

見出しの例

H3見出し

このテーマではH4以降の見出しは定義されていませんが、必要に応じて src/styles/post.css で定義できます。

テキスト装飾

通常のテキストに加えて、太字、イタリック、取り消し線、そしてインラインコードを使用できます。

複数の装飾を組み合わせることも可能です：太字かつイタリック、コード内の**太字**は表示されません。

引用

優れたコードは、それが何をするのかを明確に示すべきです。

— Martin Fowler1

リスト

順序付きリスト

  1. 最初の項目
  2. 2番目の項目
  3. 3番目の項目
    1. ネストされた項目
    2. もう一つのネスト項目

順序なしリスト

  • 項目1
  • 項目2
    • サブ項目A
    • サブ項目B
  • 項目3

画像

プラグインで最適化したwebp画像
プラグインで最適化したwebp画像

タスクリスト

テーブル

機能説明対応状況
Markdown基本的なMarkdown記法✅ 対応
MDXReactコンポーネントの使用✅ 対応
コードハイライトシンタックスハイライト✅ 対応
埋め込みコンテンツYouTube、Spotifyなど✅ 対応

テーブル内でもイタリック、太字、コードを使用できます。

HTML要素

下付き文字と上付き文字

化学式: H2O（水）

数学式: Xn + Yn = Zn（フェルマーの最終定理）

略語

HTML と CSS はウェブ開発の基礎です。

キーボード入力

ショートカットキー: CTRL + C でコピー、CTRL + V で貼り付け。

ハイライト

重要な部分をハイライト表示できます。

コードブロック

TypeScript（タイトル付き + 行ハイライト）

types.ts
interface User {
  id: number
  name: string
  email?: string
}


const user: User = {
  id: 1,
  name: 'John Doe',
  email: 'john@example.com'
}


function greet(user: User): string {
  return `Hello, ${user.name}!`
}

JavaScript（タイトル付き）

utils.js
export function debounce(func, wait) {
  let timeout
  return function executedFunction(...args) {
    const later = () => {
      clearTimeout(timeout)
      func(...args)
    }
    clearTimeout(timeout)
    timeout = setTimeout(later, wait)
  }
}

Python（複数行ハイライト）

fibonacci.py
def fibonacci(n: int) -> list[int]:
    """フィボナッチ数列を生成"""
    if n <= 0:
        return []
    elif n == 1:
        return [0]
    elif n == 2:
        return [0, 1]


    fib = [0, 1]
    for i in range(2, n):
        fib.append(fib[i-1] + fib[i-2])
    return fib


print(fibonacci(10))

Rust

main.rs
fn main() {
    let numbers = vec![1, 2, 3, 4, 5];
    let doubled: Vec<i32> = numbers
        .iter()
        .map(|x| x * 2)
        .collect();


    println!("{:?}", doubled);
}

CSS（行ハイライト）

button.css
.button {
  padding: 12px 24px;
  background-color: var(--color-primary);
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.2s;
}


.button:hover {
  background-color: var(--color-primary-hover);
}

埋め込みコンテンツ

本文で次のように 1行に URL だけ書くとリンクカードになります（remark-link-card-plus、astro.config.ts）。

imaikosuke | Portfolio
imaikosuke - Personal Portfolio
imaikosuke.com
Astro
Astro builds fast content sites, powerful web applications, dynamic server APIs, and everything in-between.
astro.build

YouTube

YouTube video

Spotify

単独行の URL を 1 行に書くと埋め込みます（クリックでプレーヤーを読み込み）。track / album / playlist / artist / show / episode と、intl-xx 付きパスに対応しています。

トラック：

アルバム：

プレイリスト：

アーティスト：

ポッドキャスト（ショー）：

エピソード：

ロケール付き URL（intl-ja など。埋め込みは /embed/{種類}/{id} に正規化されます）：

GitHubリポジトリ

リポジトリのトップ URL を単独の段落に置くとカードになります（/issues などサブパス付きはリンクカード等の対象になります）。

withastroastro

The web framework for content-driven websites. ⭐️ Star to support our work!

  • astro
  • blog
  • browser
TypeScript ★ 59.5K 3.5K

X（旧Twitter）投稿

imaikosuke@imaikosuke_

株式会社monopo Tokyo
約半年間お世話になりました！
出会いに感謝。

9:19 AM · Apr 4, 2026
0

画像

画像には自動的にキャプションが追加されます（altテキストがある場合）。

Astroロゴ
Astroロゴ

キャプションを非表示にするには、altテキストを空にするか、アンダースコアで始めます：

Astroロゴ
Astroロゴ

脚注の例

この文章には脚注2が含まれています。複数の脚注3も使用できます。

複合的な例

以下は、複数の要素を組み合わせた例です：

重要: このブログは以下の技術スタックを使用しています：

  1. Astro（新しいタブで開く） - 静的サイトジェネレーター
  2. TypeScript - 型安全性
  3. Markdown/MDX - コンテンツ記述

詳細は公式ドキュメント（新しいタブで開く）を参照してください4。

まとめ

この記事では、ブログで使用可能な以下の要素を紹介しました：

  • ✅ 基本Markdown要素（見出し、段落、リスト、テーブルなど）
  • ✅ テキスト装飾（太字、イタリック、コードなど）
  • ✅ HTML要素（sub, sup, abbr, kbd, mark）
  • ✅ コードブロック（複数言語対応、シンタックスハイライト）
  • ✅ 埋め込みコンテンツ（YouTube・Spotify・X・GitHub リポジトリは単独行 URL、リンクカード）
  • ✅ 画像（キャプション付き）
  • ✅ 脚注
  • ✅ 引用

これらの要素を組み合わせることで、豊富なコンテンツを作成できます。

Footnotes

  1. この引用はMartin Fowlerの著書「リファクタリング」からのものです。 ↩

  2. これは最初の脚注です。 ↩

  3. これは2番目の脚注です。脚注内でも太字やイタリック、コードを使用できます。 ↩

  4. Astroの公式ドキュメントは非常に充実しています。 ↩