WEBSITE HANDBOOK
見やすいページは、装飾よりも情報の順番から作ります。読者の疑問を一つ決め、見出し、本文、画像、リンクを整えたら、スマートフォンとキーボードで読み進められるか確認しましょう。
目的から操作教材を探す
文章を整える
- 左寄せ・中央揃えにする — 段落を揃え、スマホの折り返しを確認します。
- 見出しを付ける — 見出し2・3で文章を区切ります。
- 箇条書きと番号付きリスト — チェック項目と操作順を整理します。
- 引用文と出典を示す — 引用部分と自分の説明を分けます。
- 書式なしで貼り付ける — 余分な色や文字サイズを持ち込まず入力します。
- 区切り線を入れる・消す — 話題の境目に横線を入れ、不要な線を外します。
- 文字色を変更して戻す — 必要な文字だけ色を付け、指定を解除します。
写真・リンク
- 画像が表示されないとき — 本文・アイキャッチ・リンク先を分けて確認します。
- 画像にキャプションを付ける — 写真の下に短い説明を表示します。
- 画像リンクを設定・解除する — 画像を押したときの移動先を確認します。
- 本文に画像を入れる — メディア選択から挿入まで進みます。
- 画像の代替テキスト — 画像の役割に合う説明を設定します。
- アイキャッチ画像 — 記事を代表する画像を設定します。
- 記事にリンクを貼る — 文字を選び、移動先を設定します。
保存・公開
- ブログに広告を掲載する前の準備 — 掲載サイトと素材を選び、コードの設置と公開後の点検へ進みます。
- 下書き保存とプレビュー — 公開前に保存し、見た目を確認します。
- 公開した記事を修正する — 同じ記事を編集して更新します。
- カテゴリーとタグ — 既存の分類を選び、公開後にカテゴリー別一覧から記事を探すまで確認します。
- 公開したはずの記事が見つからない — 保存状態と通常URLを順に確認します。
実践1：投稿画面でタイトルと本文を書く
原稿を貼り付けたときに文字の色や大きさが混ざる場合は、書式なしで貼り付ける方法と装飾の解除を確認してください。
本文の区切りを整えるには、見出し2・見出し3の付け方と段落への戻し方へ。太字との違いも実画面で確認できます。
書きかけの記事を残して続きを書く方は、下書き保存と再編集の手順へ。「公開」との違い、保存した記事を探す入口を実画面で確認できます。
ここでは、この教科書サイトで実際に使っているクラシックエディターの画面で説明します。「ビジュアル」「コード」のタブがある方は、同じ順番で操作できます。ブロックを追加する「＋」がある画面を使っている方は、下の「画面が違う場合」を確認してください。
- 管理画面の左側で「投稿→投稿を追加」を押します。以前の記事を続ける場合は「投稿一覧」から該当するタイトルを押します。
- 上部の「タイトルを追加」に記事名を入力します。練習例は「はじめての記事を書く練習」です。
- 本文欄の右上で「ビジュアル」を選び、白い本文欄を押して文章を書きます。Enterキーで次の段落に進みます。
- 見出しにしたい行へカーソルを置き、ツールバーの「段落」の選択欄から「見出し2」を選びます。続く本文の行は「段落」に戻します。
- 右側の「公開」欄にある「下書き保存」を押します。「投稿の下書きを更新しました。」と表示され、ステータスが「下書き」であることを確認します。
「公開範囲：公開」だけでは公開済みとは限りません。この画像はステータスが「下書き」です。下書き保存と「公開」ボタンを取り違えないようにしましょう。
実践2：本文に画像を入れる
画像の説明をどこに書くか迷ったら、代替テキストの設定とキャプションの違いへ。入力欄と、記事へ挿入する前の確認を実画面で説明しています。
- 本文の画像を入れたい位置を押します。文章の途中へ入れたくない場合は、段落の最後でEnterキーを押し、新しい段落を用意します。
- 本文欄の上の「メディアを追加」を押します。
- 新しい画像は「ファイルをアップロード→ファイルを選択」で、自分の端末から選びます。すでに登録した画像は「メディアライブラリ」で選びます。画像が多いときは「メディアを検索」にファイル名の一部を入力します。
- 選んだ画像にチェックが付いたら、右側の「代替テキスト」に内容を説明する短い文を入力します。入力後は別の欄を押してから、挿入へ進みます。説明に必要な画像と飾り画像の違いは、このページの「画像は何を伝えるかで説明を変える」で解説しています。
- 右側を下へスクロールし、「添付ファイルの表示設定」を確認します。通常の説明画像なら「リンク先：なし」、細かい文字がある操作画面なら読み取れる「サイズ」を選びます。
- 右下の「投稿に挿入」を押します。本文へ画像が表示されたことを確かめてから、「下書き保存」を押します。
画像が大きすぎる・小さすぎる場合は、本文内の画像を押して編集用の鉛筆アイコンからサイズを見直します。本文へ入れる画像と、記事一覧に使う「アイキャッチ画像」は別の設定です。
実践3：記事のカテゴリーを選ぶ
分類の決め方に迷ったら、カテゴリーとタグの使い分け・設定手順へ。入力場所から保存後の確認まで実画面で説明しています。
カテゴリーは、同じ話題の記事をまとめる分類です。この記事では、練習記事を「デザイン・記事づくり」に分類します。
- 投稿の編集画面で、右側の「カテゴリー」欄を探します。閉じている場合は見出しを押して開きます。
- 「カテゴリー一覧」から、記事の内容に合う名前にチェックを付けます。画像では「デザイン・記事づくり」を選んでいます。
- 目的のカテゴリーを選んだら、不要な「未分類」のチェックを外します。
- 「下書き保存」を押します。公開済みの記事を変更する場合は「更新」を押します。
- 編集画面を開き直し、選んだカテゴリーにチェックが残っていることを確認します。
新しい分類を作るときは、欄の下の「＋カテゴリーを追加」を押し、カテゴリー名を入力して「カテゴリーを追加」を押します。たとえば料理ブログなら「朝ごはん」「お弁当」のように、読者が探す内容で分けます。分類が細かくなりすぎないよう、既存の名前も確認してから追加しましょう。
実践4：アイキャッチ画像を設定する
設定から差し替えまで続けて確認したい方は、アイキャッチ画像の設定・変更と表示確認へ。本文画像との違いと、表示されない場合の確認順もまとめています。
アイキャッチ画像は、記事を紹介するための代表画像です。本文へ画像を挿入する操作とは別に設定します。ここでは、登録済みの教材画像を使って設定の流れを確認します。
- 投稿の編集画面で「アイキャッチ画像」欄を探し、「アイキャッチ画像を設定」を押します。
- 「メディアライブラリ」で使う画像を選びます。端末から新しい画像を入れる場合は「ファイルをアップロード→ファイルを選択」を押します。
- 目的の画像にチェックが付いたことを確認し、右下の「アイキャッチ画像を設定」を押します。
- 編集画面へ戻ったら、「アイキャッチ画像」欄に選んだ画像が表示されたことを確認します。
- 「下書き保存」または公開済み記事の「更新」を押します。編集画面を開き直しても画像が残っていれば保存できています。
- 「プレビュー」で記事の見た目を確認します。公開後は記事一覧のサムネイルも見て、画像の切れ方や文字の読みやすさを確かめます。
差し替える場合は、欄に表示された画像そのものを押して別の画像を選び直します。外す場合は「アイキャッチ画像を削除」を押してから保存します。これは記事への設定を外す操作で、メディアライブラリの画像ファイルを完全に削除する操作ではありません。
代表画像は記事の内容が伝わるものを選び、文字や重要な被写体を端へ詰め込みすぎないようにします。本文の説明画像を変えたい場合は、上の「本文に画像を入れる」の手順で編集してください。
実践5：記事内リンクを入れる・直す・外す
文章の出典を示すときは、引用文と出典リンクの付け方で、引用枠と自分の説明を分ける操作を確認できます。
リンク操作だけを順に確認したい方は、リンクの追加・修正・解除を実画面で見るへ。開かないときの確認方法もまとめています。
関連する教材へ案内するときは、移動先が分かる言葉にリンクを付けます。ここでは「WordPressの初期設定を確認する」という文字から、サイト内の初期設定ガイドへ進むリンクを作ります。
① 文字を選び、リンク先を入れる
- 「ビジュアル」の本文欄に「WordPressの初期設定を確認する」と入力し、リンクにしたい文字をドラッグして選びます。
- ツールバーの鎖の形のリンクボタンを押します。WindowsではCtrl＋Kでも開けます。
- 「URLをペーストまたは入力して検索」の欄へ、案内したい公開ページのURLを貼り付けます。例は
https://wordpress.digitalcore.jp/wordpress-basics/です。 - 「リンク設定」の歯車ボタンを押すと、下の画面が開きます。「URL」と「リンク文字列」を確認し、右下の「更新」を押します。短いURL入力欄の「適用」でもリンクを付けられます。
② 付けたリンクを変更・解除する
本文のリンク文字を押すと、移動先と操作ボタンが表示されます。
- 移動先を直す：リンク文字を押し、鉛筆の「編集」を押します。URLを直して「適用」を押します。リンク文字列も確認するなら「リンク設定」を開き、直した後に「更新」を押します。
- リンクだけ外す：リンク文字を押し、「リンクを削除」を押します。文章は残り、クリックできるリンクが外れます。
- 修正後は「下書き保存」、公開済みの記事なら「更新」を押します。
③ プレビューでリンクを開く
- 保存後に「プレビュー」を押し、リンク文字が意図した場所にあるか確認します。
- サイト内のリンクを押し、予定したページのタイトルと内容が開くか確かめます。例では「WordPressの基本と初期設定」が開けば確認完了です。
- 戻るボタンで記事へ戻り、前後の文章も読みます。「こちら」だけでなく、移動先が分かるリンク名になっているか見直します。
リンク先には公開ページのURLを使い、管理画面や下書きプレビューのURLを貼らないようにします。広告リンクはASPが発行した正規コードを使い、この練習用リンクと同じ方法でコードを書き換えたり、確認のために自分でクリックしたりしません。
実践6：プレビューして、修正を保存する
公開した記事を直す場合は、公開済み記事の修正・更新と反映確認へ。下書き保存との違いと、修正が表示されないときの確認順を実画面で説明しています。
- 下書き保存が完了してから、右側の「プレビュー」を押します。別タブで記事の見た目が開きます。
- タイトル、見出し、本文、画像を上から順に見ます。「この記事で練習すること」のような見出しが本文と区別できるか、画像の文字を読めるかを確認します。
- 修正するときは元の編集タブへ戻ります。文章や画像を直したら、もう一度「下書き保存」を押し、新しいプレビューで確認します。
- 公開する内容が整ったら、編集画面の公開日時・カテゴリーなどを確認して「公開」へ進みます。公開後はステータスが「公開済み」になったことと、ログインしていない状態でも記事を読めることを確認します。
下書きのプレビューURLを相手に送っても、同じ画面を見られるとは限りません。公開用URLとプレビューを区別してください。練習中は下書きのままで構いません。
画面が違う場合：ブロックエディター
「ビジュアル」「コード」がなく、ブロックを追加する「＋」がある場合は、タイトル欄に記事名を入力し、その下へ段落を追加します。「＋」から「見出し」「画像」を選び、画像ブロックの「アップロード」または「メディアライブラリ」で画像を入れます。「下書き保存」で保存し、プレビューで記事の見た目を確認します。
管理画面をまだ開けない方はWordPressの基本と初期設定へ。WordPressをこれから設置する方はサーバーとドメインの選び方で、設置機能と継続費用を確認してください。
1．読者の疑問をタイトルにする
書き始める前に「誰が、何を知りたくて、このページを開くか」を一文にします。例は「WordPressを設置した人が、最初の投稿を公開する手順を知りたい」。この場合、「便利な使い方」よりも「WordPressで最初の記事を公開する手順」のほうが内容を伝えやすくなります。
冒頭には対象者と到達点を書きます。例は「管理画面にログインできる方向けに、下書き保存から公開確認までを説明します」。検索語を繰り返すための前置きや、実際に確かめていない効果の断言は加えません。
2．見出しだけで作業順が分かるようにする
本文より先に「準備する」「入力する」「保存する」「表示を確認する」という骨組みを作ります。手順の中には操作場所、入力例、操作後の確認を含めましょう。たとえば「タイトル欄に記事名を入力し、下書き保存。保存完了の表示を確認する」という形です。
- 一つの段落では一つの話題を扱い、話が変わるところで段落を分けます。
- 順番が大切な作業には番号付きリスト、並列の条件には箇条書きを使います。リストの作成・項目追加・段落へ戻す手順を実画面で確認できます。
- 見出しは文字を太くするだけでなく、見出しとして設定します。
- 一般的に記事タイトルがH1なら、大きな区切りをH2、その中の小見出しをH3にします。見た目の大きさだけで階層を選びません。
W3Cの文章作成ガイドでも、意味のあるタイトル、見出しの構造、分かりやすいリンク名が案内されています。記事の文字数を埋めるより、読者が手順を再現できる情報を優先します。
3．色と文字のルールをそろえる
最初はテーマの標準設定を土台にし、本文の文字色、背景、リンクの見た目をそろえます。薄い灰色の文字を薄い背景へ置いたり、重要な説明を小さな文字に押し込んだりしないようにしましょう。リンクは色だけでなく下線などでも区別できると見つけやすくなります。
W3Cの簡易チェックでは、通常サイズの文字と背景に少なくとも4.5対1のコントラスト比を挙げています。コントラスト確認ツールで数値を調べ、写真の上の文字も実際の背景と合わせて確認します。この数値だけでページ全体のアクセシビリティを判定できるわけではありません。
空白や改行を連打して位置を合わせると、画面幅が変わったときに崩れやすくなります。余白や配置は、使っているテーマやブロックの設定で調整します。
4．画像は「何を伝えるか」で説明を変える
使う権利のある画像を選び、必要な部分を切り出してから掲載します。操作画面にはメールアドレス、認証情報、個人の名前などが写っていないか確認してください。
- 説明に必要な画像：代替テキストへ重要な内容を記入。例「表示設定でホームページに『ホーム』を選択した画面」。
- 純粋な飾り：内容の理解に不要な画像なら代替テキストを空にします。
- リンクやボタンの画像：見た目ではなく、移動先や操作の目的を伝えます。
代替テキストに検索語を詰め込む必要はありません。図に手順や細かな数値が多い場合は、本文にも同じ情報を説明します。判断に迷ったらW3Cの画像チュートリアルで、画像の役割に合う例を確認してください。
5．保存してから、実際の表示で確かめる
ブロックエディターでは、段落、見出し、画像などをブロックとして追加し、下書き保存とプレビューを使って確認できます。クラシックエディターではツールバーやメディア挿入を使うため、同じボタン配置にはなりません。サイト全体の色やメニューを変える場所も、テーマにより「エディター」「カスタマイズ」など異なります。
- スマートフォンで本文とメニューを開き、文字やボタンが欠けず、横にはみ出さないか見ます。
- パソコンで文字やページを拡大し、文章の重なり、消える内容、操作できない部分がないか確認します。
- Tabキーでリンクやボタンへ移動し、選択位置が見え、必要な操作ができるか試します。
- 「こちら」だけのリンクを「WordPressの初期設定を確認する」のような名前へ直し、移動先も開いて確かめます。
6．読者が次へ進めれば完成
完成の目安は、見出しだけで流れが分かり、本文で作業でき、最後に完了を確かめられることです。末尾には関連する次の作業を一つ案内します。料金や操作手順は内容を確かめ、変更があれば本文と画像を更新しましょう。
参考資料
公開後の運営に備える
これからWordPressを設置する方は、継続費用とバックアップ・復元の条件を確認してからサーバーを選びましょう。サーバーとドメインの選び方に確認項目をまとめています。
