WordPressの基本操作ガイド② 記事の投稿<基本編>|ブロックの使い方

前回のWordPressの基本操作ガイド①では、管理画面の全体像と、日常の更新で使う機能を確認しました。今回は第2回として、実際に記事を1本書き上げるまでの操作を解説します。

WordPressの記事作成画面は「ブロックエディター」と呼ばれ、文章・見出し・画像などをブロックという箱に入れて、上から順に積み重ねていく仕組みです。この考え方さえつかめば、あとは手を動かすだけで記事が完成します。

ブロックの種類は100以上ありますが、お知らせやブログを書くうえで実際に使うのは5種類だけ。この記事では、その5つに絞って解説します。

この記事でわかること
  • ブロックエディターの基本的な考え方と、ブロックの追加・移動・削除の方法
  • 本当によく使う5つのブロック(段落・見出し・リスト・画像・ボタン)の使い方
  • 文字装飾のツールバーの見方と、読みやすくするコツ
  • 下書き保存・プレビュー・公開までの手順
  • 作業が速くなるショートカットキー
テーマによって画面が異なります

本記事はWordPress標準のブロックエディターを基準に解説しています。「SWELL」など高機能なテーマをお使いの場合、テーマ独自のブロック(SWELLボタンなど)が追加で表示されます。基本的な操作の流れは同じですので、ご自身の画面と読み替えながらお読みください。

目次

記事作成画面を開く

STEP

「投稿」→「新規投稿を追加」

管理画面の左メニューからをクリック

STEP

一番上の「タイトルを追加」欄に記事タイトルを入力

STEP

その下の本文エリアに内容を書いていく

タイトルは、記事の内容がひと目で伝わるものにしましょう。検索結果に表示される文字数の目安は30文字前後です。長すぎると途中で省略されてしまいます。

タイトルづくりの3つのコツ
  • 読者が検索しそうな言葉を、できるだけ前半に入れる
  • 「〇〇の方法3選」「初心者向け」など、内容の具体性を示す
  • 社内用語ではなく、お客様が使う言葉で書く

「ブロック」という考え方を図でつかむ

ブロックエディターでは、記事はブロックの縦積みでできています。「段落ブロック」「見出しブロック」「画像ブロック」といった箱を、上から順番に並べていくイメージです。

記事=ブロックの積み重ね タイトル(自動的にh1になります) 段落ブロック 見出しブロック(h2) 見出しブロック リストブロック 画像ブロック 上から順に 積む
ブロックを上から順に積み重ねることで、1本の記事ができあがります

ブロックの追加・移動・削除

追加する

本文エリアでEnterキーを押すと、新しいブロックが下に追加されます。ブロックの種類を選びたいときは、次のどちらかの方法を使います。

  • 「+」ボタンをクリック … ブロック一覧が開きます。「すべて表示」を押すと左側に全ブロックが並びます
  • 半角の「/(スラッシュ)」を入力 … 「/見出し」「/画像」のように打つと候補が絞り込まれます。慣れるとこちらが圧倒的に速いです

順番を入れ替える

ブロックを選択すると、ブロックの上または左側に小さな上下の矢印が表示されます。これをクリックすると、ブロックごと上下に移動します。矢印の間にある点々(ドラッグハンドル)をつかんで、任意の位置へドラッグすることもできます。

削除する

ブロックを選択し、ツールバー右端の「⋮」(3点リーダー)→「削除」で消せます。CtrlZ(MacはCommandZ)で元に戻せるので、まずは気軽に試して大丈夫です。

記事全体の構造を確認する

画面左上にある横棒3本のアイコン(リスト表示)を押すと、記事内のブロックが一覧で表示されます。「見出しの順番はおかしくないか」「不要なブロックが残っていないか」を確認するのに便利です。記事が長くなったときほど効果を発揮します。

よく使う5つのブロック

ブロック使う場面呼び出し方
段落通常の文章そのまま入力(初期状態)
見出し話題の区切り/見出し
リスト複数項目の列挙/リスト
画像写真・図解の挿入/画像
ボタン問い合わせ等への誘導/ボタン

① 段落|文章を書く基本ブロック

記事作成画面を開いた直後は、すでに段落ブロックが選ばれています。そのまま文字を打てば文章になります。改行して次の話に進みたいときはEnterキー、同じ段落の中で行だけ変えたいときはShiftEnterです。

読みやすい段落の目安

1段落は3行以内を意識しましょう。スマートフォンで見ると、パソコンの1行が2〜3行に折り返されます。パソコン画面で「ちょうどいい」と感じる長さは、スマートフォンでは長すぎることが多いのです。

② 見出し|記事の骨組みをつくる

見出しは、話題の区切りを示すブロックです。ツールバーの「H2」「H3」といった表示から、見出しのレベルを選べます。

見出しは「大きい順」に使う h1|記事タイトル(WordPressが自動でつけます) h2|大きな話題の区切り 例:よく使う5つのブロック h3|h2の中の小見出し 例:① 段落 h4|さらに細かい補足 h3|次の小見出し 例:② 見出し ✕ h2の次にいきなりh4を使う  ◯ h2 → h3 → h4 の順に下げる
見出しは階層構造。飛ばさずに1段ずつ下げるのがルールです

