このサンプル記事は Engineer Blog テーマ で利用できる全てのフォーマット・スタイルを網羅したリファレンスです。記事を書く際のテンプレートとしてご活用ください。
対象読者: このテーマで記事を書くすべてのライター
最終更新: 2026年2月
見出しスタイル（H2 / H3 / H4）
見出しは記事の構造を定義し、自動的に目次（TOC）が生成されます。H2とH3が目次に表示されます。
H3 見出し — サブセクション
H3はグリーンのアクセントカラー左ボーダーで表示されます。セクション内の小項目に使用します。
H4 見出し — 小見出し
H4は目次には含まれませんが、さらに細かい項目の区切りとして使えます。
テキストフォーマット
基本的なテキスト装飾
テキストには以下の装飾が使えます：
- 太字（Bold） — 重要なキーワードの強調に
- 斜体（Italic） — 補足的な強調に
- 太字 + 斜体 — 最大限の強調に
インラインコード— コマンドや変数名に（例:npm install、useState）- リンクテキスト — 外部・内部リンク
打ち消し線— 訂正時に使用
段落と改行
Engineer Blog テーマは日本語に最適化されたタイポグラフィを採用しています。行間は 1.85 に設定され、長文でも快適に読めます。フォントは Noto Sans JP を基本としています。
段落間には適切なスペースが自動的に挿入されます。一つの段落は3〜5文程度にまとめると、読みやすい記事になります。
リスト表示
番号なしリスト（ul）
- フロントエンド開発
- React / Next.js
- Vue.js / Nuxt
- Svelte / SvelteKit
- バックエンド開発
- Node.js / Express
- Python / FastAPI
- Go / Gin
- インフラ・DevOps
番号付きリスト（ol）
- 要件定義 — ゴールと制約を明確にする
- 設計 — アーキテクチャと技術選定
- 実装 — AI駆動でコードを生成
- テスト — 品質を担保する
- デプロイ — CI/CDで自動化
引用（Blockquote）
引用ブロックはグラデーションの左ボーダーと薄いパープル背景で表示されます。
良いコードとは、コンピュータが理解できるコードではない。
人間が理解できるコードだ。
— Martin Fowler
ポイント: blockquote の中で
strongやcodeも使えます。複数の段落を含めることも可能です。2段落目の引用テキスト。ネストされた引用も対応しています。
コードブロック（Prism.js 対応12言語）
コードブロックには自動で言語ラベルが右上に表示されます。以下、サポートしている12言語すべてのサンプルです。
JavaScript
// React コンポーネントの例
import { useState, useEffect } from 'react';
export function useDebounce(value, delay = 300) {
const [debouncedValue, setDebouncedValue] = useState(value);
useEffect(() => {
const timer = setTimeout(() => setDebouncedValue(value), delay);
return () => clearTimeout(timer);
}, [value, delay]);
return debouncedValue;
}TypeScript
interface Article {
id: number;
title: string;
content: string;
tags: string[];
publishedAt: Date;
}
async function fetchArticles(page: number = 1): Promise<Article[]> {
const res = await fetch(`/api/articles?page=${page}`);
if (!res.ok) throw new Error(`HTTP ${res.status}`);
return res.json();
}Python
from dataclasses import dataclass
from typing import Optional
import httpx
@dataclass
class Config:
api_key: str
base_url: str = "https://api.example.com"
timeout: int = 30
async def call_llm(prompt: str, config: Config) -> Optional[str]:
"""LLM APIを呼び出して応答を取得する"""
async with httpx.AsyncClient(timeout=config.timeout) as client:
response = await client.post(
f"{config.base_url}/v1/chat",
headers={"Authorization": f"Bearer {config.api_key}"},
json={"messages": [{"role": "user", "content": prompt}]},
)
response.raise_for_status()
return response.json()["choices"][0]["message"]["content"]PHP
<?php
/**
* カスタム投稿タイプの登録
*/
function register_custom_post_type(): void {
register_post_type('portfolio', [
'labels' => [
'name' => 'ポートフォリオ',
'singular_name' => 'ポートフォリオ',
],
'public' => true,
'has_archive' => true,
'supports' => ['title', 'editor', 'thumbnail'],
'show_in_rest' => true,
]);
}
add_action('init', 'register_custom_post_type');Bash
#!/bin/bash
# デプロイスクリプト
set -euo pipefail
PROJECT_DIR="/var/www/app"
BRANCH="${1:-main}"
echo "=== デプロイ開始: $BRANCH ==="
cd "$PROJECT_DIR"
git fetch origin
git checkout "$BRANCH"
git pull origin "$BRANCH"
npm ci --production
npm run build
pm2 restart ecosystem.config.js
echo "=== デプロイ完了 ==="Go
package main
import (
"encoding/json"
"log"
"net/http"
)
type Response struct {
Message string `json:"message"`
Status int `json:"status"`
}
func healthHandler(w http.ResponseWriter, r *http.Request) {
resp := Response{Message: "OK", Status: 200}
w.Header().Set("Content-Type", "application/json")
json.NewEncoder(w).Encode(resp)
}
func main() {
http.HandleFunc("/health", healthHandler)
log.Fatal(http.ListenAndServe(":8080", nil))
}Rust
use serde::{Deserialize, Serialize};
#[derive(Debug, Serialize, Deserialize)]
struct Article {
title: String,
content: String,
views: u64,
}
impl Article {
fn reading_time(&self) -> u64 {
let chars = self.content.chars().count() as u64;
std::cmp::max(1, chars / 600)
}
}
fn main() {
let article = Article {
title: "Rustで学ぶメモリ安全".to_string(),
content: "本文...".repeat(100),
views: 42,
};
println!("読了時間: {}分", article.reading_time());
}SQL
-- 人気記事のランキング取得
SELECT
p.ID,
p.post_title,
CAST(pm.meta_value AS UNSIGNED) AS views,
GROUP_CONCAT(t.name) AS categories
FROM wp_posts p
INNER JOIN wp_postmeta pm
ON p.ID = pm.post_id
AND pm.meta_key = '_engineer_blog_views'
LEFT JOIN wp_term_relationships tr ON p.ID = tr.object_id
LEFT JOIN wp_term_taxonomy tt ON tr.term_taxonomy_id = tt.term_taxonomy_id
LEFT JOIN wp_terms t ON tt.term_id = t.term_id
WHERE p.post_status = 'publish'
AND p.post_type = 'post'
GROUP BY p.ID
ORDER BY views DESC
LIMIT 10;JSON
{
"name": "engineer-blog",
"version": "1.0.0",
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
"lint": "eslint . --ext .ts,.tsx"
},
"dependencies": {
"next": "^15.0.0",
"react": "^19.0.0",
"typescript": "^5.7.0"
}
}YAML
# GitHub Actions CI/CD
name: Deploy
on:
push:
branches: [main]
jobs:
deploy:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v4
- uses: actions/setup-node@v4
with:
node-version: 22
cache: npm
- run: npm ci
- run: npm run build
- run: npm test
- name: Deploy to production
run: |
echo "Deploying..."
rsync -avz ./dist/ server:/var/www/app/Diff
--- a/config.ts
+++ b/config.ts
@@ -1,5 +1,7 @@
export const config = {
apiUrl: process.env.API_URL,
- timeout: 5000,
+ timeout: 30000,
+ retries: 3,
+ retryDelay: 1000,
debug: process.env.NODE_ENV !== 'production',
};Markdown
# 記事タイトル
## セクション1
本文テキスト。**太字** と *斜体* のサンプル。
- リスト項目1
- リスト項目2
```javascript
console.log("Hello");
```テーブル
テーブルは角丸・シャドウ付きで表示され、行ホバーでハイライトされます。
技術選定比較テーブル
| 項目 | React | Vue.js | Svelte |
|---|---|---|---|
| 学習コスト | 中〜高 | 低〜中 | 低 |
| パフォーマンス | 良好 | 良好 | 優秀 |
| エコシステム | 最大 | 大 | 成長中 |
| TypeScript対応 | 完全 | 完全 | 完全 |
| バンドルサイズ | 42KB | 33KB | 1.6KB |
| 求人数（2026年） | 圧倒的多数 | 多い | 増加中 |
スキルマトリクステーブル
| レベル | 名称 | 技術スキル | ヒューマンスキル |
|---|---|---|---|
| L1 | ビギナー | AI補完を活用できる | タスク分解できる |
| L2 | プラクティショナー | プロンプト設計ができる | レビューで改善提案できる |
| L3 | アドバンスド | AIワークフローを構築できる | チームの生産性を向上できる |
| L4 | エキスパート | AI戦略を策定できる | 組織変革をリードできる |
Mermaid.js 図解
コードブロックに language-mermaid を指定すると、自動的にダイアグラムとしてレンダリングされます。
フローチャート
graph TD
A[要件定義] --> B{AIで実装可能?}
B -->|Yes| C[プロンプト設計]
B -->|No| D[手動実装]
C --> E[AI生成]
E --> F[レビュー]
D --> F
F -->|OK| G[テスト]
F -->|修正必要| C
G --> H[デプロイ]シーケンス図
sequenceDiagram
participant U as ユーザー
participant F as フロントエンド
participant A as API
participant D as データベース
U->>F: 記事を検索
F->>A: GET /api/search?q=AI
A->>D: SELECT文実行
D-->>A: 結果セット
A-->>F: JSON応答
F-->>U: 検索結果を表示ガントチャート
gantt
title プロジェクトスケジュール
dateFormat YYYY-MM-DD
section 設計
要件定義 :a1, 2026-01-01, 14d
アーキテクチャ設計 :a2, after a1, 7d
section 開発
フロントエンド :b1, after a2, 21d
バックエンド :b2, after a2, 21d
API結合 :b3, after b1, 7d
section テスト
単体テスト :c1, after b3, 7d
E2Eテスト :c2, after c1, 7dクラス図
classDiagram
class Article {
+int id
+string title
+string content
+Date publishedAt
+getReadingTime() int
+toJSON() object
}
class Category {
+int id
+string name
+string slug
}
class Tag {
+int id
+string name
}
Article "1" --> "*" Tag : has
Article "*" --> "1" Category : belongs to画像の表示
画像は自動的に角丸とセンタリングが適用されます。キャプション付きの画像も対応しています。
（実際の記事では <img> タグまたは WordPress メディアライブラリから画像を挿入してください）
インラインコードの活用例
インラインコードは 紫色のテキスト にグラデーション背景で表示されます。技術記事でよく使うパターン：
- コマンド:
npm install、docker compose up -d - 変数名:
useState、useEffect、async/await - ファイルパス:
src/components/Header.tsx - 設定値:
port: 3000、timeout: 30000 - キーボード:
Ctrl+Kで検索、Ctrl+Sで保存
複合レイアウトの例
ステップバイステップガイド
以下のように、番号付きリスト + コードブロック + 説明文を組み合わせて、手順を分かりやすく解説できます。
- プロジェクトの初期化
npx create-next-app@latest my-blog --typescript --tailwind --app
cd my-blog- 依存パッケージのインストール
npm install @prisma/client zod next-auth
npm install -D prisma @types/node- 環境変数の設定
# .env.local
DATABASE_URL="postgresql://user:pass@localhost:5432/mydb"
NEXTAUTH_SECRET="your-secret-key"
NEXTAUTH_URL="http://localhost:3000"注意:
.env.localは.gitignoreに含めてください。シークレット情報をリポジトリにコミットしてはいけません。
テーマ自動機能一覧
以下の機能は記事を書くだけで自動的に適用されます：
| 機能 | 説明 | 設定 |
|---|---|---|
| 目次（TOC） | H2/H3から自動生成、スクロール追従 | 不要 |
| 読了時間 | 日本語600文字/分で自動計算 | 不要 |
| 閲覧数 | ページビューを自動カウント | 不要 |
| リーディングプログレスバー | 読み進め具合をページ上部に表示 | 不要 |
| パンくずリスト | カテゴリに基づき自動生成 | 不要 |
| シェアボタン | X / Facebook / はてブ / URLコピー | 不要 |
| 著者プロフィール | WPユーザー情報から自動表示 | プロフィール設定 |
| 関連記事 | 同カテゴリ・タグから自動抽出 | 不要 |
| クロスプラットフォームCTA | note/Qiita/Zennへの誘導 | カスタマイザー |
| OGP/SEO | メタタグ・構造化データ自動出力 | SEOメタボックス |
| GA4イベント | 読了率・CTAクリック・コードコピー | カスタマイザー |
| Mermaidレンダリング | コードブロックを図解に自動変換 | 不要 |
| コード言語ラベル | コードブロック右上に言語名表示 | 不要 |
まとめ
Engineer Blog テーマは、技術記事に必要なフォーマットをすべてサポートしています。特に以下のポイントが特徴です：
- 12言語のシンタックスハイライト — フロントエンド・バックエンド・インフラまでカバー
- Mermaid.js による図解 — フローチャート・シーケンス図・ガントチャート・クラス図
- 日本語に最適化されたタイポグラフィ — 読みやすい行間・フォント設定
- 自動生成される目次とメタ情報 — 読了時間、閲覧数、パンくずリスト
- マルチプラットフォーム展開 — シェアボタンとCTAで読者を他媒体に誘導
この記事をテンプレートとして、見出し構造やコードブロックの書き方を参考にしてください。