# ブランケット判6段の日刊紙 > ブランケット判の日刊紙4ページ。罫線付きの6段、2〜5段にまたがる写真と囲み、全段の広告、5段に切り替えたオピニオン面。 - HTML版: https://postext.dev/ja/cookbook/broadsheet-six-columns - レシピ No. 133 · ページとグリッド · 難易度 3 (上級) · 出力: Canvas - ジャンル: 新聞とニュースレター - 必要なもの postext ≥ 1.18.0 · テスト環境 1.18.0 ／テスト日 2026-10-06 - ページ: [1](https://postext.dev/cookbook/broadsheet-six-columns/en/p01.webp?v=49f78219), [2](https://postext.dev/cookbook/broadsheet-six-columns/en/p02.webp?v=49f78219), [3](https://postext.dev/cookbook/broadsheet-six-columns/en/p03.webp?v=49f78219), [4](https://postext.dev/cookbook/broadsheet-six-columns/en/p04.webp?v=49f78219) - Sandboxで開く: https://postext.dev/ja/sandbox#recipe=broadsheet-six-columns&lang=en (.postext: https://postext.dev/cookbook/broadsheet-six-columns/en/broadsheet-six-columns.postext) - 最終更新: 2026-10-06 - 他の言語: [en](https://postext.dev/en/cookbook/broadsheet-six-columns.md), [es](https://postext.dev/es/cookbook/broadsheet-six-columns.md), [ca](https://postext.dev/ca/cookbook/broadsheet-six-columns.md), [zh](https://postext.dev/zh/cookbook/broadsheet-six-columns.md), [ar](https://postext.dev/ar/cookbook/broadsheet-six-columns.md) ## かんたんな説明 大判の日刊紙4ページを、細い6段で組む例です。写真や囲みを何段かにまたがらせる方法と、1ページだけ5段にする方法を示します。 ## できあがり 架空の日刊紙 *The Corrington Despatch* の4ページを、375 × 597 mmのブランケット判で組みます。本文は幅55.2 mmの6段で、段間4 mmにそれぞれ細い罫が入ります。9 ptで1行およそ38字、実際のブランケット判と同じ行長です。第1面には天気と潮汐の小枠を両脇に置いた題字、案内の帯、見出しと写真が4段にまたがるトップ記事、2段写真付きの2番手記事、短信の段、財源の表と2段のデータ囲み、下端の広告があります。第2面は第1面の続きから始まり、第3面は5段に切り替えて社説、論評、投書を載せ、終面には劇評と天気が入ります。 **このレシピが答える問い:** - ブランケット判を6段で組み、写真や囲みに2段、3段、4段をとらせるにはどうすればよいですか？ - Postextは3段以上の段組みや、画像の周りへの回り込みに対応していますか？ ## 手短な答え ```js // script.js, 行 70–86 const layout = { layoutType: 'multiple', columnCount: 6, gutterWidth: mm(GUTTER), columnRule: { enabled: true, color: col('rule'), lineWidth: pt(0.4) } }; // A float across k columns takes the head of the first run of k empty columns that start // level, counted left to right from the column the text is in, or the foot of that column // and the empty ones after it. So the order of the fences places them: // :::callout{type="head" placement="top" columns="4"} ← columns 1–4, the text not begun // ::resource{id="quays"} ← columns 1–4 again, under the box // …the lead runs in columns 1–4… // :::callout{type="head" placement="top" columns="2"} ← columns 5–6: 1–4 hold text now const photo = (id, file, [w, h], columns, extra) => ({ id, typeId: 'photo', kind: 'bitmap', createdAt: 0, updatedAt: 0, bitmap: { fileId: file, format: 'jpeg', width: w, height: h }, placement: { position: 'top', span: 'column', columns }, note: 'Photograph: Despatch picture desk', ...extra }); // A table across two columns, at the foot of the column that cites it and the next one. const panel = (id, model, extra) => ({ id, typeId: 'panel', kind: 'table', createdAt: 0, updatedAt: 0, table: { model }, placement: { position: 'bottom', columns: 2 }, ...extra }); // As many columns as the page has (or more) is page-wide: columns: 6 = span: 'page'. ``` ## 材料 **学べること** - [3段以上の段組み](https://postext.dev/ja/docs/configuration.md#レイアウトの種類): layoutType 'multiple'は本文をcolumnCount個の同じ幅の段（3〜8段）に分けます。新聞や雑誌向けで、段間罫、段のそろえ、脚注、ページ幅のフロートはすべての段で働きます。 - [複数段にまたがるフロート](https://postext.dev/ja/docs/document-format.md#配置): placement.columnsは図や表を隣り合うk段にまたがって置きます。囲みスタイルのcolumns（またはフェンスのcolumns属性）はフロートする囲みに同じことをします。新聞の5段のうち2段にまたがる写真などです。 **ほかに使うもの** - [新聞の判型](https://postext.dev/ja/docs/configuration.md#ページサイズのプリセット) - [折った新聞（Folio）](https://postext.dev/ja/docs/configuration.md#folioビューアー設定) - [段間罫](https://postext.dev/ja/docs/configuration.md#段間罫) - [段抜きの囲み](https://postext.dev/ja/docs/configuration.md#calloutコンテナー) - [フロートする囲み](https://postext.dev/ja/docs/configuration.md#calloutコンテナー) - [囲みの中の段組み](https://postext.dev/ja/docs/document-format.md#columns) - [デザインした章扉](https://postext.dev/ja/docs/configuration.md#幅と詳細デザイン) - [見出しスタイル](https://postext.dev/ja/docs/configuration.md#見出しスタイル) - [見出しの属性](https://postext.dev/ja/docs/document-format.md#見出しの属性) - [節ごとのページ構成](https://postext.dev/ja/docs/configuration.md#見出しスタイル) - [ページデザインのテキスト・罫・ボックス](https://postext.dev/ja/docs/configuration.md#柱とノンブル) - [柱とノンブル](https://postext.dev/ja/docs/configuration.md#柱とノンブル) - [囲み](https://postext.dev/ja/docs/configuration.md#囲みスタイル) - [段落スタイル](https://postext.dev/ja/docs/configuration.md#段落スタイル) - [名前付きの表スタイル](https://postext.dev/ja/docs/configuration.md#名前付きの表スタイル) - [表のセル内の画像](https://postext.dev/ja/docs/document-format.md#ブロック埋め込み任意本文中への明示的な配置) - [独自のリソースの種類](https://postext.dev/ja/docs/configuration.md#リソースの種類) - [分割する囲み、分割しない囲み](https://postext.dev/ja/docs/configuration.md#calloutコンテナー) - [段末そろえ](https://postext.dev/ja/docs/configuration.md#段末そろえ) - [図を配置する参照](https://postext.dev/ja/docs/document-format.md#インライン参照基本の形) - [その場に置く図](https://postext.dev/ja/docs/document-format.md#ブロック埋め込み任意本文中への明示的な配置) - [段抜きの章見出し帯](https://postext.dev/ja/docs/configuration.md#幅と詳細デザイン) - [用紙の色](https://postext.dev/ja/docs/configuration.md#ページ) - [改ページと改段](https://postext.dev/ja/docs/document-format.md#pagebreak) - [リソースとしての図と表](https://postext.dev/ja/docs/document-format.md#リソース) - [節ごとの柱](https://postext.dev/ja/docs/configuration.md#見出しスタイル) - [明示的な縦のアキ](https://postext.dev/ja/docs/document-format.md#space) **設定の一覧** - [`bodyText`](https://postext.dev/ja/docs/configuration.md#本文), [`calloutStyles`](https://postext.dev/ja/docs/configuration.md#囲みスタイル), [`captionStyle`](https://postext.dev/ja/docs/configuration.md#キャプションスタイル), [`colorPalette`](https://postext.dev/ja/docs/configuration.md#カラーパレット), [`footer`](https://postext.dev/ja/docs/configuration.md#柱とノンブル), [`header`](https://postext.dev/ja/docs/configuration.md#柱とノンブル), [`headingStyles`](https://postext.dev/ja/docs/configuration.md#見出しスタイル), [`headings`](https://postext.dev/ja/docs/configuration.md#見出し), [`layout`](https://postext.dev/ja/docs/configuration.md#レイアウト), [`page`](https://postext.dev/ja/docs/configuration.md#ページ), [`paragraphStyles`](https://postext.dev/ja/docs/configuration.md#段落スタイル), [`resourceTypes`](https://postext.dev/ja/docs/configuration.md#リソースの種類), [`tableStyle`](https://postext.dev/ja/docs/configuration.md#表スタイル) **API** - [`buildDocument`](https://postext.dev/ja/docs/configuration.md#文書のビルド), [`clearMeasurementCache`](https://postext.dev/ja/docs/configuration.md#計測キャッシュ), [`registerResourceImage`](https://postext.dev/ja/docs/architecture.md#apiの概要), [`renderPageToCanvas`](https://postext.dev/ja/docs/configuration.md#ページをビットマップに描画する) **書体** - Newsreader (OFL-1.1), Playfair Display (OFL-1.1), Archivo Narrow (OFL-1.1) ## 作り方 ### 1 · ブランケット判に6段 この手順のコードは上の[手短な答え](#手短な答え)です。`page.sizePreset: 'broadsheet'`で375 × 597 mmの判型になり、`layoutType: 'multiple'`と`columnCount: 6`で幅351 mmの版面を等幅の6段に分けます（[レイアウトの種類](/ja/docs/configuration#レイアウトの種類)）。1段は(351 − 5 × 4) / 6 = 55.2 mmで、9 ptのNewsreaderなら約38字。そのため本文にはハイフネーションが要り、`minWordSpacing: 0.8`で語間が詰まりすぎないようにし、`maxJustifyTracking: 15`で間延びした行のすき間を字間に配ります。段間罫は各段間に0.4 ptの細線を引き、段をまたぐフロートや囲みのところで途切れます。postext 1.17までは本文は2段が上限で、そのため[No. 027](https://postext.dev/ja/cookbook/newspaper-front-page.md)は4段の短信を囲みの中に入れていました。 ### 2 · k段にまたがるフロートは最初の空き段の並びに入る ```js // script.js, 行 254–283 const resources = [ photo('quays', 'quays-1440.jpg', [1440, 1080], 4, { altText: 'A cobbled harbour quay at sunrise, with old rail tracks, three dockside cranes ' + 'and brick warehouses beside calm water.', caption: '**The end of the line.** The Eastern Quays at sunrise. The trams will run on ' + 'the old dock railway’s route past the bonded warehouses.' }), photo('barrier', 'barrier-1152.jpg', [1152, 1152], 2, { altText: 'Three engineers in orange jackets watch a steel flood gate hold back a high ' + 'tide between two concrete towers.', caption: '**Holding.** Engineers watch the gate at 6.40 yesterday morning.' }), photo('terrace', 'terrace-1440.jpg', [1440, 1080], 4, { altText: 'A woman carries a box up the steps of a red-brick terraced house on an ' + 'autumn street.', caption: '**Moving day** on Albion Terrace, where a two-bedroom flat now lets for £1,240.' }), photo('baths', 'baths-1536x768.jpg', [1536, 768], 3, { altText: 'A long Victorian swimming pool under an iron and glass roof, with one woman ' + 'swimming and wooden cubicles along both sides.', caption: '**Forty lengths.** The Albert Baths, opened in 1894, on a weekday morning.' }), photo('stage', 'stage-1800.jpg', [1800, 1350], 5, { altText: 'Three actors in 1920s costume in a shipping office set on a theatre stage.', caption: '**Ledgers and lies.** The shipping office of *The Tally Clerk*.', note: 'Photograph: Corrington Playhouse' }), panel('funding', funding, { caption: '**Paying for the line**', note: 'Source: Corrington City Council, cabinet report, October 2026.' }), { ...panel('forecast', forecast(), { placement: { position: 'here' }, caption: '**The next five days in Corrington**', note: 'High water at Salter’s Cut, Arle gate. Forecast: Despatch weather desk.' }) }, ...Object.keys(SKY).map((id) => ({ id, typeId: 'photo', kind: 'svg', createdAt: 0, updatedAt: 0, svg: { fileId: `${id}.svg`, width: 240, height: 120 }, altText: id.slice(4) })), ]; ``` `placement.columns`は写真や表の幅を、段間を含めた段数で指定します。第1面の4段は232.7 mmです。エンジンは本文のある段から左へ右へと場所を探します。`top`のフロートは、まだ本文がなく天がそろったk段の並びのうち最初のものの頭に入り、`bottom`のフロートは本文のある段とその後の空き段の足に入ります。そのため3段目の段落で参照した財源の表は3・4段目の下に置かれます。[第2面](https://postext.dev/cookbook/broadsheet-six-columns/en/p02.webp?v=49f78219)では、先に書いたデータ囲みが1・2段目をとるので、3〜6段目が次の4段写真のための最初のそろった並びになります。順番を逆にすると、囲みは写真の下に積まれます。kがページの段数以上なら全段で、`span: 'page'`と同じです。 ### 3 · 見出しの囲み、データの囲み、広告 ```js // script.js, 行 90–120 const NO_PAD = { top: pt(0), right: pt(0), bottom: pt(0), left: pt(0) }; const head = { id: 'head', backgroundEnabled: false, padding: NO_PAD, // a headline and its deck titleStyle: { ...caps(8.5, 700, 'accent'), gap: mm(1.5) }, // the kicker: the fence's title marginBottom: pt(LEAD), keepTogether: true, body: { fontFamily: 'Newsreader', fontSize: pt(13), lineHeight: pt(16.5), italic: true, textAlign: 'left', firstLineIndent: pt(0) } }; const jump = { ...head, id: 'jump', marginTop: pt(LEAD), // a page-wide head under a 1 pt rule stripe: { enabled: true, side: 'top', width: pt(1), color: col('ink') }, padding: { ...NO_PAD, top: mm(2.5) } }; const facts = { id: 'facts', background: col('tint'), keepTogether: true, stripe: { enabled: true, side: 'top', width: pt(2.5), color: col('accent') }, padding: { top: mm(2.5), right: mm(3), bottom: mm(3), left: mm(3) }, titleStyle: { ...caps(8.5, 700, 'accent'), gap: mm(1.5) }, marginBottom: pt(LEAD), body: { fontFamily: 'Archivo Narrow', fontSize: pt(9), lineHeight: pt(11.5), textAlign: 'left', firstLineIndent: pt(0), paragraphSpacing: true } }; const weather = { ...facts, id: 'weather', keepTogether: true, padding: { top: mm(3), right: mm(4), bottom: mm(4), left: mm(4) }, body: { ...facts.body, fontFamily: 'Newsreader', fontSize: pt(10.5), lineHeight: pt(14) } }; const ad = { id: 'ad', backgroundEnabled: false, keepTogether: true, border: { enabled: true, color: col('ink'), width: pt(0.75) }, padding: { top: mm(5), right: mm(6), bottom: mm(5), left: mm(6) }, titleStyle: { ...caps(7, 600, 'muted'), gap: mm(3) }, // "Advertisement" body: { fontFamily: 'Archivo Narrow', fontSize: pt(13), lineHeight: pt(17), textAlign: 'left', firstLineIndent: pt(0), paragraphSpacing: true } }; const sky = { id: 'sky', background: col('tint'), columnGap: mm(GUTTER), // the teaser strip padding: { top: mm(2.5), right: mm(3), bottom: mm(2.5), left: mm(3) }, marginBottom: pt(LEAD), body: { fontFamily: 'Archivo Narrow', fontSize: pt(9.5), lineHeight: pt(12), textAlign: 'left', firstLineIndent: pt(0) } }; const headline = (id, size, look = {}) => ({ id, fontFamily: 'Playfair Display', fontWeight: 700, fontSize: pt(size), lineHeight: pt(size * 1.06), marginTop: pt(0), marginBottom: pt(size * 0.22), ...look }); ``` `placement="top"`と`columns="4"`を付けた`:::callout`は、写真と同じように4段にまたがって浮きます。トップ記事の見出しとリードはこの囲みで、本文の前に書くので1〜4段目をとり、写真はその下に積まれます。2番手記事の見出しの囲みはトップ記事の後、`:::columnbreak`の後ろに置きます。このとき本文はもう5段目にあり、5・6段目が最初の空いた2段になります。広告はどれも`columns="6"`の全段の囲みで、本文が来る前に下端を確保するよう、そのページの冒頭に書きます。第2面と第4面の続き見出しはNo. 027と同じく全幅の囲みです。ここではどのページもひとつのセクションを閉じるので、`balancing.trailing: false`で各段を下端まで埋めます。 ### 4 · 題字は第1面のH1 ```js // script.js, 行 46–66 const ear = (side, lines) => lines.map(([id, content, look], i) => text(id, content, { ...look, align: side }, { ...(i === 0 ? at('container', `top-${side}`, 0, 4) : at(`#${lines[i - 1][0]}`, 'below', 0, 0.8)), size: { width: mm(30) } })); const nameplate = { enabled: true, slot: { elements: [ depth(9), // nine grid lines; the rules and the dateline hang from the foot { kind: 'rule', id: 'foot', thickness: pt(0.5), color: col('ink'), placement: { ...at('#depth', 'align-bottom', 0, -2), size: { width: 'fill' } } }, ...[['left', '{attr.issue}'], ['center', '{publishDate}'], ['right', '{attr.price}']].map( ([align, content]) => text(`date-${align}`, content, { ...caps(8, 600), align }, { ...at('#foot', 'above', 0, -1.5), size: { width: 'fill' } })), rule('thin', '#date-left', 0.5, 1.6), rule('heavy', '#thin', 3, 0.7), text('name', '{titleText}', { fontFamily: 'Playfair Display', fontSize: pt(64), fontWeight: 900, lineHeight: 1, align: 'center' }, // (gotcha: design-lineheight-multiple) { ...at('#heavy', 'above', 0, -2.5), size: { width: 'fill' } }), ...ear('left', [['w-kicker', 'Weather', caps(7.5, 700, 'accent')], ['w-outlook', '{attr.outlook}', { fontFamily: 'Newsreader', fontSize: pt(9.5), italic: true, lineHeight: 1.25 }], ['w-temps', '{attr.temps}', sans(17, 700)]]), ...ear('right', [['t-kicker', 'Tides', caps(7.5, 700, 'accent')], ['t-times', '{attr.tides}', { fontFamily: 'Newsreader', fontSize: pt(9.5), italic: true, lineHeight: 1.25 }], ['t-height', '{attr.height}', sans(17, 700)]]), ] } }; ``` `# The Corrington Despatch`は見出しスタイル`front`をとります。紙名は64 ptのPlayfair Display Black、両脇の小枠は見出しの属性から埋まり、日付行は細い罫と太い罫に挟まれます。オープナーの深さは行送り9行分です。1.18.0ではオープナーが1段目を占めるため、その直後に書いたk段のフロートは2段目から始まります。地色の案内帯は全幅の囲みで、1段目が空いた新しい帯を開くので、トップ記事は1〜4段目をとれます。 ### 5 · オピニオン面は5段 ```js // script.js, 行 124–145 const flag = { enabled: true, slot: { elements: [ depth(4), { kind: 'rule', id: 'bar', thickness: pt(3), color: col('ink'), placement: { ...at('#depth', 'align-bottom', 0, -2.5), size: { width: 'fill' } } }, text('flag', '{titleText}', { fontFamily: 'Playfair Display', fontSize: pt(30), fontWeight: 900, lineHeight: 1 }, at('#bar', 'above', 0, -1.5)), text('tag', '{attr.tag}', { ...caps(8, 600, 'muted'), align: 'right' }, { ...at('#bar', 'above', 0, -2), size: { width: 'fill' } }), ] } }; const FOLIO = 8; // mm from the top edge to the folio line, its rule 4.5 mm lower const folio = (parity, side, s) => [ // s: +1 on a verso, −1 on a recto text(`n-${parity}`, '{pageNumber}', { ...sans(10, 700), align: side }, at('page', `top-${side}`, s * MARGIN.side, FOLIO)), text(`t-${parity}`, '{title} · {publishDate}', { ...caps(7.5, 600, 'muted'), align: side }, at(`#n-${parity}`, s > 0 ? 'right-of' : 'left-of', s * 3, 0.9)), ].map((element) => ({ ...element, parity })); const header = { elements: [...folio('even', 'left', 1), ...folio('odd', 'right', -1), { kind: 'rule', id: 'folio-rule', thickness: pt(0.5), color: col('ink'), placement: { ...at('page', 'top-left', MARGIN.side, FOLIO + 4.5), size: { width: mm(375 - 2 * MARGIN.side) } } }] }; const opinion = { id: 'opinion', advancedDesign: flag, // its section runs in five columns layout: { layoutType: 'multiple', columnCount: 5 } }; // 67 mm: a 47-character measure ``` `# Opinion {style="opinion"}`は、見出しスタイルで`layout: { layoutType: 'multiple', columnCount: 5 }`を指定したセクションを開きます。段間と段間罫は文書のものを引き継ぎ、段数だけを変えるので、社説、論評、投書は67 mm、約47字の行長になります。論評の見出しの囲みは`columns="3"`で、社説が1段目で始まってから書くので2〜4段目に入り、写真はその下に来ます。2行の`:::columnbreak`が論評を2段目へ、投書を5段目へ送ります。 ## レシピの全体 レシピのフォルダーから合成した1つのファイルで、サンプルのテキストとレシピ集の共通キットを埋め込んであり、自分でページを組み立てます。動かすには、空のページの`