WordPressでは記事タイトルが自動的にh1になります。そのため、本文の見出しはh2から使い始めるのが正解です(見出しブロックの初期値もh2になっています)。

見出しレベルを飛ばさない

「h2の次にいきなりh4」といった使い方はNGです。検索エンジンは見出しの階層から記事の構造を読み取っているため、順序が乱れると内容が正しく伝わりません。また、音声読み上げソフトを使う読者にも不親切になります。見た目の大きさで選ぶのではなく、意味の階層で選ぶと覚えてください。

③ リスト|箇条書きで整理する

「/リスト」で呼び出すと、先頭に「・」がついた箇条書きになります。Enterで次の項目に進み、Tabキーで1段階下げて入れ子にできます。

ツールバーから、番号付きリスト(1. 2. 3.)への切り替えも可能です。手順を説明するときは番号付き、並列の項目を並べるときは箇条書きと使い分けると、読者に伝わりやすくなります。

④ 画像|本文の途中に写真や図を入れる

「/画像」で画像ブロックを追加すると、次の選択肢が表示されます。

  • アップロード … パソコンから直接ファイルを選ぶ
  • メディアライブラリ … すでにアップロード済みの画像から選ぶ
  • URLから挿入 … 外部URLの画像を読み込む(通常は使いません)
画像を入れるときの3つのルール
  1. アップロード前にサイズを調整する … 横幅1200px程度、ファイルサイズは200KB以下が目安。スマートフォンで撮った写真をそのまま上げると数MBあり、ページの表示速度が大きく落ちます
  2. 代替テキスト(altテキスト)を入力する … 画像を選択して右サイドバーの「代替テキスト」欄に、画像の内容を短く説明する文を入れます。目の不自由な方への配慮であると同時に、検索エンジンへの情報提供にもなります
  3. ファイル名を意味のあるものにする … 「IMG_1234.jpg」より「wordpress-dashboard.jpg」のほうが望ましいです

なお、記事の一覧に表示されるサムネイル画像(アイキャッチ画像)は、この画像ブロックとは別の設定です。第3回で解説します。

⑤ ボタン|次の行動へ誘導する

お問い合わせページや資料ダウンロードへ誘導したいときは、ボタンブロックを使います。ボタン内の文言と、リンク先URLを設定するだけです。

外部サイトへのリンクは「新しいタブで開く」に

リンク設定時に鉛筆アイコン(編集)から「新しいタブで開く」をオンにしておきましょう。自社サイトのタブが残るため、読者が戻ってきやすくなり、離脱を防げます。逆に、自社サイト内へのリンクは同じタブのままで問題ありません。

SWELLなどのテーマをお使いの場合は、標準の「ボタン」よりテーマ独自のボタンブロックのほうがデザインの選択肢が多く、サイト全体と統一感を出しやすいのでおすすめです。

文字装飾のツールバーを読み解く

文章を選択すると、その上に横長のツールバーが表示されます。ここで文字の見た目を整えます。

B I 🔗 A Aa ブロック種類変更 配置左/中央/右 太字 斜体 リンク 文字色背景色 文字サイズマーカー等 その他複製・削除 ※テーマによってアイコンの数や並びは異なります
ブロックツールバーの構成。左側がブロック全体の操作、右側が文字装飾です
機能できること使いどころ
配置左寄せ・中央揃え・右寄せ基本は左寄せのまま。日本語の長文は左寄せが最も読みやすい
太字文字を強調1段落に1か所まで。多用すると効果が薄れます
リンク指定箇所にURLを設定「こちら」ではなく、リンク先が分かる文言に設定する
文字色・背景色色の変更カラーパレット左上の「メインカラー」を選ぶとサイトと統一感が出ます
文字サイズS/M/L/XLまたは数値指定本文は16pxが標準。大きくするなら18px程度まで
マーカー蛍光ペン風の下線1記事に3〜4か所まで。引きすぎると本当に大事な箇所が埋もれます
装飾は「引き算」で考える

色・太字・マーカーを多用したページは、かえって読みにくくなります。強調するのは、その章で一番伝えたい1文だけ。この意識だけで、記事の見え方は大きく変わります。

右サイドバーでできること

画面右側には「ブロック」と「投稿」の2つのタブがあります。

  • 「ブロック」タブ … いま選択しているブロックに対する設定。段落なら枠線や余白、画像なら角丸・影・縦横比など、ブロックの種類ごとに内容が変わります
  • 「投稿」タブ … 記事全体に対する設定。公開日時、カテゴリー、タグ、アイキャッチ画像などを設定します(第3回で解説)

サイドバーが表示されていない場合は、画面右上の歯車アイコンをクリックすると開きます。

下書き保存・プレビュー・公開

STEP

下書き保存

 … 画面右上の「下書き保存」をクリック。作業中はこまめに押しましょう

STEP

プレビュー

 … 「プレビュー」から表示端末(デスクトップ/タブレット/モバイル)を選び、「新しいタブでプレビュー」をクリック

STEP

