WordPress ブロックエディター記事更新マニュアル(PDFダウンロード)

WordPress ブロックエディター 記事投稿マニュアル(ダウンロード用PDF)

WordPress(ワードプレス)のバージョン5.0からブロックエディター(通称GutenBerg:グーテンベルグ)エディターが標準のエディターとなりました。

慣れるまでは使いにくいので、クラッシクエディターを使えるプラグインを使用している方も多いかと思います。

しかし、クラシックエディターのサポートも数年後には終了すること、そして、ブロックエディターを使うことで、余計な改行なども入らない事、慣れると意外と便利に使える点などから、ブロックエディターを使うことをおすすめしているので、その解説をしたいと思います。

説明をとばして、マニュアルのダウンロードをされる方はこちらから

はじめに

私のお客様は、パソコンが苦手という方が多く、「このブロックエディターは使いにくい!元に戻して!」とか、せっかくWordPressに移行したのに「アメブロに戻りたい!」という意見をたくさんいただきました。

そこで基本的なブログの投稿、「新規投稿」のよく使う点だけにフォーカスしてマニュアル化しました。PDFファイルとしてダウンロードできるようにしています。

自分でサイトを作成されている方はもちろん、制作会社様やWEB制作をされているフリーランスの方なども、宜しければお使い下さい。

ダウンロード用PDF(無料版)には当社のリンクが貼ってあります。

お客様に配りたいなど、リンクなしのファイル(表紙含む9枚のPDF)ダウンロードは550円の有料版になります。

リンクなし 有料版PDFはこちらから

イラストレーター形式(自由に書き換えられる)の元ファイルのダウンロードは1,100円の有料版になります。

リンクなし 有料版イラストレーター形式はこちらから

記事の新規投稿

WordPreee ブロックエディータで記事の新規投稿

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

WordPress ブロックエディター 記事の新規投稿

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

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

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

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

⑦修正がなければ、「公開する」をクリックし公開します。

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

文字の装飾と見出しの装飾

段落の装飾

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

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

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

③文字サイズを変更できます(小・通常・大・特大・カスタムから選択)

④ブロックの「背景色」を変更(カスタムカラーで好きな色も選べます)

⑤ブロックの「文字色」を変更(カスタムカラーで好きな色も選べます)

見出しの装飾

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

⑥「見出し」のブロックを選択し「ブロック」になっていることを確認。

⑦見出しも文字の上の「H2」の文字、または画面右側の「見出し設定」から「H2」「H3」「h4」等適切な見出しを選ぶ。
※見出し文字の上でも、右側のブロックでもどちらでも同じ操作です。

⑧見出しの色を変更したい時は色を選択します。

見出しを使う時の注意!

見出しを使う場合、適切な順番があります。
H2の中にH3、H3の中にH4がくるように使用しましょう。
※先にH3が来て、その中にH2など順序が逆になるのはNGです。順番を守ってくださいね。

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

ブロックエディターマニュアル 投稿一覧からの削除や編集
ブロックエディターマニュアル 投稿一覧からの削除や編集

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

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

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

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

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

ブロックエディター マニュアル 公開中の記事を下書きに変更

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

ブロックエディター マニュアル 公開中の記事を下書きに変更

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

リンクの挿入

文字にリンクを貼る

ブロックエディターマニュアル 文字にリンクを貼る

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

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

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

ボタンにリンクを貼る

ブロックエディターマニュアル ボタンにリンクを貼る

①「フォーマット」の中の「ボタン」を選択

ブロックエディターマニュアル ボタンにリンクを貼る

②ボタンが出てくるので、文字を打つ

③リンクを貼る

④ボタンの色や文字色、角丸のサイズなどを調整

ブロックの移動とコピー

ブロックの移動

ブロックエディターマニュアル ブロックの移動

①移動したいブロックを選択すると、 「上 真ん中 下 」のアイコンが表示される。上へ1つ移動したい時は「上」をクリック。下へ1つ移動したい時は「下」をクリック。
真ん中のアイコンは、そのままつかんで、好きな位置に移動させることができます。

ブロックのコピー

ブロックエディターマニュアル ブロックのコピー

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

画像のアップロード

ブロックエディターマニュアル 画像の挿入

①「画像の追加」をクリック
※⊕マークから「画像」を選択しても良い。

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

ブロックエディターマニュアル 画像の挿入

③左から「画像のスタイルの変更」「画像の回り込み(左揃え・中央揃え・右揃え等)」「画像の編集」「画像にリンクを貼る」それぞれの操作が可能。

④「キャプションを入力」で、画像の下に文字を表示させることが可能。

⑤画像のスタイル変更

⑥Altテキスト(画像の説明)を入力。※なるべく入れた方が良い

⑦画像サイズの変更。※指定のサイズでも%でも指定可能

アイキャッチの設定

ブロックエディターマニュアル アイキャッチの設定

①「文書」を選択していることを確認

②「アイキャッチ画像」を開く

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

④アップロードする場合は「ファイルを選択」からアップロード

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

マニュアル(PDF)ダウンロード

無料版

上記に書いてある説明がPDFファイルになっています。
※各ページに当社のリンクが貼っています。

リンクなし 有料版PDF 550円

当社のリンクが貼っていないPDFファイルです。
お客様へお渡しする際に、フッターに記載がない方が良いという方は、宜しかったらご購入下さい。

リンクなし 有料版 イラストレーター形式(aiファイル)1,100円

当社のリンクがない、イラストレーター形式のAIファイル一式です。宜しかったらご購入ください。
画像をオリジナルに編集したり、書き足したりして自由に改変してお客様への提供資料としてお渡ししてください。

にほんブログ村 デザインブログ Webデザインへ

ホームページ制作に関する事なら何でもお気軽にご相談下さい!!
ブログに何をどう書いたら良いかなどのご相談もどうぞ。

R-webでは、お客様のご希望やご予算になるべく沿える形でご提案させていただいております。
お問合せはこちらから
お見積りはもちろん無料です!無理な営業は絶対しませんのでご安心下さい!

関連記事

  1. 2013.7.13 WordBench 神戸 「お気に入りのテーマを見…

  2. WordPressのバックアップ

    WordPressを「BackWPup」プラグインで定期的にバックアッ…

  3. microdataでHTML5のパンくずリストを作成

  4. ロリポップで「不正なアクセスを検知いたしました」とメールが来てWord…

  5. JetPack タイルギャラリーの使い方

  6. 固定ページ毎に違うヘッダー画像をアイキャッチで設定する

最近の記事

  1. WordPress ブロックエディター 記事投稿マニュアル(ダウンロード用PDF)
  2. 「雑誌取材」や「TV番組取材」という名目の広告営業にご注意!
  3. フリーランスに必要な「稼ぎ力」「継続力」を身につける
  4. ブログって何をどう書いたらいい?

アーカイブ

制作実績一覧

  1. コロナウイルス対策 リモーバ
  2. 霊能者が占うスピリチュアルサロン medium
  3. 沖口まこと体操クラブ
  4. やまもとサンクリニック/西宮
  5. 山崎由香のHappyLifeブログ
  6. HappyLife様
  7. salondeuniverse
  8. Nai‘a~ナイア~
  9. M-Style