ブログページの作り方ガイド
ブログページの作り方ガイド
> こんな質問に答えます:
> - ブログページはどうやって作るの？
> - ブログのデザインを変えたい・サンプルが見たい
> - 記事のサイドバーを消したい／付けたい
> - カテゴリーごとにブログの見た目を変えられる？
> - 記事一覧（カテゴリーページ）のデザインはどこで変える？
> 別名・よくある呼び方: ブログ作成、記事の作り方、投稿の作り方、ブログデザイン、記事一覧のデザイン、カテゴリーページ、お知らせページ、ニュースページ、ブログのレイアウト
> このページのURL: https://lite-word.com/manual/use-case-blog/
LiteWordでブログ（投稿）を作り、見た目を整えるまでの実践ガイド。業種別のおすすめ設定も紹介する。
最初に知っておくこと — ブログは「ブロック」ではなく「設定」で決まる
固定ページとブログは、デザインの決まり方が根本的に違う。 ここを取り違えると迷子になる。
| 固定ページ（トップ・サービス紹介など） | ブログ（投稿・記事一覧） | |
|---|---|---|
| 見た目を決めるもの | ページに置いたブロック | カスタマイザーの設定 |
| ページごとに違う見た目にできるか | できる（置くブロックを変えるだけ） | 記事1本ずつではなく、サイト全体／カテゴリー単位で決める |
| 作業する場所 | ページの編集画面 | 外観 → カスタマイズ と 投稿 → カテゴリー |
つまり、記事の本文を書き直さなくても、設定だけでブログの印象は大きく変えられる。
逆に、記事の編集画面をいくら探してもサイドバーや見出しのデザインは出てこない。
> 📖 実物のサンプルを見る: ブログ見本集
> 6業種・30通りの組み合わせを、実際のページで確認できる。「うちの業種だとこう見える」から選べる。
作成手順
ステップ1: カテゴリーを作る（記事より先）
記事を書き始める前にカテゴリーを決めておくと、あとの見た目の出し分けが楽になる。
- WordPress管理画面 → 投稿 → カテゴリー
- 名前（例: お知らせ／施術について／よくある質問）を入力
- スラッグを半角英数で入力（例:
newscasefaq）。URLに使われる - 「新規カテゴリーを追加」 をクリック
> ポイント: カテゴリーは後から「そのカテゴリーだけ別のデザイン」にできる唯一の単位。
> 「お知らせは文字だけの一覧、事例は写真つきカード」のような出し分けはここから始まる。
→ 詳細: カテゴリ設定
ステップ2: 記事を書く
- 投稿 → 新規追加
- タイトルを入力
- 本文は見出し（H2・H3）で区切って書く。見出しがないと目次が作られない
- 右サイドバーの 「カテゴリー」 でステップ1のカテゴリーにチェックを入れる
- 「アイキャッチ画像」 を設定する（記事一覧のサムネイルになる）
- 「公開」
> ポイント: 見出しの数が目次の出方を決める。あとで「目次を出したいのに出ない」となる原因の大半は、
> H2が設定した出現条件の数に足りていないこと。
→ 記事の書き方そのもの: ブログの書き方・ネタの見つけ方
→ アイキャッチ: アイキャッチ画像とは
ステップ3: 記事ページの見た目を決める
外観 → カスタマイズ → 「デザイン設定 - 投稿ページ」
ここで決めるのは次の7つ。すべてサイト全体の投稿に効く。
| 設定 | 選べるもの | ブログの印象への効き方 |
|---|---|---|
| カラム | 2カラム右（既定）／1カラム／2カラム左 | いちばん大きく変わる。読み物なら1カラム、回遊させたいなら2カラム |
| 見出しデザイン | H2・H3・H4それぞれ27の選択肢（「未指定」を除くと26種） | 2番目に大きい。下線系＝落ち着く、背景色系＝にぎやか |
| 目次 | 表示／非表示・2パターン・出現条件（H2が2〜6個以上） | 長い記事ほど効く。士業・医療の解説記事は必須級 |
| ファーストビュー | パターン１／パターン２／ショートコード | 記事タイトル周りの見せ方。ショートコードを選ぶと入力欄が出て、任意のショートコードの出力をFVにできる |
| パンくず | パターン1（記事上）／パターン2（記事下）／非表示 | SEOに有効。基本は出す |
| シェアボタン | タイトル下・記事下 × SNS各5枠（14種＋URLコピー） | 拡散を狙うなら。日本ではX・Facebook・LINE・はてブが定番 |
| 投稿日時・更新日時 | 表示／非表示（見た目のみ）／完全に非表示 | 更新日を出すと「新しい情報」と伝わる |
→ 詳細: 投稿ページ設定
→ ⚙️ 投稿ページ設定を開く
ステップ4: 記事一覧（カテゴリーページ）の見た目を決める
外観 → カスタマイズ → 「デザイン設定 - アーカイブページ」
記事が2〜3本たまってから調整すると、実際の見え方で判断できる。
| 設定 | 選べるもの | 向いている使い方 |
|---|---|---|
| ファーストビュー | 非表示／パターン1（既定）／2／3／4（プレミアム限定） | ページ上部の見出し帯。背景色・文字色・画像・フィルタも調整できる |
| 投稿一覧 | パターン1（既定・写真つきカード）／2（横並びリスト）／3（お知らせ一覧用）／4 | 写真が主役なら1、量を見せるなら2、文字だけのお知らせなら3 |
| デフォルト画像 | 任意の画像 | アイキャッチ未設定の記事に使われる。設定しておくと一覧が崩れない |
→ 詳細: アーカイブページ設定
→ ⚙️ アーカイブ設定を開く
ステップ5: メニューから辿れるようにする
作っただけではブログに入口がない。
- 外観 → メニュー
- 左の 「カテゴリー」 を開き、ステップ1のカテゴリーにチェック
- 「メニューに追加」 → 位置を整えて 「メニューを保存」
→ 詳細: メニューの作り方
どこまで細かく変えられるか（3つの層）
LiteWordのブログの見た目は サイト全体 → カテゴリー → 記事1本 の3層で決まる。
下の層の設定が優先される。
| 変えたいもの | サイト全体 | カテゴリー単位 | 記事1本ごと |
|---|---|---|---|
| カラム（サイドバーの有無・左右） | ✅ | ✅ | — |
| 記事一覧のパターン | ✅ | ✅ | — |
| アーカイブFVのパターン | ✅ | ✅ | — |
| 投稿FVのパターン | ✅ | ✅ | ✅ |
| 目次の表示／非表示 | ✅ | ✅ | ✅ |
| メインカラーなどの色 | ✅ | — | ✅ |
| 見出しデザイン（26種） | ✅ | — | — |
| 目次のパターン・出現条件 | ✅ | — | — |
| パンくず・シェアボタン・日時 | ✅ | — | — |
この表の読み方が、そのままできること・できないことの一覧になる。
- 「お知らせだけ1カラムの文字リストにしたい」 … カテゴリー単位でできる（ステップ6）
- 「この記事だけ色を変えたい」 … 記事の編集画面でできる（ステップ7）
- 「この記事だけ見出しのデザインを変えたい」 … できない。 見出しはサイト全体の設定
（どうしてもという場合はカスタムCSSで対応 → カスタマイズ）
カテゴリーごとに変える
- 投稿 → カテゴリー → 対象カテゴリーの 「編集」
- 下の項目を設定して 「更新」
| 画面の項目名 | 効果 | 選べるもの |
|---|---|---|
| 投稿ページ：レイアウト | そのカテゴリーの記事だけカラムを変える | 未選択／1カラム／2カラム（左サイドバー）／2カラム（右サイドバー） |
| 投稿ページ：FVパターン | そのカテゴリーの記事だけFVを変える | 未選択／パターン1／パターン2／パターン3 |
| 投稿アーカイブ：FVパターン | そのカテゴリーの一覧ページだけFVを変える | 未選択／パターン1／2／3／非表示 |
| 投稿アーカイブ：投稿一覧パターン | そのカテゴリーの一覧ページだけ並べ方を変える | 未選択／パターン1／2／3／4 |
| 目次の表示 | そのカテゴリーの記事だけ目次を出す／出さない | — |
| カテゴリー画像 | そのカテゴリーの一覧ページのFV背景画像 | 画像を選択 |
> 🚨 同じ「FVパターン」でも、画面によって選べるものが違う。
> 投稿ページのFVは、カスタマイザーではパターン1・2・ショートコードの3つ、
> カテゴリー画面ではパターン1・2・3の3つ。パターン3はカテゴリー画面からしか選べない。
> 逆にアーカイブFVのパターン4（プレミアム）は、カテゴリー画面には出てこない（カスタマイザー専用）。
> よくある使い方: 「お知らせ」＝1カラム＋一覧パターン3（文字だけ）／
> 「施工事例」＝2カラム右＋一覧パターン1（写真カード）。同じサイトの中で両立できる。
→ 詳細: カテゴリ設定
記事1本だけ変える
記事の編集画面（右サイドバー、または本文下の設定欄）から:
- ファーストビューのパターン・背景画像・SP用画像・比率・フィルタ色・サブタイトル
- 目次の表示／非表示
- メインカラーなどの色（この記事だけ配色を変えられる）
→ 詳細: 投稿編集画面の設定
業種別のおすすめ設定
ブログ見本集 で実際に見られる6業種の設定。
そのまま真似ればよい出発点として使える。
| 業種 | 記事の性格 | カラム | 見出し（H2） | 目次 | 記事一覧 |
|---|---|---|---|---|---|
| 整体・接骨院 | 症状の解説 | 2カラム右 | 背景色 | パターン1 | パターン1（写真カード） |
| 行政書士・士業 | 手続きの解説（長文） | 2カラム左 | 左線（太い） | パターン2 | パターン2（横並び） |
| クリニック・歯科 | 治療の説明 | 1カラム | 下線 | パターン1 | パターン1 |
| 美容室・サロン | スタイル紹介（写真主役） | 1カラム | 左角四角（大） | 出さない | パターン4 |
| カフェ・飲食店 | 新メニュー・お知らせ | 2カラム右 | 背景色（透過）＋左線 | 出さない | パターン3（お知らせ用） |
| 工務店・リフォーム | 施工事例 | 2カラム右 | 囲み二重線（角丸） | パターン1 | パターン2 |
選び方の目安:
- 記事が長い（1500文字以上・見出しが5個以上）→ 目次を出す。カラムは2カラムでも1カラムでもよい
- 写真で見せる（施術例・スタイル・料理・施工事例）→ 1カラムか、一覧をパターン1（写真カード）に
- 短いお知らせが多い → 一覧をパターン3（お知らせ用）。サムネイルなしで詰めて並ぶ
- 読ませたい読み物 → 1カラム。サイドバーが無いほうが文章に集中できる
サイドバーに何を出すか
2カラムを選んだ場合、サイドバーの中身は 外観 → ウィジェット の「サイドバー」エリアで決める。
ブログでよく使うウィジェット:
| ウィジェット | 役割 |
|---|---|
| カテゴリー | 読者が同じテーマの記事を辿れる |
| 最近の投稿 | 更新していることが伝わる |
| 著者プロフィール（LiteWord独自） | 誰が書いているかで信頼感が変わる |
| 検索 | 記事が増えてきたら必須 |
| マイパーツ（LiteWord独自） | 予約ボタン・CTAなどを差し込める |
→ 詳細: ウィジェットエリア / カスタムウィジェット
よくある質問
Q: ブログのサイドバーを消したい
A: サイト全体なら 外観 → カスタマイズ → 「デザイン設定 - 投稿ページ」→ カラム設定 で「1カラム」を選ぶ。
特定のカテゴリーだけなら 投稿 → カテゴリー → 編集 → 投稿ページレイアウト で「1カラム」を選ぶ。
記事1本だけサイドバーを消すことはできない。
Q: この記事だけ見出しのデザインを変えたい
A: できない。見出しデザインはサイト全体で共通の設定（外観 → カスタマイズ → デザイン設定 - 投稿ページ → 見出し設定）。
カテゴリー単位・記事単位の上書きは用意されていない。どうしても必要ならカスタムCSSで対応する。
Q: 目次が出ない
A: 3つ確認する。(1) 投稿ページ設定の目次が「表示する」になっているか。
(2) 出現条件（H2がいくつ以上）を記事が満たしているか。
(3) そのカテゴリーの設定で目次がOFFになっていないか（カテゴリー設定はサイト全体設定より優先される）。
Q: お知らせページを文字だけのシンプルな一覧にしたい
A: 記事一覧のパターン3（お知らせ一覧用）を使う。サイト全体なら
外観 → カスタマイズ → 「デザイン設定 - アーカイブページ」→ 投稿一覧、
お知らせカテゴリーだけなら 投稿 → カテゴリー → 編集 → 投稿一覧パターン で選ぶ。
Q: トップページに最新記事を出したい
A: それはブログの設定ではなくブロックの話。固定ページに lw-post-list-* や lw-news-list-* ブロックを置く。
→ 詳細: 記事一覧・ニュースブロック
Q: 記事ごとに色を変えられる？
A: できる。記事の編集画面でメインカラーなどを指定すると、その記事だけ配色が変わる。
指定しなければサイト全体の色（外観 → カスタマイズ → 共通設定 - カラー）が使われる。
Q: ブログの設定に有料のものはある？
A: ほとんど無料で使える。アーカイブFVのパターン4だけがプレミアム限定。
カラム・見出し26種・目次・パンくず・シェアボタン・記事一覧4パターンは無料プランで使える。
Q: 実際どう見えるのか先に確認したい
A: ブログ見本集 で6業種・30通りを実物のページで見られる。
業種で絞り込めるので、自分の商売に近いものから見るとよい。
関連ページ
最終更新: 2026-08-30