納品時に渡せる!【2023年5月最新】WordPress6.2 記事投稿図解マニュアル(印刷用)

WordPress 6.2 ブロックエディター 記事投稿マニュアル

お客様へ渡すWordPressマニュアルがあったらいいなと思ったので作りました。

以前のバージョン(5.7)の図解マニュアルはこちら

WordPressには本当に色んな機能が付いているので、全てを網羅したマニュアルを作るのは骨が折れる・・・
しかも、すぐバージョンアップして画面が変わってしまうし・・・

という事で、R-webでは初めてWordPressに触れるお客様へ向けて「新規投稿」にフォーカスした図解マニュアルを作成してお渡ししております。

テンプレートによっては、少し内容が異なったりしますがデフォルトのテーマでの内容になります。

内容は下記に書いておきますが、今回はPDF版とイラレ版のデータ販売となります。

自分でサイトを作成されている方は、PDFの内容と同じこの記事を読んでいただき、制作会社様やWEB制作をされているフリーランスの方はもし宜しかったらご購入下さいませ。

当社のロゴなどは一切入っていないものですので、安心してお客様へお渡しできます。

ブログからご購入いただいた方、こちらのクーポンコード入力で10%オフ!
クーポンコード ZWTPFX34

PDF版 WordPress ブロックエディター(Ver.6.2) 記事更新マニュアル(PDF) ¥1,100

イラレ版 WordPress ブロックエディター(Ver.6.2) 記事更新マニュアル(イラストレーター形式 ai) ¥2,200

WordPress図解マニュアル掲載の内容

page1.  新規投稿

WordPress 記事の新規投稿

① 投稿 →「新規追加」をクリックします。

WordPress ブロックエディター 新規投稿のマニュアル

②「タイトル」を入力します。

③④「文章」を入力します。
※そのまま文章を入力しても良いし、「+」マークで「ブロック」として、「段落」を選び入力でもOK。
・改行したい ・・・ Shift + Enter
・改段落したい ・・・ Enterで新しいブロック作成

⑤「カテゴリ」を選択します。

⑥「プレビュー」をクリックで、別画面で
  実際の表示を確認できます。

⑦修正がなければ、「公開」をクリックし投稿。

※1
「投稿」を選択されているのを確認。「ブロック」だと編集中のブロックを操作する画面になる。 画面右側の「投稿」やブロック」が表示されない時はこの黒い部分が白くなっているのでクリックする

※2
すぐに公開しない場合は、「下書きとして保存」をしておきます。

page2.  文字の装飾と見出し

ブロックエディター 文字の装飾と見出し

①文字の装飾をしたいブロックを選択

②「ブロック」になっていることを確認

③「テキスト」で文字色変更、「背景」で背景色変更。背景色は指定以外の色にも変更できます

④「タイポグラフィ」で文字サイズ変更

※1
こちらから文字サイズ指定も可能

※2

  • [A] 現在のブロック
  • [B] ドラッグで好きな場所へ移動
  • [C]1つ上、下へ移動
  • [D]中央寄せ・右寄せ・左寄せ
  • [E]選択済文字を太字に
  • [F]斜め文字
  • [G]リンクの挿入
  • [H]選択済文字だけの色変更など
  • [I] ブロックの削除やコピーなど
ブロックエディター 文字の装飾と見出し

⑤「見出し」のブロックを選択し見出しを入力 ※「ブロック」になっていることを確認

⑥「H2」「H3」「h4」等適切な見出しを選ぶ

⑦見出しの文字サイズ・色を変更したい時は選択

※3
上記の「段落ブロック」の時と同じように設定可能

見出しを使う場合の注意!
H2の中にH3、H3の中にH4はOK。
先にH3が来て、その中にH2など順序が逆になるのはNGです。順番に気を付けてください。

page3.  投稿一覧からの削除や編集

投稿一覧からの削除や編集

①「投稿一覧」から、一覧を表示

②③日付やカテゴリーや、文字を入れて検索して記事を表示させる事もできます。

④削除したい記事のタイトルの上にカーソルを持って行くと、その下に「編集」「クイック編集」「ゴミ箱」表示」が出るので、削除の場合は「ゴミ箱」を
クリックします。「編集」したい場合は「編集」をクリックで編集画面になります。

※1 一括で削除したい場合は、複数にチェックを入れて、上部の「一括操作」から「ゴミ箱に移動」を選ぶと一括処理できます。

投稿一覧からではなく、今見ている投稿記事を編集する場合

投稿一覧からではなく、今見ている投稿記事を編集する場合

⑤今見ている記事の上部のバーの「投稿を編集」をクリックするとその記事の編集画面になります。
※「投稿一覧」からでもこの方法でもどちらでもOKです

公開中の記事を下書きに変更

公開中の記事を下書きに変更

①公開中の記事の編集画面で「下書きへ切り替え」ボタンをクリック。
「本当にこの記事を未公開にしますか?」という画面が出てくるので「OK」をクリックします。

公開・非公開設定

②「公開」している記事の「公開状態」横の「公開」の文字をクリックで公開状態が展開します。「非公開」にすると、管理者と編集者のみ見れるようになります。「パスワード保護」を選択すると、閲覧時にパスワードを要求され、パスワードを知っている人しか閲覧できないページになります。