スマートフォン表示を必ず確認

 … 画像のはみ出しや、表の見切れがないかチェックします

STEP

公開

 … 問題なければ「公開」をクリック。確認ダイアログでもう一度「公開」を押します

STEP

実際のページを確認

 … 公開後、サイト側でも正しく表示されているか目視で確認します

公開日時を指定できます

「投稿」タブの「公開」欄の日時をクリックすると、未来の日付を指定できます。設定すると「公開」ボタンが「予約投稿」に変わり、指定日時に自動で公開されます。キャンペーン告知などに便利です。

目次が勝手に表示されるのは正常です

公開後、記事の冒頭に目次が表示される場合があります。これはテーマやプラグインが見出し(h2・h3)から自動生成しているものです。見出しを正しい階層で使っていれば、きれいな目次が自動でできあがります。

作業が速くなるショートカット

操作WindowsMac
下書き保存Ctrl + SCommand + S
元に戻すCtrl + ZCommand + Z
やり直すCtrl + Shift + ZCommand + Shift + Z
太字Ctrl + BCommand + B
リンク挿入Ctrl + KCommand + K
書式なしで貼り付けCtrl + Shift + VCommand + Shift + V
ショートカット一覧Shift + Alt + HControl + Option + H
WordやGoogleドキュメントから貼り付けるときは

そのまま貼ると、元の文字サイズやフォント情報が一緒に入り込み、サイトのデザインと合わなくなることがあります。「書式なしで貼り付け」(Ctrl+Shift+V)を使うと、テキストだけがきれいに入ります。

よくある質問

書いている途中でブラウザを閉じてしまいました。内容は消えますか?

WordPressには自動保存機能があり、直前の状態が残っていることが多いです。同じ記事を開き直すと「復元しますか?」と表示される場合があります。ただし確実ではないため、こまめな下書き保存をおすすめします。

過去のバージョンに戻せますか?

戻せます。右サイドバーの「投稿」タブに表示される「リビジョン」から、以前保存した状態を確認・復元できます。

画像が横に大きくはみ出してしまいます。

元画像の横幅が大きすぎる可能性があります。アップロード前に横幅1200px程度にリサイズしてください。すでに入れてしまった場合は、画像ブロックを選択して右サイドバーの「画像サイズ」を調整するか、画像の端をドラッグして縮小できます。

「このブロックは予期しないエラーが発生しました」と出ます。

HTMLの記述が壊れている場合に表示されます。ブロックのメニューから「ブロックのリカバリーを試行」を選ぶと直ることが多いです。直らない場合は、そのブロックを削除して作り直してください。

記事はどのくらいの長さで書けばいいですか?

文字数そのものに決まりはありません。読者の疑問に過不足なく答えられているかが基準です。お知らせなら300字程度、解説記事なら2,000〜4,000字程度が一つの目安になります。

更新作業に不安がある方へ|保守・運用という選択肢

ブロックの操作自体は難しくありませんが、実際に記事を投稿し続けてみると、思わぬところで時間を取られます。画像の圧縮、代替テキストの設定、スマートフォンでの表示崩れの確認、内部リンクの設計——「投稿する」の一言の中には、細かな判断が数多く含まれています。

そして、記事を書く以上に手間がかかるのが、WordPress本体やプラグインの更新、セキュリティ対策、バックアップといった裏側の管理です。

保守・運用を任せるメリット
  • サイトを守る … セキュリティ対策・監視、WordPressとプラグインの更新、定期バックアップ
  • 更新の手間をなくす … テキスト・画像の修正、記事投稿の代行
  • 成果につなげる … アクセス解析、データに基づく改善提案
  • 本業に集中できる … ミスや表示崩れのリスクを専門家が引き受けます

SARUORAでは、月額10,000円(税別)のベーシックプランから保守・運用をお引き受けしています。「原稿だけ用意するので投稿は任せたい」といったご相談も可能です。

記事は書きたいけれど、作業の時間が取れない。
その部分だけ、私たちにお任せいただけます。

まとめ

今回は、WordPressで記事を投稿する基本操作を解説しました。要点を整理します。

  • 記事はブロックの積み重ね。「/」入力でブロックを素早く呼び出せる
  • 使うのは段落・見出し・リスト・画像・ボタンの5つでほぼ足りる
  • 見出しはh2から。レベルを飛ばさず1段ずつ下げる
  • 画像は「リサイズ→アップロード→代替テキスト設定」の順で
  • 装飾は引き算。強調は本当に大事な1文だけに
  • 公開前に必ずスマートフォン表示をプレビューで確認

最初は時間がかかっても、2〜3本書けば手が覚えます。まずは短いお知らせ記事から試してみてください。

次回:WordPressの基本操作ガイド③ 記事の投稿<応用編>

アイキャッチ画像の設定、カテゴリー・タグの使い分け、記事のアクセス数の確認方法まで、記事を「育てる」ための機能を解説します。

操作方法でご不明な点があれば、いつでもご相談ください。Web制作のプロフェッショナルとして、お客様のサイト運営をサポートいたします。

あわせて読みたい

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

この記事を書いた人

目次