【保存版】ワードプレス投稿編集の使い方の基本(ブロックエディター編)

こんにちは。 

一日1~2時間の作業で月20万円前後の収益を得ている副業ブロガー。「ニッチジャンルで安定的に稼ぐブログ理論」を提唱しているユキスキです。

ゆき子
ワードプレスを導入して、やっと記事が書けますね!
ユキスキ
今回は基本的な使い方をレクチャーしますね

さて、ワードプレスの導入から、やっと編集画面の使い方まできましたね。しかし、ワードプレスは自由度が高いがゆえに編集画面の使い方も難しい(笑)

でも、私自身一部の機能しか使ってませんし、普通に記事を書くだけなら簡単です。

というわけで、今回はワードプレスの投稿編集の基本についてお話したいと思います。

※ワードプレス最新のエディターソフトであるブロックエディター(グーテンベルク)の使い方について解説してます。

タイトルと本文の入力

ユキスキ
さて、まずは基本から。タイトルと本文を入力してみましょう

まずは、タイトルと本文の編集から。ワードプレスの管理画面から「投稿」→「新規追加」を選びます。

上記の画面になりますが、とりあえず右側の項目は無視してください。(後ほど説明します)真ん中の編集に集中しましょう。

上部が記事のタイトルで、下部が本文。それぞれクリックすると編集できるようになります。

改行はShiftキー+Enterキーですが、実はこのワードプレスのブロックエディターの良いところは、その名のとおり「ブロック分け」できることなんです。

実は写真の文章は3ブロックに分かれています。左側の黄色部分のコマンドをクリックするだけで、簡単に上下の入れ替えができます。

だから、行の順序を逆にしたいとか、文章の流れを大きく変えたいって時に重宝するんですね。

ブロック分けは、Enterキーを押すだけです。

まぁこの辺は習うより慣れろという感じで(笑)いろいろ試してみてくださいね!

見出しの設定

続いては、見出しを入れてみましょう。

左上の「+」ボタンを押して、コンテンツブロックというのを表示させます。

ブロック付近に現れた「+」マークでもコンテンツブロックを呼び出すことができます。

「見出し」を選択します。

すると、見出しブロックが現れました。ちなみに「H2」の項目をクリックすると、見出しの大きさが選べるようになります。

  • H1…タイトル
  • H2…見出し
  • H3…小見出し
  • H4…小々見出し

H1はタイトルしか使えません。個人的にはH4も使わないので、H2とH3だけで十分です。

後から文章を見出しにすることも可能です。ブロックを指定したら、上記のアイコンをクリックして見出しを選択するだけでOK。

ブロックの設定は、右側のブロックの項目でも編集できます。

ブロック削除と元に戻す方法

見出し、本文いずれも、文章をすべて消去するか、上記のアイコンをクリックして「ブロックを削除」すれば消すことができます。

画面左上にある矢印のボタンは、編集を元に戻したりやり直す時に便利です。

リンクの設定と文字の装飾

リンクしたい文字をドラッグ(指定)して、鎖のアイコンをクリック。

URLを入力すれば、

簡単にリンクの完成です。

なお、はてなブログのようなリンクカードの作り方については、下記の記事を参照ください。

文字の装飾は基本となる4つのパターンを紹介しましょう。

  • Bアイコン…太字(強調したいとき)
  • Iアイコン…italic斜字体、英文で使う)

矢印のアイコンを開いて、

  • 取り消し線(訂正前の文章を残したいとき)
  • 文字色(赤字は主に注意喚起の強調で使われます)

※ただし、色や強調を使いすぎると、本当に強調したい文章が伝わりづらくなってしまいます。多くても、ひとつの見出しに対して一行くらいが理想です。

箇条書きと引用

箇条書きと引用もアイコンを使って簡単に設定できます。

■箇条書き

箇条書きしたい文章をまとめてドラッグ(選択)、左上のアイコンをクリックします。

リストのアイコンを選択します。

箇条書きになりましたね!赤枠で囲ったアイコンをクリックすれば、数字付きの箇条書きにも変更できます。

■引用

他のブログから文章を拝借したい場合は引用を使います。なぜなら、引用を使わないと文章を盗作したことになってしまうからです。

箇条書きと同じように、引用したい箇所をドラッグ(選択)、左上のアイコンから引用をクリック。

さらに、上記のように切り替わったら「引用元を入力…」に引用元を入力してください。

