記憶の箱舟 WPでの「北の街角」のサイト構築手順書
最初のサイト構築手順
順番を「サイト全体の設定 → レイアウト設定 → トップ固定ページ作成」の流れに整理して書き直す。CSSは極力使わず、Cocoonの設定とブロックだけで進める前提。
1. WordPress と Cocoon の基本設定
1-1.Cocoon（親+子）でテーマを有効化
管理画面左メニュー「外観 → テーマ」「新規追加」からCocoonを検索し、インストール
同様に「Cocoon Child」もインストールし、最終的に「Cocoon Child」を有効化する。
1-2. サイト基本情報
「設定 → 一般」サイトのタイトル: 北の街角「Snow Box」
キャッチフレーズ:一行の説明文(後で変えてもOK)。
タイムゾーンを「東京」、日付形式などを好みに設定。
2. Cocoon のレイアウト・サイドバー設定
2-1. 全体レイアウト（デフォルト）
「Cocoon設定 → レイアウト」・「サイト全体のレイアウト」
ブログ全体としては「メインカラム（コンテンツ）＋右サイドバー」の2カラムを選択しておく（標準的）。
2-2. 固定ページだけサイドバーを非表示(Cocoon 設定)
「Cocoon設定 → 全体」タブを開く。下の方にある「サイドバーの表示状態」で「固定ページでサイドバーを非表示」にチェック。「変更をまとめて保存」。
これで固定ページ（後で作るトップページを含む）は、1カラム表示になり、投稿ページなどはサイドバーあり、という構成になる。
2-3. 必要に応じて個別ページでレイアウト変更
特定の固定ページだけレイアウトを変えたいときは、そのページの編集画面で右側パネルを下にスクロールし、「ページ設定 → ページタイプ」から「1カラム（広い）」などを選択すると、そのページだけサイドバーなし・幅広表示になる。
3. トップ用固定ページの作成
固定ページを新規作成。「固定ページ → 新規追加」。
タイトル:(公開後にタイトルはCSSで消さず、Cocoon設定の「ページタイトル非表示」を使う。）
ブロックエディタで、次のように構成します。
ざっくり構成：
上：画像ブロックで を中央配置。雪だるま.gif+title.gif
その下:段落ブロックで「北の街角『Snow Box』へようこそ!」+紹介文。
次：カラムブロック（3列）を3段作り、各カラムに画像（登山／地方探検／花 …）
見出し（コンテンツ名）+段落（短い説明）必要に応じ「ボタン」ブロック(カテゴリ または固定ページへのリンク)といった「カード」を作る。
一番下：メール画像と雪だるま画像をカラムやギャラリーブロックで配置。
設定後、右上「公開」ボタンで公開。
4. トップに固定ページを設定（ホームを表紙にする）
ホームページ表示の切り替え
「設定 → 表示設定」「ホームページの表示」で「固定ページ」にチェック。
「ホームページ」:さきほど作った「Snow Box トップ」を選択。
「投稿ページ」:別途「記事一覧」などの固定ページを新規作成して指定(中身は空でOK、Cocoonが自動でブログ一覧にしてくれる)。
「変更を保存」これで、サイトにアクセスしたとき最初に表示されるのが「Snow Box トップ」になる。
5. タイトル行の表示/非表示(CSSを使わない方法)
Cocoon では、固定ページのページタイトルは設定で消せるので、CSSをいじらずに調整する。
5-1. 全固定ページのタイトル非表示
「Cocoon設定 → 投稿」タブ。
「ページタイトルの表示」関連の項目で、固定ページのタイトル表示を「表示しない」にできるか確認（バージョンによって位置が違うため、投稿・固定ページそれぞれの設定をチェック）。
5-2. 個別ページのタイトル非表示
個別に制御したい場合は、個別の編集画面を開き、右側パネルの「固定ページ」タブ内に「ページ設定」があり、「タイトルを表示しない」にチェックを入れる。
6. サイドバー表示・非表示の確認
トップページ（固定ページ）：「Cocoon設定 → 全体」で「固定ページでサイドバー非表示」にしておけば、自動的に1カラムになる。
通常の投稿ページ（山レポ・地方探検記事など）：サイドバーありの2カラムで表示される。
特定の記事だけサイドバーを消したい場合：投稿編集画面 → 右側「投稿」タブ → 「ページ設定 → ページタイプ」で「1カラム（広い）」を選択。
7. ここまで終わったら
ここまでが「設定からトップ固定ページ表示まで」の一連の流れ。
この後に、メインメニュー（登山／地方探検／花／スカウト…）の作成：「外観 → メニュー」で作成。
画像サイズ（16:9）に揃えたアイキャッチの設定。Cocoonの「スキン」選択と、高速化・目次設定などの微調整。これで今どきの「Snow Box」が形になる。
メインページ「北の街角『Snow Box』」固定ページ：北の街角「Snow Box」へようこそ!
北海道・苫小牧を拠点に、登山探検・地方探検・野山の花・スカウト活動・写真の記録など、気の向くままに歩き、見て、感じたことを綴っている個人サイトです。行き先もスタイルもきっちり決めず、山や街角、家族や仲間との時間を、少しずつ雪の箱に詰め込むような気持ちで更新していきます。
上段カラム設定
・左カラム：登山探検「山を登って見たい！」北海道の百名山（１１５座）を中心に掲載。低山から日本アルプスの山々まで紹介します。
・中央カラム：地方探検「そこが見たい！」支笏湖周辺など、名前だけは知っている「気になる場所」を実際に歩いて確かめた記録です。危険箇所もあるので、現地では慎重に。
・右カラム：地方探訪「野山の花を見る！」山や里で出会った花たちの写真アルバムです。花の名前にあまり自信はありませんが、「こんな花が咲いていた」という記録として。
中段カラム設定
・左カラム：ふるさと探訪「41ｍから」「４１ｍから眺めた苫小牧」や、日本各地の風景・灯台・スケッチを集めたフォト探訪コーナーへの入口です。故郷と旅の景色をまとめてどうぞ。
・中央カラム：フォト探訪「風景を見る！」日本中の旅風景、山、自然、灯台、スケッチなどのベストショットを気ままに掲載しています。
・右カラム：「ボーイスカウト苫小牧第2団」災害が起こったとき、家族はどこにいてどう動くのか。親子で考えておきたい備えや、いざという時の行動のヒントをまとめています。樽前山スカウト団として活動しているBVS隊、CS隊、BS隊の記事を沢山掲載しています。
下段カラム設定
・左カラム：防災・減災「親子のために！」災害が起こったとき、家族はどこにいてどう動くのか。親子で考えておきたい備えや、いざという時の行動のヒントをまとめています。
・中央カラム：「日大文理学部YH研OB会」日大文理学部（世田谷区桜上水）にあったユースホステル研究会の親睦のためのページです。
・右カラム：覚書備忘録「忘れないために！」記憶の中から消える前に思い出や経験したことなどを雑多に書き込んでいきますので・・・
カードの並べ方（ブロック操作メモ）
トップ固定ページで「見出し(H2)ブロック」:コンテンツのご案内、その下に「カラム（3列）」ブロックを追加。
1つ目の3列を作成。
カラムブロック自体を丸ごと複製して、2段目・3段目を作り、中身（画像・見出し・テキスト・ボタンリンク）だけ差し替える。
こうすると、3×3のカードの高さが揃いやすく、あとからカテゴリを足したり減らしたりしやすいはず。
再構成での進め方
トップ固定ページの9枚カード → それぞれが「カテゴリ別固定ページ」にリンクカテゴリ別固定ページの「表題の下」に、そのカテゴリの投稿一覧（3×3など）を自動表示
カテゴリ別ページでサブカテゴリ9個をボタン表示 → クリックでそのサブカテゴリに属する投稿一覧（3×3）を表示
一覧の各カード（投稿）をクリックすると、その投稿ページ本文に遷移
という4段階になります。CSSなしで、Cocoonとブロック/ショートコードだけで組む前提。
1. メイン固定ページ → カテゴリ別固定ページを開く設定
9枚のカード（3×3）のボタンや画像リンク先を
/snowbox-01-tozan/（登山用固定ページ）
/snowbox-02-tanken/(地方探検用固定ページ)
など、カテゴリ別固定ページのURLに設定する。
設定場所：固定ページ一覧で →クイック編集のスラッグで指定。
2. カテゴリ別固定ページに、そのカテゴリの投稿一覧（3×3）を出す
2-1. Cocoonの「新着・カテゴリ別一覧」ショートコード/ブロックを使う
やり方はいくつかあるが、簡単なのは「Cocoonの一覧ショートコード」を使う方法。
カテゴリ別固定ページ（例：登山用固定ページ）を編集。
冒頭に「見出し(H2):登山探検の記事一覧」そのすぐ下に「ショートコード」ブロックを追加。
ショートコード欄に次のように入力（例：カテゴリスラッグがtozantextの場合）：
[cat_list num=9 cat=”tozan” columns=3]
num=9で「9件」、columns=3で「3列表示」、cat=”tozan”で対象カテゴリ指定（スラッグ名で指定）
※正確なショートコード名・パラメータは Cocoon の公式マニュアル(「カテゴリ一覧ショートコード」等)に載っている。
更新してプレビューすると、その固定ページの表題の下に「登山カテゴリの最新9件」が3×3のカードで並ぶ。
3. カテゴリ別ページにサブカテゴリ9個を並べる → クリックで投稿一覧
3-1. サブカテゴリボタンを並べる
カテゴリ別固定ページの上部か中段に、カラムブロック（3列）を追加。
各カラムの中に、ボタンブロック またはテキストリンクを配置し、それぞれ対応するサブカテゴリアーカイブURLにリンクする。
例：「道北」ボタン →/category/tozan/douhoku/など。
3-2. サブカテゴリページに投稿一覧（3×3）を自動表示
サブカテゴリをクリックしたときは、**WordPress標準の「カテゴリーページ(アーカイブ)」**に飛ばすのが一番シンプル。
WordPressのカテゴリーページは、指定したカテゴリの投稿一覧を自動で出してくれる。
Cocoonでは、Cocoon設定 → インデックスで「カード型」「3列」「1ページあたりの表示数(例:9件)」などをまとめて指定できる。
つまり：「外観 → カスタマイズ → Cocoonset(インデックス)」で、
カテゴリーページのレイアウト：カード型、1ページあたりの表示数：9（必要なら）、カラム数:PCで3カラムに設定しておく。
サブカテゴリボタンのリンク先は サブカテゴリアーカイブURL にするだけ。
これで、「サブカテゴリをクリック → そのカテゴリの投稿が3×3で並ぶ」状態になる。
4. 投稿をクリックしたときの動き
カテゴリ一覧やショートコードで出したカードは、標準でその投稿ページ本文へのリンクになっている。
何も特別な設定をしなくても、カードの画像・タイトルをクリック → 個別投稿ページに遷移する。
「投稿内容をその場で展開する(モーダルやアコーディオンのような動き)」までするなら、JavaScript や専用ブロック/プラグインが必要になるので、最初の段階では一覧 → 個別投稿ページに遷移する標準の動きにしておくのが安全。
5. まとめ（具体的にやる順）
カテゴリ／サブカテゴリのスラッグを確認しておく（投稿 → カテゴリー）。
トップ固定ページの9カードのリンク先を、それぞれ「カテゴリ別固定ページ」に設定。
カテゴリ別固定ページごとに、表題（見出し）の下に
[cat_list num=9 cat=”スラッグ” columns=3]のショートコードを配置。
サブカテゴリを使うカテゴリでは
カラム＋ボタンでサブカテゴリ一覧を並べる
ボタンのリンク先をサブカテゴリアーカイブURLにする
Cocoon設定 → インデックスで、「カード型3カラム」「1ページにつき9件」にしておく。
ここまでで、「トップ → カテゴリ固定ページ → カテゴリ別投稿一覧（サブカテゴリ経由含む）→ 個別投稿」と自然にたどれる構成になる。
