4 マガジンを書いて公開する（編集部）
付録C — Claude Code が書いた運用マニュアル
3-3 運用マニュアルを作るで、Claude Code が管理画面を撮りながら書いたものを、人の手を入れずに載せています。画面のアドレスが localhost:8090 なのは、チュートリアルを手元の MT で進めたためです。
読み物の記事（インタビュー・特集・データなど）を出します。 公開されると /magazine/○○/ のページになり、マガジンの一覧とフィード（/magazine/feed.xml）にも出ます。トップページには、情報システムの再構築のあとで出ます。
マガジンの本文は、ブロックを積み重ねて書きます。段落や見出しは「テキストブロック」、写真は「画像ブロック」、引用・数字・Q&A などの見せ場は「HTML ブロック」に用意した雛形を貼って、かぎ括弧の中の文字だけを書き換えます。HTML が分からなくても、雛形を使えば大丈夫です。
4-1 書く前に用意するもの
| 項目 | 内容 | 必須 |
|---|---|---|
| タイトル | 記事の見出し。短く。例：「10年後も美しい家」 | ○ |
| サブタイトル | タイトルの下に出る1行の補足。一覧のカードにも出ます | ○ |
| クレジット | 記事の上に出る「文・写真」の表記。例：文・FIVE マガジン編集部 写真・佐伯 光（間は全角スペース） | ○ |
| 見出し写真 | 記事の上いっぱいに出る大きな写真。一覧・トップのカードにも使います | ○ |
| 種類（カテゴリ） | 下の表から1つ | ○ |
| タグ | 記事の下に #建築 のように出ます | 任意 |
| 本文 | ブロックで書きます（4-3） | ○ |
| 出力ファイル名 | URL の最後の部分。例：ten-years-beautiful | ○ |
| 種類 | こんなとき | 画面に出る名前 |
|---|---|---|
| 特集 | 特集・読みもの | Feature |
| インタビュー | 人へのインタビュー | Interview |
| 暮らし | 滞在・暮らしの話 | Life |
| テクノロジー | 技術・AI・研究の話 | Technology |
| データ | 数字で見る話 | Data |
見出し写真のつくりかた：横長で、幅 1600 ピクセル以上。WebP か JPEG。ファイル名は半角の英数字にします。 「読了 約○分」 は、本文の文字数から自動で出ます。入力は要りません。
4-2 記事の枠をつくる
1. 入力する欄を出す（はじめての1回だけ）
マガジンの作成画面には、最初は出ていない欄があります。
- 左のメニューの［記事］→［新規］で、作成画面を開きます。
- 右上の［表示オプション］を押します。
- 「フィールド」の中の ［クレジット］［見出し写真］ にチェックを入れます。
- もう一度［表示オプション］を押して閉じます。
この設定は、あなたの画面に残ります。次からは不要です。
2. タイトル・サブタイトル・クレジット・タグを入れる
作成画面を開いたところです（［表示オプション］で、クレジットと見出し写真の欄を出したあと）。
入力が終わると、次のようになります。
- 「タイトル」「サブタイトル」「クレジット」を入れます。
- 「タグ」は、カンマ（,）で区切って入れます（例：
建築,デザイン,FIVE OWN）。タグは、記事の下に名前順に並んで出ます。
3. 見出し写真を入れる
- 「見出し写真」の［画像を選択］を押します。
- ［アップロード］を押して、写真のファイルを選びます。
- 写真が表示されて選ばれた状態になったら、［挿入］を押します。
すでに上げた写真を使うときは、同じ画面に並んでいる写真をクリックして選び、［挿入］を押します。
4. 種類・出力ファイル名・ステータスを決める
右側の欄で設定します。
- カテゴリ：種類を1つだけ選んでチェック
- 出力ファイル名：［編集］を押して、半角の英小文字・数字・ハイフンで入れる（1 章）
- ステータス：書きかけのうちは「未公開(原稿)」、公開するときに「公開」
4-3 本文を書く
本文の欄にある ［T］（テキスト）・［画像］・［ファイル］のアイコンと、［＋ ブロックを追加］で、ブロックを足していきます。
テキストブロック（段落と見出し）
- ［T］のアイコンを押すと、文章を書くブロックが増えます。
- 書きたい文章を入れます。上の道具で、太字やリンクも付けられます。
- 小見出しは、道具の「段落」と書かれたプルダウンから「見出し 2」を選びます（Windows のキーボードなら、見出しにしたい行にカーソルを置いて
Ctrl+Alt+2）。
見出しは「見出し 2」だけを使います（ほかの見出しは、サイトのデザインにありません）。
画像ブロック（本文の中の写真）
- ［画像］のアイコンを押します。
- ［アップロード］で写真を上げて（または並んでいる写真を選んで）、［挿入］を押します。
公開されたページでは、写真は本文の幅いっぱいに、角を丸くして出ます。キャプション（写真の下の説明）は付きません。 キャプションを付けたいときは、下の「写真（キャプションつき）」の雛形を使います。
HTML ブロック（引用・数字・Q&A などの見せ場）
見せ場は、「HTML」ブロックに雛形を貼ってつくります。
［＋ ブロックを追加］を押して、出てきた一覧から ［HTML］ を選びます。
現れた白い欄に、下の雛形を貼ります。
雛形の 【 】で囲まれた部分を、【 】ごと、書きたい文字に書き換えます。
雛形
見せ場の種類ごとに、そのままコピーして使います。
質問（インタビューの聞き手の質問）
<div class="fu-mag-qa"><p>【質問の文】</p></div>引用（大きく見せたい一言）
<blockquote class="fu-mag-pullquote"><p>【引用の文】</p><p>【発言した人】</p></blockquote>数字（大きな数字と、その説明）
<div class="fu-mag-number"><p>【23,000人】</p><p>【数字の説明】</p></div>注記（記事の終わりの断り書きなど）
<div class="fu-mag-note"><p>【注記の文】</p></div>写真（キャプションつき）（本文の幅の写真と、下の説明）
<figure><img src="【写真のURL】" alt="【写真の説明】"><figcaption>【写真の説明】</figcaption></figure>写真（ワイド）（横幅いっぱいの大きな写真と、下の説明）
<figure class="fu-mag-wide"><img src="【写真のURL】" alt="【写真の説明】"><figcaption>【写真の説明】</figcaption></figure>人物紹介（記事の最後に出す、顔写真つきの紹介）
<div class="fu-mag-profile"><img src="【顔写真のURL】" alt="【氏名】"><div><p>【氏名（よみ）】</p><p>【肩書きと経歴】</p></div></div>雛形を使うときの注意
class="…"や<div><p>などの記号は、書き換えないでください。 見た目が崩れます。書き換えるのは、【 】の中の文字だけです。- 1つの HTML ブロックには、雛形を1つだけ入れます。いくつか続けたいときは、ブロックを追加して分けます。
- 文章の中に
<>&を書きたいときは、<>&と書きます。 - HTML ブロックは、画面の上では見た目ではなく文字（HTML）のままに見えます。見た目は［プレビュー］で確かめます。
- ブロックの並べ替えは、ブロックの左の矢印（上へ・下へ）か、ドラッグで行います。ブロックを消すときは、右のごみ箱のアイコンです。
写真の URL の調べかた（写真の雛形用）
写真の雛形には、写真の URL が要ります。
左のメニューの［アセット］→［アップロード］を開き、ファイルを選んで写真を上げます（ファイルを選ぶと、その場で上がります）。
- 「日本語ファイル名を自動で変換する」のチェックは入れたままにします。
- ファイル名は半角の英数字にしておくと、URL が分かりやすくなります。
［アセット］→［一覧］を開いて、上げた写真を押します。
「アセットの埋め込み」の URL（
http://…/magazine/写真のファイル名.webp）の横のコピーのアイコンを押します。
雛形の【写真のURL】に貼って、先頭の
http://…:…のドメインの部分を消し、/magazine/写真のファイル名.webpのように/から始まる形にします。 （例：http://localhost:8090/magazine/new-house.webp→/magazine/new-house.webp） ドメインを付けたままだと、サイトのアドレスが変わったときに写真が出なくなります。
4-4 プレビューで見た目を確かめる
右側の［プレビュー］を押すと、別の画面で、公開したときの見た目が開きます。
見た目を確かめたら、プレビューの画面は閉じます。内容を直すときは、元の編集画面に戻ります。
4-5 公開する
- ステータスを「公開」にします。
- 右側の青いボタン［公開］を押します。
- 「記事を保存しました。」と出たら、［記事を見る］（またはパーマリンクの［表示］）で公開ページを確かめます。
公開前のチェック
4-6 すでにある記事を直す
サイトを立ち上げるときに入れた5本の記事（「10年後も美しい家」「数字で見る FIVE の家 2026」など）も、同じ手順で直せます。
記事の一覧でタイトルを押して、編集画面を開きます。
本文全体が、1つの「HTML」ブロックとして出ます（ブロックごとには分かれていません）。
直したい部分をクリックすると、その部分の HTML が見える状態になり、文字を書き換えられます。
直し終えたら、右側の［更新］を押します。
直すときの約束：
- 文章だけを書き換えます。
<p></p>やclass="…"は消さないでください。 - 新しい段落や見せ場を足したいときは、ブロックの下に新しいブロックを追加します。
- 保存し直しても、公開ページの内容は変わりません（確かめ済みです）。
4-7 公開をとりさげる・直す
1 章と同じです。取り下げるときは、ステータスを「未公開(原稿)」にして［保存］します。削除はしません。