また、引用元がブログやサイトの場合、必ずリンクを貼りましょう。それがWEBで引用する時のルールとなっています。

ショートコードやHTMLを使って枠で囲う

こんな感じで枠で囲ったブログ記事を見たことがあると思います。やり方は2種類あります。

■ショートコードを使う

有料テーマを購入すると、ショートコードというものを入力するだけで、簡単に枠で囲うことができます。

各テーマでショートコードは異なります。「○○(テーマ名) ショートコード」と検索して、購入したテーマのサイトで確認してみましょう。

こういった吹き出しもショートコードを使えば簡単に付けられます。

■HTMLを使う

HTMLという呪文のような文字を使って枠を付けることもできます。

写真のアイコンから「HTMLとして編集」を選びます。

すると編集画面に移るので、たとえば下記の呪文を打ち込みます。

<div style=”background:#ffeeee; padding:10px; border-radius: 10px; border: 2px dotted #ff0000; width: auto; margin-right:6px; box-shadow: 5px 5px 5px #999;”>本文</div>

すると、あら不思議。枠で囲うことができました!

この呪文のようなHTMLというコードはたくさんありますが、説明してるととんでもない文字数になってしまうので、今度別の記事で詳しくお話しますね。

余談ですが、HTMLやショートコードを使って枠を入れるなら、下記のプラグインがおすすめです。合わせてご参照ください。

フォントサイズの変更方法

フォントサイズの変更方法は2つあります。

■HTMLでタグ打ち

「HTMLとして編集」をクリック。下記のようなタグを打ち込んで、パーセンテージを変更すれば、フォントサイズの変更が可能です。

 

<p><span style=”font-size: 70%;”>文章</span></p>

ただし、これはHTMLをある程度理解している上級者の方向けです。

■クラシックエディターのツールバーにフォントサイズ変更ボタンを追加する

ワードプレス初心者の方でしたら、プラグインを導入して、ツールバーにフォントサイズの変更ボタンを設置するのが一番簡単な方法です。

こんな感じで、ショートカットボタンを設置することができます。詳しくは下記の記事を参照ください。

表の作り方

今度は表を設置してみましょう。

+ボタンから表アイコンをクリック。

行数と列数を任意で入力して「表を作成」をクリック。

ちなみに、左上のボタンを押すと表のスタイルを選ぶことができます。

あとは表に書き込むだけ。

はい、プレビューを見るとこうなります。簡単に表が作れましたね!

※自動的に中央寄せになります。

テキストを左寄せ、中央寄せ、右寄せに設定

テキストの左寄せ、中央寄せ、右寄せは簡単です。ブロック内の写真のアイコンをクリックし選択するだけ。

ただし、基本は初期設定の左寄せでOK。

下書き保存とプレビュー

記事を書いたらこまめに保存しましょう。WEB環境によって、文章が編集途中で消えてしまうなんてことがよくあるからです。

画面右上の「下書き保存」をクリックすれば保存されます。

ユキスキ
私も保存しないで作業を進めてたら途中で文章が消えてしまい、何度も後悔したことがあります(笑)

「プレビュー」は投稿する前に、実際に表示される画面を確認できます。

文字校正はもちろん、エディター画面では気づけないエラーが見つかる時もあるので、投稿する前に必ず確認しましょう。

クラシックエディターでの入力方法

クラシックエディターとは、2018年以前にワードプレス使われていたエディターソフトのことです。

人によっては、クラシックエディターの方が使いやすいという方もいるでしょう。

実は、ブロックエディター内でもクラシックエディター風に編集することが可能です。

「+」→「クラシック」を選択してください。

すると、クラシックエディター風の編集が可能になります。

ツールバーのボタンを自由に配置することもできます。詳しくは下記の記事を参照ください。

画像(写真)・動画・SNSの埋め込み方法

ゆき子
旅行先で撮影した写真はどうやって埋め込むのですか?
ユキスキ
では、今度は画像や動画・SNSを埋め込んでみましょう

基本的な編集についてはお分かりいただけたかと思いますので、続いては応用編。画像やYouTube動画・SNSを埋め込んでみましょう。

画像(写真)の埋め込み方法

まずは画像(写真)の埋め込み方法です。「+」ボタンから画像アイコンを選択。

「アップロード」クリック。(ドラッグ&ドロップでもOK。)

※アップロード済みの場合は「メディアライブラリ」へ。