投稿の日付を変更する場合

投稿の日付を変更する場合

「表示状態」の下の「公開」の右に日付があります。ここから、公開の日付を変更することが出来ます。予約投稿の場合は、未来の日付を入れておく事もできます。

page5. リンクの挿入

文字にリンクを貼る

WordPressブロックエディター 文字にリンクを貼る

①リンクを貼りたい文字をドラッグしてリンクのマークをクリック

②下に「検索またはURLを入力」枠が出てくるので、ここにリンクURLを貼る。
 ※固定ページにリンクを貼る場合などは固定ページの名前を入れると自動で表示される

③URLが貼れたら右横の矢印マークをクリック

※1
リンクをクリックの際に新しいタブで開きたい時は「新しいタブで開く」にチェック

ボタンにリンクを貼る

WordPress ブロックエディター ボタンにリンクを貼る

①「ブロックの追加」をクリック

②「ボタン」が出てくるのでこちらをクリック

③文字を入力する

④リンクボタンをクリックしてリンクの挿入

WordPress ブロックエディター ボタンにリンクを貼る

⑤ボタンの色や文字色、角丸のサイズなどを調整
※歯車の方で、ボタンの幅設定、右側のアイコンの方でスタイルを設定

page6. ブロックの移動とコピー

ブロックの移動

ブロックの移動

①移動したいブロックを選択すると、移動用のアイコンが表示される。
上へ1つ移動したい時は「^」をクリック。 下へ1つ移動したい時は「V」をクリック。
自由な場所へ移動させたい時はをその左横をドラッグして好きな場所へ移動

ブロックのコピー

ブロックのコピー

②コピーしたいブロックを選択。(こちらは複数のブロックを選択した状態) Ctrl+Cでコピーして、コピーさせたい位置にカーソルを持って行き Shift+Ctrl+V でブロックの貼り付けができます。
※Ctrl+Vでも貼り付けが出来ますが、余計なブロックが入ってしまいます。

※1 複数のブロックを選択した状態でこのアイコンをクリックすると「3個(この場合)のブロックのタイプを変更するという動作が出来ます。グループ化して全体の背景色をつけたり、カラムに変更したりという事ができます。

page7. 画像のアップロード

画像のアップロード

①「ブロックの追加」をクリック

②メディアの「画像」を選択

③「アップロード」で、画像をパソコンから画像をアップロード。
既にアップロード済みの画像を選ぶ場合は 「メディアライブラリ」、 画像のURLを直接入力する場合はURLから挿入」を選択

WordPress ブロックエディター 画像のアップロード

④このバーから画像の操作ができます

※1

  • [A] 左寄せ・右寄せ等
  • [B] キャプション表示
  • [C]画像にリンクを貼る
  • [D]画像の切り抜き
  • [E]画像の上に文字入れ
  • [F]フィルターをかける
  • [G]別の画像に置換

⑤画像のスタイル変更 ※角丸にできる
⑥Altテキスト(画像の説明)を入力※なるべく入れた方が良い
⑦画像サイズの変更※大中小(サムネイル)・フルサイズの他、 指定のサイズでも%でも指定可能

page8.アイキャッチの設定

WordPress ブロックエディター アイキャッチの設定

①「投稿」を選択していることを確認

②「アイキャッチ画像」の項目の「アイキャッチ画像を設定」から画像を選択する

③ファイルを新たにアップロードするか 既にアップロード済みの「メディアライブラリ」から選ぶか選択

④画像を選択したら青いボタンの「アイキャッチ画像を設定」で決定する

page9. カラムとグループの設定

カラムの設定

カラムとは2分割・3分割することです。PCの場合は2列や3列に並んでいるものがスマホの場合は縦に1列に並びます

WordPress ブロックエディター カラムの設定

①「カラム」を選択

②2分割・3分割など好きなカラムを選択

③それぞれのブロックに入力する

※1
設定をスタイルを切り替えて細かく設定可能

グループの設定

①複数のブロックを選択して右側の点3つをクリックして「グループ化」

※1
こちらをクリックしても「グループ化」が出ます

WordPress ブロックエディター グループの設定

②選択した複数のブロックが1つのグループになる

③グループ自体に背景を付けたりできるようになる

page10.ブロックが選択しづらい時

WordPress ブロックエディター ブロックが選択しづらい時

①このマークをクリック

②どのような構造になっているか、左側に出てくる。 ※ここでは画像ブロックを選択

③右側の3点をクリックで「前に挿入」でこのブロックの前に新たなブロックを挿入する等の作業ができる

④画面の左下にはいつも構造が表示されているので作業したいブロックをここから選択することも可能

印刷して使えるPDFと編集可能なイラストレーターAIのダウンロード

以前のバージョン(5.7)の図解マニュアルはこちら

上記の内容をこちらからダウンロード販売しています!納品時にお渡しする資料としてお役立て下さい。

このブログからご購入いただいた方、こちらのクーポンコード入力で10%オフ!
クーポンコード ZWTPFX34

PDF版 WordPress ブロックエディター(Ver.6.2) 記事更新マニュアル(PDF) ¥1,100

イラレ版 WordPress ブロックエディター(Ver.6.2) 記事更新マニュアル(イラストレーター形式 ai) ¥2,200