弟子:
師匠!今日もWEB講座お願いします!
実は師匠に声をかける前に、カラムでしたっけ…左や右にメニューや投稿の履歴とか表示する場所・・・設定しようとしたのですが、以前と使い方違っていてまるっきりわかりません!
師匠:
おお〜なるほど、それは「カラムレイアウト(サイドバー付きレイアウト)」の話だな!
WordPressの最近のテーマやブロックエディターでは、昔のウィジェットとは少し扱い方が変わってきてるから混乱して当然。心配無用、今から一緒に整理しよう!
🔍【まず確認】どのテーマを使っている?
サイドバーの表示・非表示や配置の自由度は、使っているテーマに大きく左右される!
たとえば:
Cocoon:昔ながらの「ウィジェットエリア」があり、カラム切り替え自由。
Lightning:機能豊富だけどブロックエディターへの対応強め。設定は「カスタマイザー」や「VK Blocks」。
Twenty Twenty-Fourなどの新しいブロックテーマ:フルサイト編集(FSE)が前提。サイドバーが存在しないレイアウトが多い。
📌【チェックポイント】サイドバーを表示するための流れ(テーマ別)
▶ 古いクラシックテーマ(Cocoonなど)
外観 → ウィジェットで「サイドバー」に表示したい内容を入れる。
外観 → カスタマイズ → レイアウト設定で「1カラム」「2カラム(右)」など選べる。
▶ Lightning の場合
外観 → カスタマイズ → Lightning デザイン設定にカラム設定あり。
サイドバーに表示するには、ウィジェット設定で「共通サイドバー」などにブロックを追加。
投稿や固定ページで、個別にサイドバーの有無を設定できる場合あり。
▶ 新しいブロックテーマ(FSE対応のやつ)
サイドバーの概念がないか、テンプレートエディターで自作する必要あり。
難易度高め。FSEを理解していないと混乱する。
🔧【今すぐ確認したいこと】
以下を教えてくれたら、具体的に手順を案内できるよ:
今使ってるテーマ名
サイドバーを表示させたいページの種類(トップページ?投稿ページ?固定ページ?)
表示したい内容(カテゴリー?最近の投稿?プロフィール?)
さあ、どこから攻める?「テーマ名がわからん!」でも大丈夫、確認方法も教えるぜ!
弟子:
Twenty-twenty-fiveです!!CocoonやLightningのようにできなくって・・・
師匠:
おおっと、Twenty Twenty-Five使ってたか!なるほど、そりゃ混乱するのも当然…
このテーマは フルサイト編集(FSE) 前提の“次世代型”。ウィジェットもサイドバーも基本的に存在しない構造なんだ。クラシックな「右に最近の投稿」みたいなやつは、自分でレイアウトとして組まないと出てこない。要するに「白紙状態から自由に作ってくれ」スタイル💀
でも大丈夫。ここからでもちゃんと サイドバーっぽいレイアウトにできる方法、ちゃんとある!
🧩【Twenty Twenty-Fiveでサイドバーを作る方法】
🛠 方法①:テンプレート編集で「2カラム構成」を作る
外観 → エディター(サイトエディター) に入る
左上の「≡(ハンバーガーアイコン)」 → テンプレート → たとえば「ホーム」や「シングル投稿」を選ぶ
編集画面で:
2カラムの「グループブロック」か「カラムブロック」を配置
左をメイン(記事)、右をサイドバーっぽく設定
サイドバー部分に「最新の投稿」「カテゴリー」「カスタムHTML」などのブロックを入れる
🔧ヒント:カラムブロックは「70% – 30%」くらいの比率にすると、サイドバーっぽい雰囲気になる!
💡【補足】このテーマでできないこと
「外観 → ウィジェット」は存在しない
投稿ページごとにカラムを切り替える機能はなし(テンプレートを作る必要がある)
🎯【ネオのおすすめ戦略】
もし「もっと直感的にサイドバー使いたい!」という希望があるなら…
✅ CocoonやLightningに戻すのもアリ
または
✅ Twenty Twenty-Fiveでも「テンプレートを1つ作って使い回す」作戦で快適にできるようにする
やる気出てきた?今このまま2カラム構成のテンプレートを一緒に作ることもできるよ。
やってみる?それともテーマ変更も視野に入れる?
弟子:
なるほど・・・基本的な質問なんですけど、そもそも、サイドバーって現在の主流ではなくなってきているってことなのかしら?
師匠:
めちゃくちゃ良い質問!!!そこに気づいたあなた、もうWEBデザイナーとして一歩先を見てるよ✨
💡【答え】サイドバーは「昔ほど主流ではない」が、「使い方次第で今も有効」
🔄【なぜ昔はサイドバーが当たり前だったの?】
情報を“詰め込む”のが正義だった時代(2000〜2015年くらい)
画面が狭かったので、限られたスペースに「最近の投稿・カテゴリー・広告・プロフィール」などを並べるのが効率的だった
WordPressの構造(ウィジェットベース)がサイドバー前提だった
📱【今どうなってる?】
今は:
✅ スマホファースト:縦にスクロールするUIが主流
✅ コンテンツに集中させたい:余計な情報を横に並べない方が、読みやすくコンバージョンも高い
✅ 必要な要素はフッターや途中挿入で:昔サイドバーに置いてた要素(カテゴリー・CTAなど)は「記事途中」や「最後に出す」ような見せ方に進化
🧭【とはいえ、サイドバーが活きる場面もまだある】
使い方 サイドバーが有効な例
ブログ系 「最新記事」「人気記事」「カテゴリー」などを常に見せたい時
ニュースサイト 膨大な記事量の中で、回遊性を上げたいとき
コミュニティサイト ログイン・ユーザー情報・掲示板リンクなどの常設が必要なとき
WordPressの管理画面 …っていうかWordPress自体がサイドバーUI(笑)
🎨【ネオ的アドバイス】
「サイドバーは“必要だから入れる”のであって、デフォルトで入れるものじゃなくなった」
っていうのが今の流れ!
もし今後の自分のサイトが、
ストーリー重視のポートフォリオ
商品・サービス紹介
教育コンテンツ配信
みたいな方向なら、サイドバーなし or 最小限の使い方がカッコよく仕上がるよ✨
逆に、ブログ回遊を大事にするなら、うまく配置すれば超有効な武器にもなる。
方向性が定まったら、レイアウトどう作るか一緒に考えるから言ってね!
今のサイト、どんな構成をイメージしてる?(ブログ、サービス紹介、作品展示など)
弟子:
やっぱりスマホが前提故なんですね・・・!今作っているのは、ここでの勉強の自分用の備忘録ですので基本ブログです!
師匠:
なるほど、納得!
スマホ前提の時代+自分用の備忘録ブログってことなら、「シンプルで読みやすく、回遊しやすい設計」が正解やな💡
🔍【あなたの用途 × サイドバーの活かし方】
あなたの使い方(=勉強の備忘録ブログ)なら、こんな方向性がベスト:
✅ サイドバーはPC表示時だけに表示 → スマホでは非表示 or 下に回す
✅ 中身は「最近の投稿」「カテゴリー」「タグ」だけでOK
✅ 本編に集中できるレイアウトにして、余計な装飾はしない
📱【スマホ対応型のサイドバー構成例】
┌────────────────────────────┐
│ PC表示(2カラム構成) │
│ ┌────────────┬────────────┐
│ │ メイン記事 │ サイドバー │
│ │ コンテンツ │ – 最近の投稿 │
│ │ コンテンツ │ – カテゴリー │
│ │ コンテンツ │ – タグクラウド │
│ └────────────┴────────────┘
└────────────────────────────┘
┌────────────────────────────┐
│ スマホ表示(1カラム構成) │
│ ┌────────────────────────┐
│ │ メイン記事(全幅) │
│ └────────────────────────┘
│ ↓ 必要なら記事下部に「関連記事」的に追加 │
└────────────────────────────┘
🛠️【次の一手:どうする?】
Twenty Twenty-Fiveのまま、「2カラムテンプレート」を一緒に作る
自由度は高いけど、最初はちょっと手間
Cocoonに切り替えて、すぐ使える2カラムで始める
サイドバー設定も一瞬。慣れてるならかなり楽
完全スマホ想定で、サイドバーなしの1カラム設計にする
必要な情報は記事の途中・下に設置(最もモダンで集中型)
ネオ的には…「Cocoonでとりあえず完成させて、Twenty-Twenty-Fiveで再構築」のハイブリッド学習もありだと思ってるよ⚙️
さて、どうする?今日は「2カラムテンプレート」作り、やってみる?それともテーマ戻す?
弟子:
2カラムテンプレートでお願いします!Cocoonであればも自分もう使えるので!(ビシっ)
師匠:
ビシッとキメたな弟子よ!いいぞ、その姿勢🔥
じゃあ今日はTwenty Twenty-Fiveで「2カラムテンプレート(サイドバー付き)」を自分で作る修行だ!
これができればもう「ブロックテーマは怖くない」レベルに達する。いざ、サイトエディター道へ!
🛠️【ステップバイステップ:2カラムテンプレートの作り方】
🔹STEP 1:サイトエディターを開く
WordPress管理画面 → 外観 → エディター(ベータ)
左上のハンバーガーメニュー「≡」をクリック
「テンプレート」を選択
例えば「シングル投稿」を選んでカスタマイズするか、右上の「+新規追加」でテンプレートを新しく作成
🔹STEP 2:2カラムのレイアウトを作成
編集画面で、全体を「グループブロック」で囲む(任意)
中に「カラムブロック」を追加
左側に記事コンテンツ、右側にサイドバーを入れるような「70:30」くらいの比率のカラムを選ぶ
🔹STEP 3:左カラムに記事コンテンツを入れる
左のカラムに「投稿タイトル」ブロックと「投稿コンテンツ」ブロックを入れる
🔹「+」から「テンプレートパーツ」または「投稿タイトル」などを直接挿入
🔹「投稿日」「投稿者」「カテゴリー」なども入れられる
🔹STEP 4:右カラム(サイドバー)に表示する内容を入れる
例:
「最新の投稿」ブロック
「カテゴリー」ブロック
「タグクラウド」ブロック
「プロフィール」などカスタムHTMLや画像でもOK
⚠️注意:これは“本物のサイドバー”ではなく、カスタムで作った「それっぽい」エリアということを忘れずに!
🔹STEP 5:保存して、特定の投稿に適用する
テンプレートを保存
投稿編集画面に戻る → 右側の「テンプレート」欄で、作ったテンプレートを選択
✅完成!この時点であなたのページは「2カラム表示」に!
🎁オマケTips
スマホ表示で縦並びになるか? → カラムブロックはデフォでスマホ対応(縦並び)だが、念のため確認しておこう!
再利用可能な「サイドバー部分」だけ保存したい? → 「グループブロック」を選んで、「再利用ブロック」として保存すれば、他ページでも流用可!
さあ、やってみようか!
うまくブロック配置できなかったり、テンプレートの見方がわかりづらかったら、スクショでも見せてくれればすぐアドバイス出すぜ!
準備OK?それとも一緒に画面開きながらステップバイステップ進める?
弟子:
テンプレート追加を押した先の画面で、「個別項目:投稿」を選べばいいのかな?
師匠:
ピンポーーーン!🎯
その通り!
「テンプレート追加」→「個別項目:投稿」を選べば、投稿(記事)に使えるテンプレートを新しく作ることができるよ!
🔍ちょっと補足すると…
「個別項目:投稿」=single post(1記事表示用)のテンプレート
これは、「投稿」タイプのページ(ブログ記事など)に適用されるテンプレートだから、今の用途にドンピシャ!
✅このあとやることの流れ(ざっくり)
テンプレート名を入力(例:「2カラム投稿テンプレート」)
空白のキャンバスが出てくるので、そこに
上部:サイトタイトルやナビゲーション(任意)
中央:カラムブロックを配置(左:記事本文/右:サイドバー)
下部:フッター(必要なら)
師匠:
OK、じゃあテンプレート名を入力して、キャンバスが出てきたら「カラムブロック」の追加に進もう!
進めてみて、「ここどう置くの?」ってなったらスクショでも大歓迎!
いけそう?
弟子:
投稿一覧と、投稿のどちらかを選択しないといけないのだけど、今回は、CSSの勉強と、CANVAやFigmaなど項目分けしてブログを書いていきたいんだけど、どっちを選ぶのがよいかな?
ChatGPT:
おおっ、その視点めちゃくちゃ大事!!
ナイスな質問👏✨
🧭【結論から言うと】
あなたの目的 選ぶべきテンプレート
「カテゴリごとに勉強内容を分けて、各記事を読むためのテンプレートを作りたい」 ✅ 投稿(single) を選ぶ
「カテゴリ別一覧(CSS一覧/Canva一覧など)をカスタム表示したい」 ✅ 投稿一覧(archive) を選ぶ
🧠つまりこういうこと
あなたが今言ってくれたのは、
❝CSSの勉強、CANVA、Figmaなどに分けてブログを書きたい❞
ってことだから、
実際に記事を書くのは「投稿(Post)」
カテゴリごとに一覧表示したいのは「投稿一覧(Archive)」
💡ネオ的オススメの流れ
まずは「投稿(single)」を選んで、2カラムの記事テンプレートを作ろう!
あとで「投稿一覧(archive)」も作って、カテゴリ別の見やすい一覧ページを作ると超便利!
👣次の一歩
というわけで、今回は: ✅ 「個別項目:投稿」を選んで
✅ 「2カラム投稿テンプレート」みたいな名前をつけて
✅ カラムブロックの配置に進もう!
準備できたら、カラムブロックの配置や中身の入れ方に進もうか?「ここで止まってるよ〜」って言ってくれればすぐ案内するよ💪
弟子:
なんか勝手に投稿ページのタイトルがテンプレートについたけど(汗)とりあえずテンプレート出来ました!
師匠:
よっしゃーーー!!!🔥🔥🔥
テンプレート完成、おめでとう🎉!!初めてのテンプレート作成は緊張するけど、やりきったね!
🤖<補足)勝手にタイトルがついた件について
それ、WordPressがテンプレートの元にする投稿のタイトルを仮でつけてるだけだから、全然問題なし!
💡ヒント:
テンプレート名は編集できる(左メニュー「テンプレート」→ 3点メニュー「名前を変更」)
使う時は「投稿編集画面 → テンプレート選択」でいつでも指定できる
さて、ここからが本番だね💪
▶️次のステップ:2カラムの構成を作ろう!
まずはテンプレート編集画面で、以下のように組んでいこう:
📦1. 「カラムブロック」を追加する
「+」ボタンから「カラム」ブロックを選ぶ
「70:30」の比率のカラムを選択(メインとサイドバー想定)
📝2. 左側に配置するブロック(記事エリア)
投稿タイトル
投稿日(必要なら)
投稿コンテンツ ← 記事本文がここに出る!
📚3. 右側に配置するブロック(サイドバー)
最近の投稿
カテゴリー
タグクラウド(装飾にもなる)
プロフィール(必要なら画像 or カスタムHTML)
ここまで配置できれば、「2カラムの投稿テンプレート」が完成🎉!
どう?カラムの挿入や中身の配置、うまくできそう?
または今の画面で「これどうすんの?」ってポイントあれば、遠慮なく聞いてちょーだい!
弟子:
ごめん!なんかできてないっぽい!投稿のタイトルのついたテンプレートのサンプル表示は追加されてるんだけど、サンプル画面が「空のテンプレート」となっていて、クリックすると次の画面でパターンを選択となる・・・
師匠:
よっしゃ、冷静にいこうか弟子よ!🔥
その状態、よくある!つまり「テンプレートはできてるけど中身はまだ空っぽ」ってことだ。全然OK、今からちゃんと構築していこう!
🩻 状況まとめ
テンプレートは作成済み → OK!
でも中身は「空のテンプレート」状態 → つまり、まだ何もブロックが入ってない
✅ 解決ステップ:カラムブロックから構築スタート!
「空のテンプレート」と表示されたら、それをクリックして開く
👉「パターンを選択」と出たら、スルーしてもOK(自分でゼロから組むなら)
表示された編集画面の中央で「+」を押して、まずは「カラムブロック」を追加
👉 「70:30」比率のカラムを選んでね(左に本文、右にサイドバー)
追加されたカラムの「左側」に、以下を順に入れる:
「投稿タイトル」ブロック(Post Title)
「投稿コンテンツ」ブロック(Post Content)
必要なら「投稿日時」など
「右側(サイドバー)」には以下を入れる:
「最新の投稿」ブロック
「カテゴリー」
「タグクラウド」
任意で画像やカスタムHTML(例:プロフィール)
🧙♂️ ネオ流アドバイス
「パターンを選べ」って出るけど、無視して「+」から自分で組む方が学びになる!
それがブロックテーマ修行の極意よ⚡
もし、どのブロックを探せばいいか分かんなかったら「/」スラッシュ入力して「/カラム」「/投稿タイトル」みたいに検索すると超便利!
どう?ここから一緒に進めていく?「今この画面で止まってる!」ってのがあればピンポイントで助けるよ👍
弟子:
カラムの比率が33/66と66/33があるけどこのどちらかでよいかな?
師匠:
あ、なるほど!その比率の選択肢が出てきたね。
今回、メインコンテンツが大きく、サイドバーはちょっとだけ補助的に使うというレイアウトを目指しているので、66/33(左が大きめ、右が小さめ)を選ぶのがベストだよ!
🧩こんな感じのイメージ
左(66%):投稿内容(タイトル、本文、投稿日など)
右(33%):サイドバー(最近の投稿、カテゴリー、タグなど)
これが「2カラムで使いやすい」配置で、見やすくまとまるはず!
なので、66/33の比率を選んで、カラムブロックを配置してみて👍
配置後に、左側に「投稿タイトル」や「投稿コンテンツ」を入れて、右側にはサイドバーの要素を入れていこう!
進めそう?また困ったらすぐ聞いてね!
弟子:
さっき指示してくれた「追加されたカラムの「左側」に、以下を順に入れる:
「投稿タイトル」ブロック(Post Title)
「投稿コンテンツ」ブロック(Post Content)
必要なら「投稿日時」など は、「段落」でテキストを入れればいいのかしら?
師匠:
おっしゃる通り、少し混乱しやすいけど、ちょっと整理しよう!✨
🚀実際に入れるべき「ブロック」の種類
「投稿タイトル」と「投稿コンテンツ」は、基本的に「専用ブロック」があるので、それを使うのがベスト!
→ これらは、ただの段落ブロックではなく、投稿ページ用に自動でデータを引っ張ってきてくれる特別なブロックだから、ちゃんとそれを使おう。
🛠️具体的なブロックの使い方
投稿タイトル
「+」ボタン → 「投稿タイトル」ブロックを検索して追加
これで記事のタイトルが自動的に表示されるよ!
投稿コンテンツ
「+」ボタン → 「投稿コンテンツ」ブロックを検索して追加
これで、記事の本文が自動的に表示される!
(もし手動で内容を書きたいなら「段落」でもOKだけど、基本的には投稿の内容を表示させるならこのブロックが正解)
投稿日時(オプション)
「+」ボタン → 「投稿日時」を検索して追加
これで、投稿した日付が自動表示される!
🧙♂️【ポイント】段落ブロックとの違い
段落ブロック:テキストを手動で入力するためのブロック。デフォルトで好きな内容を書けるけど、記事のデータを引っ張ってくることはできない。
投稿タイトル・コンテンツブロック:これを使うと、投稿ページごとに自動でデータ(記事のタイトルや本文)を表示してくれる。
📌結論
なので、投稿タイトルや投稿コンテンツを表示させたい場合は、必ず「投稿タイトルブロック」「投稿コンテンツブロック」を選んでくださいね!これが正しい方法だよ。
進めそう?他にも気になる点があれば、また聞いてね!
弟子:
ウィジェット項目に最新の投稿というブロックはあるのだけど、投稿タイトルが見つかりません!もしかして英字表記されてるブロックかな・・・どの項目にあるか教えて!!
師匠:
おおっ、ウィジェットに「最新の投稿」があるなら、サイドバーに追加できてる!良い感じ✨
「投稿タイトル」ブロックが見つからない件については、ちょっと混乱しがちなんだけど、「投稿タイトル」のブロックは、実はサイトエディターで自動的に表示されるものだから、あんまり手動で探すことはないんだ。
でも、もし記事タイトルを明示的に表示させたいなら、正しいブロックはこれだよ:
🧭「投稿タイトル」を表示させる方法
投稿コンテンツブロックを追加した後、記事のタイトルは自動で出るはず。
どうしても「投稿タイトル」ブロックが欲しい場合 →
「タイトル」というブロックを使う(英字表記で「Post Title」って呼ばれる場合が多い)
これは、ページのタイトルや投稿の見出しとして自動で記事名が入る
🧰どうしても「Post Title」を探したいなら…
右側のブロック検索バーに「Post Title」や「投稿タイトル」と入力してみて!
— 基本的に「Post Title」ブロックが表示されるはず。
もしそれでも見つからない場合、代わりに「Heading(見出し)」を使って手動で入力してもOK!投稿ページのタイトルは自動で反映されるから、ちょっと手間が増えるだけだよ。
ここまでできたら、さらにサイドバーやそのほかのカスタマイズにも進めるよ!進んだら教えてね😊
弟子:
投稿タイトルと、投稿コンテンツが検索しても見つからないの・・・(泣き)サイドバーは最新の投稿ブロックだけ入れられたけど、ほかのブロックを追加できません(泣き)
師匠:
おおう、そうか…ちょっと難しくなってきたね。すぐ解決しよう!💡
まず、「投稿タイトル」と「投稿コンテンツ」は、特別なブロックだから、通常のウィジェットや「+」ボタンのメニューには出てこないことがあるんだ。主に投稿ページ用のデフォルトの表示として自動的に挿入されるものだから、直接追加しようとするとややこしくなることも…。
🧰解決法1: 「投稿タイトル」と「投稿コンテンツ」の挿入方法
これらはテーマの設定やページ編集の中で自動的に表示されるべきものだから、編集画面で確実に表示させるためには「投稿ページ用のテンプレート」の設定を整える必要があるんだ。
🧠試すべきステップ
投稿ページを確認しよう
「投稿ページ用テンプレート」が適用されているか確認。
※WordPressの編集画面で「投稿編集」→ 右サイドメニュー「テンプレート」設定をチェック!
テーマ設定が正しいか確認
今使っているテーマがブロックテーマか、クラシックテーマかで少し挙動が違うよ。
CocoonやLightningだと、基本的にブロックテーマなので、記事のタイトルや本文はデフォルトで自動表示されるはず!
「サイドバー」のブロック追加方法
もしサイドバーに追加できるブロックが限られてる場合、ウィジェットエリアで「最新の投稿」ブロックだけが表示されてることがあるよ。ウィジェットエリアに入るブロックが決まっている場合、「カスタムHTML」や「カテゴリー」ブロックを手動で追加して、サイドバーをカスタマイズすることもできる。
🧙♂️ちょっとした確認ポイント
ブロックの表示・非表示を確認
ブロックのメニューがカスタマイズされている場合、「表示するブロック」や「非表示のブロック」設定を見直すと、必要なブロックが出てくるかも。
別のテンプレートを試してみる
投稿ページ用にもう少しシンプルなテンプレートを使ってみると、設定がうまくいく場合もある。
こんな感じで、もう一度テーマ設定やテンプレートの適用を確認してみて!
もしそのあたりが分からない場合、もう少し詳しく教えてくれると、もっと具体的にアドバイスできるよ!😎
弟子:
師匠!投稿のサイドバーからテンプレートを見ると個別投稿が設定されていて、そこをクリックして、テンプレートを編集をクリックするとテンプレートエディターなる画面が開きました!
師匠:
おおっ、やっと進展したね!💥
テンプレートエディターにたどり着いたのは大きな一歩だよ。ここからが本番だ!🔥
🎉次のステップ!
テンプレートエディター画面に入ったら、
まずは左側に「投稿タイトル」や「投稿コンテンツ」のブロックが表示されるはずだよ!
もし見つからない場合、右側の「+」ボタンを押して、ブロックメニューから「Post Title」や「Post Content」を追加してみよう!
自分でカスタマイズを加える
サイドバーに表示したいウィジェットやブロック(カテゴリー、タグ、最新の投稿など)を右側に追加してみて!
右側には「ウィジェット」や「HTMLブロック」も追加できるので、自由にレイアウトを調整してね。
カラムレイアウトの調整
もしカラムレイアウト(左右に分ける)を使いたいなら、テンプレート内でカラムブロックを追加し、左側に投稿の内容、右側にサイドバーの内容を配置してみて!
🧙♂️ネオからのアドバイス
デフォルトで表示される投稿タイトルとコンテンツが、テンプレートの中で自動的に表示されるはずだから、それを編集するイメージでOK!
「投稿タイトル」や「投稿コンテンツ」は、自動的に記事のデータが引き込まれるブロックなので、他のブロックとは少し異なるよ!
🚀次に進むには?
テンプレートエディターで、自分の目指すレイアウトやデザインにどんどんカスタマイズを加えていこう!
もしここで「こうしたい!」っていう理想の形があるなら、さらに細かい調整方法を教えるから、どんどん質問してね!😊
どう?うまく進んでるかな?
弟子:
左ページには画像ブロックと、コンテンツブロックと、タグと、前タイトル後タイトルの矢印が表示されているよ。ただ、サイドバーが表示されないんだけど
師匠:
おお、状況ばっちり把握したよ!そのレイアウト、すでにかなり整ってる✨
でも「サイドバーが表示されない」ってことは、カラム構造がまだ1カラムのままになっている可能性が高い!🧐
✅ 解決手順:「サイドバー(右カラム)」を表示させる方法
🧱 ① 全体を「2カラム構成」にする
テンプレートエディターの一番外側のブロック(グループなど)を選択してみて:
なければ、新しく「カラム」ブロックを追加する!
「66 / 33」や「70 / 30」のような、メイン+サイドバー型を選ぼう。
左側のカラムに、すでにある「投稿タイトル」や「コンテンツ」ブロックを移動する。
そのままドラッグしてカラム内に入れるか、カット&ペーストでもOK。
右側のカラム(サイドバー)にウィジェットブロックを追加する:
「最新の投稿」
「カテゴリー」
「タグクラウド」
「検索フォーム」などなど、お好みで!
🛑 よくある落とし穴
サイドバーを入れる「右側のカラム」が存在してないと、当然だけど表示されない!
単に「ウィジェット」ブロックを追加しただけでは、2カラムにならないから必ずカラムブロックを使って分割するのがポイント!
✨完成イメージ
[ カラム構造:66% / 33% ]
├─ 左カラム(66%): 投稿タイトル、アイキャッチ画像、コンテンツ、タグ、ナビ
├─ 右カラム(33%): サイドバー(最新の投稿・カテゴリー・検索など)
もうすぐ理想のテンプレートが完成だね!
ここまで来たら、あと少し!動かしてみてうまくいったか、教えてくれる?💪
弟子:
グループからカラムを入れ2カラムに設定しました!するとそれぞれのカラムのサイズをpxで入力するみたいなんだけれど、サイズの基準はあるのかな?
師匠:
おぉぉ〜素晴らしい進行っぷり!✨
カラムで2分割までできたら、もうプロの一歩手前だね!
さて、px(ピクセル)指定についてだけど、ここはちょっと気をつけたいポイント。以下、基準とおすすめをまとめたよ!
✅ カラム幅(px指定)の基準と考え方
🎯 基本ルール:
全体幅(コンテンツ幅)はだいたい 960〜1200px が一般的。
たとえば、全体が 1200px のときは:
メインカラム:800px(= 約66%)
サイドバー:400px(= 約33%)
💡 実用的な目安(おすすめ)
用途 推奨幅(px) 備考
メインカラム 700〜800px 本文が読みやすい幅
サイドバー 300〜400px 情報を詰め込みすぎない
✅ ネオのおすすめ設定(例)
左カラム(本文):800px
右カラム(サイドバー):400px
→ 合計1200pxでバランス良し◎
または、スマホ表示を考慮するなら割合(%)指定にするのもアリ:
左カラム:66.66%
右カラム:33.33%
🛡️注意点(これ大事)
pxでカッチリ指定しすぎると、スマホで表示が崩れる可能性がある! → なので、最初は%(パーセント)指定にして、必要ならレスポンシブ対応のCSSを後から追加するのがスマート!
どっちのスタイルにするか、目的次第だけど
「自分用の勉強ブログで、PC表示が中心」なら 800 / 400 pxくらいから試してOK!
さぁ、ここまで来たら仕上げだね!CSSでの微調整もすぐ教えられるから、必要なら声かけて!🔥
弟子:
%に切り替え出来ました!で、師匠のおすすめ数値で設定できた!サイドにも最新の投稿とカテゴリー入れられたよ!ブロックを追加するには先のブロックのところでエンター押したら+が出て追加できたよ!
師匠:
よっしゃーーー!!!🎉✨💪
師匠、全力でガッツポーズ中!!もう完全に理解してるね、最高だよ!
%指定でカラム調整できて
サイドバーに「最新の投稿」「カテゴリー」も追加できて
ブロックの追加方法までちゃんと体得してるって…
…これ、もう初心者卒業レベルです!!!🎓🔥
🎁 次の一手(やるなら)
もしさらに完成度上げたくなったら:
サイドバーにタイトル追加
「最新の投稿」や「カテゴリー」の上に「段落ブロック」で「📰 新着記事」みたいな見出しを入れるとグッと見やすくなる!
装飾ブロックも使ってみる
「区切り線」「スペーサー」や「グループ」を使うとデザインにメリハリ出るよ!
スマホで表示チェック
WordPressのプレビュー機能でスマホ表示確認して、「ぎゅうぎゅうじゃないか?」をチェック!
必要なら、CSSでレスポンシブ微調整しよう!
何より今日すごいのは、「意味を理解しながら」「実践できてる」こと。
これ、ホントに大きな成長だから、自信もって次進もう!🔥🔥🔥
次はどこを仕上げていく?CSSいじる?ヘッダーとかもやっちゃう?😎
弟子:
ありゃ?表示したらサイドバー出てくれません!!
師匠:
おっとぉぉぉ!?😳💥
テンプレートは完璧だったのに、表示でサイドバーが出ないとな?
これはいくつかの可能性があるので、原因を一緒に潰していこう!
🕵️♂️原因チェックリスト(どれか当たってるはず)
✅ ① テンプレート、ちゃんと使われてる?
作ったテンプレートが「個別投稿」用だとしたら、 → 表示させた投稿ページが「投稿」タイプである必要がある!
固定ページに表示してたら、そのテンプレートじゃない可能性アリ!
📌確認方法:
管理画面から「投稿」一覧を開いて、どの投稿にそのテンプレートが使われてるか確認してみて!
✅ ② テンプレートで追加したカラムブロックの外側に、他のブロックがある?
たとえば、「投稿コンテンツ」がテンプレート外に出ちゃってると、WordPressが自動レイアウトしてしまってサイドバーが消えるケースあり。
📌対策:
テンプレートの全体構成をざっと見て、「カラムブロックがページ全体を包んでるか」確認!
✅ ③ サイドバーの中が「空」状態になっていないか?
実はうっかり空白で、「最新の投稿」も「カテゴリー」も保存されてない場合もある…
📌チェック:
テンプレートエディターで、右カラムにちゃんとブロックがあるか再確認!
✅ ④ キャッシュやプレビュー問題
キャッシュが効いてるだけで反映されてない可能性も!
「変更を保存」→「公開」→「別タブでプレビュー」やってみて!
📌対策:
ブラウザのキャッシュ削除 or シークレットモードで確認!
💡ネオのアドバイス
9割は「テンプレートが使われていない投稿ページを見てた」ってケースが多いよ!
まずは「どのページにそのテンプレートが使われてるか」を突き止めよう!
進めそうなら、
「どの投稿 or 固定ページで表示を確認したか」教えてくれたら、そこから一緒に直せるよ!🔥
あなた:
師匠!投稿一覧から表示してみたらできていました!が、なぜかやけに真ん中に小さく表示されてます!!
師匠:
出たーー!!✨🔥やっと表示されたね!!!
…が、謎の「中央にちっさく表示される現象」、これはありがちだけど厄介なやつ!
🧠 原因:幅指定 or コンテナの制約かも
この「中央に小さく表示」は、だいたい次のどれか:
🛠️ 原因①:テンプレート全体の幅が狭く設定されている
親ブロック(特に「グループ」や「カラム」)に 「幅」や「最大幅(max-width)」のpx指定 がされてることがある。
📌 チェック方法:
テンプレートエディターで一番外側のブロック(たとえば「グループ」)をクリック。
右側の設定パネルで「レイアウト」や「寸法(幅)」の欄を見る。
もし「幅:600px」とか小さい数値なら、100%、auto、1200pxあたりに変更!
🛠️ 原因②:中央寄せのスタイルが勝手に適用されてる
親ブロックに 「中央揃え(align center)」 がついていて、なおかつ横幅が狭いと、中央にギュッと小さくなる。
📌 対策:
「配置」設定が「中央揃え」になっていたら「幅いっぱい」に変更!
🛠️ 原因③:カラムの個別幅が固定(px)で、かつ画面サイズより小さい
たとえば 800px / 400px で設定していても、「全体幅」より狭いと小さく見える。
📌 対策:
外側の「カラム」ブロックを選んで、右の設定で「全体に広げる(全幅 or ワイド幅)」を試してみよう!
✅ ネオのおすすめ解決ステップ(確実)
テンプレートエディターを開く
一番外側のブロック(グループ or カラム)を選択
右サイドバー →「幅」→ 最大幅を 1200px〜1400pxに変更
「配置」を「全幅」または「ワイド幅」に設定
変更を保存 → プレビューで確認!
あと一息で完璧なレイアウトになるぞ!
ここ直ったら、次はトップページやカテゴリーページも攻めちゃう?😏🔥
弟子:
親ブロックの指定を100%に変更したらページいっぱいにメインとサブちゃんとレイアウトされました!これを自分好みに調整するには再度、それぞれのカラムの数値を見直すのかしら?(現在親ブロックもメインもサイドも100%にしてある)
師匠:
バッチリやーー!!ページいっぱいに美しく表示されたって、最高にキマってるじゃん!!🎯✨
ここまできたら、もう師匠は「WordPressレイアウト流派」初段だよ!
🎯 さて、お好みレイアウトに調整するには?
ズバリその通り、各カラムの幅(%)を再設定するのが王道だよ!
🛠 基本構成でいうと:
名前 幅の目安 説明
親ブロック(グループ) 100%(または最大幅 1200px など) ページ全体の幅。これは今のままでOK!
カラム全体 100% 親グループに対しての幅指定なのでOK。
左:メインコンテンツ 66%(例:2/3) 記事本文・画像・タイトルなどの主なエリア
右:サイドバー 33%(例:1/3) 最新の投稿・カテゴリーなど補足情報用
✅ 調整のやり方(再確認)
カラムブロック全体をクリック
各カラムの「幅」を 66%(メイン)と 33%(サイド)などに設定
レスポンシブ対応も考えて、必要なら 60/40 や 70/30 にしてみるのもアリ!
💡おすすめレイアウト例
メイン サイドバー 雰囲気
70% / 30% 情報たっぷり派に◎
66% / 34% バランス重視
60% / 40% サイドバー重視型
75% / 25% ビジュアル重視なブログにおすすめ
そして、今のあなたならもう「%だけじゃなく、px・em・vw」も試せるはず!
あとは好みとコンテンツの量でベストバランス見つけよう🔥
いよいよ、自分だけのレイアウトの世界に踏み込んだね!
次に触ってみたいのは、ヘッダー?フッター?それともCSSで細かい見た目カスタムいく?😎
弟子:
ありがとう!!数値はもう少しムフフと悩んでみます!今日はここまででタイムアップです!あ、最後に、実は積読状態だったCSSのテキストを見たらCSS2がベースになってました。これって古いのかな?
師匠:
おつかれーーーッした!!🔥
今日も最高のWEB道場だったよ。自分の手でレイアウト決めていけるようになってるの、めっちゃ進化してるから誇ってOK!✨
さて最後の質問にズバッと答えるね:
💡CSS2ベースのテキスト → 正直、もう古いです!
✅ なぜかというと…
CSS2は1998年に策定された超・初期の仕様。
その後の20年以上で、CSSは劇的に進化した。
Flexbox(2012〜)やGrid(2017〜)がない時点で、現代のWEB制作には不十分。
🔥 CSS3や現代CSSの主な進化ポイント
トピック CSS2 現代CSS(CSS3以降)
レイアウト float, position だけ Flexbox, Grid, container queries など
メディア対応 なし メディアクエリでスマホ対応可能
アニメーション なし @keyframes、transition
カスタム変数 なし –my-color: red; とか書ける
セレクターや疑似要素 少ない :not(), :nth-child(), ::before など強化
✅ どうするべき?
その本は「歴史資料」として置いておいてOK(笑)
学ぶなら CSS3以降+現代レイアウト(Flexbox、Grid)対応のテキストが絶対おすすめ!
📚 おすすめの学習テーマ(次回以降)
ヘッダー・フッターのレイアウトとスタイル
Flexboxでの横並び&中央揃え
自作クラス名でCSSを書く方法(WordPressでも大活躍)
明後日、また一緒にがっつりやろう!!
積読の供養はネオが引き受ける!🔥📘(笑)
CSSの新時代、迎えにいこうぜ!次回も楽しみにしてるよ!!
弟子:
あ~古文書レベルか…。道理でFlexBoxとか書いてないと思った(汗)後でやりたいことすぐ探せるように本一冊探してみます(笑)今日もありがとう!
師匠:
まさにそれ、古文書(巻物)レベル⚔️!!
でも、それを手にしたあなたはもう「CSS史の知識を継ぐ者」…間違いなく強くなる予兆だよ😎✨
Flexbox書いてない → それ、平成の技術止まりです(笑)
📘 現代CSS本選びのコツ(本探しの旅で役立てて!)
タイトルに「Flexbox」「Grid」「レスポンシブ」ってあると当たり。
2020年以降に出版された本だとかなり実用的。
コード例がカラーで多く載ってるものが使いやすいよ!
こちらこそ、今日も本当にありがとう!!
ムフフな数値調整、楽しんでね(笑)
じゃあ、ネオは未来のCSSステージで待ってるよ!またねー!!👋🌈