任意の画像を選択して「開く」をクリック。

画像がアップロードされました!

上部のアイコンをクリックすると、左、中央、右寄せを選択できます。(通常は中央寄せでOK。)

また、青色のドットで画像サイズが調整できます。

キャプション入力欄には、画像のタイトルや引用元などを書くことができます。

YouTube動画の埋め込み方法

YouTube動画の埋め込み方法はとっても簡単。

「+」→「埋め込み」→「YouTubeアイコン」を選択。

ここに、動画のURLを貼り付けるだけです。

 

任意の動画を開いた時に、画面の上部にあるのがURL。

または、「共有」をクリックして、

この欄をコピーしてもOK。

 

埋め込みに成功しました!

キャプションと寄せのやり方は、画像の項と同じです。

SNSの埋め込み方法

ツイッターやフェイスブック、インスタグラムなどの埋め込み方法も、基本はYouTubeと変わりません。

「+」→「埋め込み」→任意のSNSを選択してください。

ここにURLを入力するだけです。

■ツイッター

ツイッターの場合はツイートの右上にある矢印を選択して、

「ツイートを埋め込む」をクリック。

現れた画面のURLをコピーして貼り付けます。

これで簡単に埋め込みできました!

■インスタグラム

投稿を開いて、右上のアイコンをクリック。

 

「リンクをコピー」を選択。すると、自動でアドレスがコピーされます。

あとは埋め込みにコピーしたアドレスを貼り付けると、

貼り付けに成功です!

■フェイスブック

 

任意の投稿を選んだら、右上のアイコンをクリック。「埋め込み」を選んでください。

さらに、詳細設定を押して、

謎の画面が現れるので、投稿のURLをコピー。

ツイッターやインスタと同様「埋め込み」に貼り付けます。

フェイスブックはエディター内では表示されませんが、安心してください。

プレビューを見ると、しっかり表示されてますね。

ちなみに、先ほどの投稿の埋め込みの上記の部分をコピーして、

カスタムHTMLを開き、

貼り付ける。フェイスブックの場合はこっちのほうが早いかもしれませんw

【追記】

試しにYouTubeのURLを入れる項目にツイッターのURLを貼り付けたら普通に表示されました。

どうやら、「埋め込み」でどの項目を選ぶかは、あまり意味が無いようです(笑)

広告の埋め込み方法

広告の埋め込み方法は、枠の囲い方の項で説明したとおり、カスタムHTMLを使います。

カスタムHTMLアイコンを選択して、

またまた出ました(笑)呪文のようなHTMLコードを貼り付けます。

はい、広告を埋め込むことができました。広告コードの取得については別記事でお話します。

グーグルマップの埋め込み方法

旅行先の地図など、ブログ内で紹介したい時ありますよね。そんな時は、グーグルマップを埋め込んでみましょう。

まずは地図から呪文(HTML)を取得しましょう。グーグルマップの任意の場所を指定して、「共有」をクリック。

すると共有画面が現れますので、上部の「地図を埋め込む」を選んで、呪文(HTML)をコピーします。

エディター画面に戻ります。広告の項で説明したのと同じように、「+」→「カスタムHTML」を選択します。

ここに、謎の呪文(HTML)をペーストします。

はい、無事地図を埋め込むことができました!

文字数の確認方法

文字数を確認したいときありますよね。そんな時は画面左上にあるアイコンをクリックすると、文字数や文章の概要まで確認できます。

全体を把握するのに便利な機能です。

文書の各項目を設定し公開する

ゆき子
ユキスキさん、やっと記事が完成しました!
ユキスキ
あとは投稿の設定をするだけですね

さて、記事を書き終えたら、あとはアップするだけです。

ここで、右側に表示されている文章の項目を編集します。

 

矢印をクリックすると、各項目が編集できるようになります。順番に説明していきましょう。

■ステータスと公開状態

公開する時間をタイマー設定したり、記事にパスワードをかけることができます。

たとえば、朝方書き上げた記事を、閲覧数が多い夜に公開するといった要領で使います。

特に指定がない場合は、初期設定のままでOKです。

■リビジョン

過去に保存したデータにさかのぼることができます。

変更部分が色付きで表示されるので、大幅な書き直しが発生した時に便利です。

この機能は覚えておいてくださいね。

■パーマリンク

記事のURLですね。初期設定の日本語のままだと文字化けしてしまうので、必ずアルファベットに変更しましょう。

