ブログ記事作成に向けた操作方法(ブロックエディタ)

今日はブログ記事作成に向けた操作方法をご紹介します。

それでは早速、ご紹介していきましょう!

※テーマはCocoon(コクーン)を使用

※ブロックエディタGutenberg(グーテンベルク編)

どんなブログ記事が書けるようになるの?【サンプル紹介】

まずはどんな記事が作れるようになるのか、サンプル記事をご紹介します。

※下記画像クリックで拡大可能

※あくまでサンプルなので本文などかなり簡素化してご紹介

ご利用中のテーマやテンプレート(コクーンでいうスキン)によって、

ブログ記事作成中の画面デザインや、完成した記事のデザインが異なると思います。

ただ、基本的な操作方法は一緒です。

ブログ記事作成画面の紹介

ブログ記事作成画面は下記のような感じです。

ブロックエディタと呼ばれ、「ブロック」というパーツごとにブログ記事本文を作成できます。

そして、実際のブログ記事作成では下記画像の①~⑨までを入力していきます。

それぞれの項目を簡単に説明すると下記の通りです。

1タイトルブログ記事タイトル
2本文ブログ記事本文
3SEOタイトル検索画面で表示されるブログ記事タイトル
4メタディスクリプション検索画面で表示されるブログ記事紹介文
5メタキーワード記事でメインとなる単語
6パーマリンクURL設定部分
7カテゴリーブログ内の記事整理項目
8タグブログ内の記事整理項目
9アイキャッチ画像ブログ記事のアイキャッチ画像

タイトルや本文以外にも色々ありますね。

ピンとこない項目もいくつかあると思います。

そのため、一部補足してご紹介していきます。

SEOタイトル/メタディスクリプション

結論を言うと、検索画面の下記部分がSEOタイトル(赤枠)とメタディスクリプション(青枠)です。

ブログ記事の「タイトル」と「SEOタイトル」は同じ内容となります。

そして、「メタディスクリプション」はブログ記事の内容を簡潔にまとめた紹介文となります。

カテゴリー/タグ(メタキーワード)

カテゴリーはブログ記事を大まかに分類するために使用します。

例えば、芸能人でいうなら女優/俳優/芸人みたいな感じですね。

ジャンル分けと言ってもいいかもしれません。

よく「縦割りのイメージ」といわれたりします。

次に、タグはブログ記事を単語単位で紐づけるために使用します。

要は目印のようなものですね。

カテゴリーが違っても、タグの紐づけで関連するブログ記事を見つけることが出来ます。

そのため、縦割りのカテゴリーに対し、タグは横につながるイメージといわれたりします。

そして、タグは単語単位なので、そのままメタキーワードとなることも多いです。

アイキャッチ画像

アイキャッチ画像はブログ記事の最初に表示される画像です。

また、それだけでなく検索画面やリンク先などでも表示されます。

ちなみに、「目を惹く画像」だから「アイキャッチ画像」ですね。

ブログ記事作成の操作方法【動画解説】

ブログ記事作成の操作方法を動画で解説していきます。

※音声はBGMのみ

ブロックエディタ操作方法①

動画内容

  • 新規追加
  • タイトルと本文
  • 下書き保存
  • 編集中断⇒再開
  • プレビュー
  • 見出しと小見出し
  • 箇条書き(リストと番号)
  • マーカー(塗りつぶし)と太字
  • 書式のクリア

※ちょっとした動画補足

プレビューは現在作成中のブログ記事を公開したらどんな風に見えるか確認する機能です。

見出しを付けると基本的に目次が自動生成されます。

小見出しの見出しレベルはH3を設定してください。

ブロックエディタ操作方法②

動画内容

  • アイコンボックス
  • タブ見出しボックス
  • 見出しボックス
  • ブロック移動
  • スペーサー(スペース入力)
  • 内部リンク

※ちょっとした動画補足

動画内「別ルートの作り方」は新しく試したい機能を探す時に便利です。

スペースを入れたい時はスペーサーを使用しないとだめです。

ブログ記事作成画面上でスペースが空いていても、プレビューや記事公開すると縮められます。

内部リンクは内部リンク先のURLを貼り付けるだけでも作成できます。

ただ、”新しいタブで開く”が設定できないので、動画内の作成方法を推奨します。

ブロックエディタ操作方法③

動画内容

  • テーブル(表)
  • 引用
  • 画像

※ちょっとした動画補足

引用で他サイトなどから引用した文章は変更NGなのでそのまま使用してください。

画像の出典元は引用などと同じように設定してください。

なお、画像サイズは横640×縦360などがおすすめですね。

メディアライブラリはブログにアップロード済みの画像を利用したい時などに使います。

ブロックエディタ操作方法④

動画内容

埋め込み系

  • 地図
  • Twitter(ツイッター)
  • YouTube(ユーチューブ)
  • Instagram(インスタ)

※ちょっとした動画補足

地図やSNSなどをサイトやブログに載せることを「埋め込み」といいます。

基本的には「カスタムHTML」というブロックで埋め込みが可能です。

ツイッターやYouTubeはリンクを載せることで簡単に埋め込むこともできます。

表示などで不具合がなければ、リンクによる埋め込みでいいと思います。

動画でご紹介したツイッター①、YouTube①のやり方ですね。

インスタは”キャプションの追加”をチェックした状態が基本になっています。

そのため、動画でご紹介したインスタ①のやり方がいいと思います。

ブロックエディタ操作方法⑤

動画内容

  • SEOタイトル
  • メタディスクリプション
  • メタキーワード
  • タグ
  • カテゴリー
  • パーマリンク
  • アイキャッチ画像
  • 公開

※ちょっとした動画補足

今回はメタキーワードをそのままタグに使用しました。

新規カテゴリーを追加した場合、こちらの内容もやっておいた方がいいです。

アイキャッチ画像の画像サイズは640:360を推奨しています。

「公開」をクリックすると作成したブログ記事がインターネット上へ発信されます。

その前にブログ記事内容が問題ないか「プレビュー」でチェックすることを推奨します。

ブログ記事公開後にやっておいた方がいいこと

ブログ記事を作成・公開したら「URL検査」をしておきましょう。

“検査”と呼び名についていますが、簡単に言うとGoogleに記事を公開したと伝えることです。

ちなみに、やらなくてもそのうちGoogleがブログ記事を見つけてくれますが、こちらからも伝えておきましょう。

「Google Search Console」(グーグル・サーチ・コンソール)にログイン。

※登録前の方は下記を確認

MuuPCLife

「Google Search Console」(グーグルサーチコンソール)の登録方法をご紹介します。…

下記画像の赤枠部分に公開したブログ記事のURLを入れて、

左側の虫眼鏡ボタン(検索)をクリック。(エンターキーで決定でもOK)

「インデックス登録をリクエスト」をクリック。

こんな感じの表示が出るのでしばらく待ってください。

下記の画像のように表示されれば問題ないのでOKをクリック。

以上で完了です。

URL検査の実施までがブログ記事作成の一通りの流れと思っていただいてOKです。

ちょっとした補足事項

現在のWordPressが持っているブログ記事作成機能が「ブロックエディタ」です。

名前もついていて、Gutenberg(グーテンベルク)といいます。

そして、昔は「クラシックエディタ」と呼ばれる下記のような画面でした。

現在も「クラシックエディタ」を使用する方は多いです。

そして、ブログ記事作成方法を調べてみると、「クラシックエディタ」で解説された内容も多く見かけます。

ただ、今後は「ブロックエディタ」が主流となっていくようなので、慣れていきましょう。