詳しくは下記の記事も参照ください。

■カテゴリー

記事のカテゴリーです。このあとの項で詳しく解説します。

■タグ

記事に関連する単語を入力します。

ウィジェットで「タグクラウド」を使わなければ、ほとんど意味のない項目ですが(笑)検索エンジン最適化(SEO)対策のためにも、一応入れておいたほうがいいです。

■アイキャッチ

トップ画面などに表示される記事のイメージ画像のことですね。

とりあえず面倒でも写真くらいは貼っておくことをおすすめします。なぜなら、「No Image」なんて記載されると、ブログのイメージが下がってしまうからです。

それに、グーグルの画像検索対策にもなります。

アイキャッチの作り方は、下記の記事も参考ください。

■抜粋

トップ画面の記事内容のダイジェスト文章ですね。設定しなければ、冒頭の文章がそのまま掲載されます。

ちなみに、設定によっては今回ご紹介した項目以外の欄が現れることがあります。しかし、必要がなければ初期設定のままでOKです。

公開時にSNSを自動投稿する

Jetpackというプラグインを使うと、各SNSと連携し自動投稿することが可能です。

Jetpackをインストールしていると、画面右上にマークが現れます。あらかじめ連携を設定していれば、各SNSの投稿が設定可能です。

たとえばツイッターの場合、自動投稿するかどうかの可否と投稿内容が設定できます。

もしくは、一度「公開する」ボタンをクリックしても、確認画面が現れますよね。

そのとき、「この投稿を共有」項でも設定できます。

Jetpackの設定方法については、下記の記事も参照ください。

記事を公開する

前項の必要な項目をすべて入力したら、エディター画面の右上にある公開ボタンをクリックします。

再度確認画面が現れるので、「公開」をクリック。

やりました!無事公開されましたね。

投稿の編集や削除の方法は?

ゆき子
投稿した記事をもう一度編集したいんだけど?
ユキスキ
では、ワードプレスの管理画面から再度編集しましょう

投稿した記事の再編集や削除したい場合は、ワードプレスの管理画面から「投稿」をクリックします。

すると、投稿した記事の一覧が現れるので、「記事タイトル」または「編集」をクリックするとエディター画面に移動します。

カテゴリーの編集

さて、最後はカテゴリーの編集です。

「投稿」→「カテゴリー」をクリック。

「名前」にカテゴリー名を入力して、Enterもしくは下部にある「新規カテゴリーを追加」をクリック。

※ちなみに「親カテゴリー」や「概要」は基本的に入力しないでOKです。

一覧でカテゴリーの編集ができます。ただし、カウント(そのカテゴリーを使っている記事)が残っていると削除できません。

記事のエディター画面に戻ると、カテゴリーが増えてますね。

※エディター画面でも新規カテゴリーの追加は可能です。

まとめ

ユキスキ
お疲れ様でした!以上がワードプレスのブロックエディターの基本的な使い方となります
ゆき子
なんか覚えるの大変そう…
ユキスキ
いえいえ、慣れたら逆にワードなんか使えなくなりますよ(笑)

いかがでしたでしょうか。

最初は「こんなに覚えることあるのかぁ…」なんて思うかもしれませんが、慣れたらマイクロソフトのワードより使いやすいですよ。

何より、このブロックエディターソフトにアップデートしたのが最近なので、ほとんどのブロガーさんが不慣れです(笑)

だから、条件はみんな一緒!

ちなみに、まだまだ細かい機能はいっぱいあるんですが(笑)とりあえず「これさえ知っとけば困らない」って機能だけ紹介させていただきました。

アクセスアップする具体的な記事の書き方については、下記の記事を参照ください。

ではでは、さようなり~


スポンサーリンク




ライバル不在のニッチなジャンルで継続的に10万円を稼ぐブログ理論(有料ノート)

少ない作業時間でも収益をあげることができるブログ運営理論です。

今回、5年間ブログを運営してきて、自分の理論に自信が持てたので有料で公開することにしました!(前半の8,000文字は無料で読めます。)




コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)

ABOUTこの記事をかいた人

38歳サラリーマンで1児の父。会社での給与がなかなか増えないので、小遣い稼ぎのつもりでブログを開始する。「ニッチブログで小さく稼ぐ理論」を提唱しており、現在はGoogleアップデートの影響を受けづらくライバルが少ないジャンルで月間20万円前後を安定的に稼ぎ出しています。