この記事で解決出来る課題は、
- ブロックエディターを使った記事ページの組み立て
- 記事の中で画像を横並びで表示
- 記事作成のショートカット
物件紹介記事のつくり方・続き
ここからは、表の編集、ショートコードの編集を経て、テキスト入力やテキスト位置の変更など、記事を作っていく過程の細かな調整について解説していきます。
また、記事を公開する前の、メタキーワード、メタディスクリプション、X（Twitter）タグなどの設定手順についても触れています。
1表の編集
ここでは、既に用意されている〝表〟を編集して内容を変え、新たな表をつくる手順をお伝えします。
表をクリックして項目ごとに編集していきます。この時、注意したいのは、表のレイアウト崩れです。レイアウトを崩さないようにひと項目ずつ内容を編集していきます。
2ショートコードの編集
デザインが施されたブロックをクリックすると、〝ショートコード〟の編集画面に変わる場合があります。
これは、WordPressの機能のひとつで複雑なデザインやレイアウトなどをあらかじめWordPressに登録しておき、それを〝ショートコード〟というツールを使って呼び出し、記事やページ内に反映させるというものです。
ここでは既に登録されているショートコードを編集します。
3画像ブロックの追加
ここからは、記事の内容をつくっていく上で画像ブロックの追加やテキストブロックの追加、テキストの位置の修正など、記事作成に必要な細かな点の解説を進めていきます。
ここでは画像を1カラムで表示させたいので、新たな画像ブロックを追加します。
4URLから挿入
画像ブロックの追加が出来たら、〝URLから挿入〟を選択しておいて、ウェブアルバムを開きます。
5ウェブアルバムから挿入する画像のリンクをコピー
ウェブアルバムを開いたら、記事に挿入する画像を選択・最大画面で表示して、〝画像のリンクをコピー〟します。
6画像URLをペースト
記事の編集画面に戻って、画像のリンク（URL）をペーストします。これで画像が表示されました。
7新しいブロックを追加
次のブロックにはテキストを置きたいので、新しくブロックを追加します。
8段落（ブロック）を選択
テキストを入力するための〝段落ブロック〟を選択して追加します。
9テキストの位置の設定
テキストの位置を中心にしたいので、中心に置くテキストを選択して、〝テキストを中央寄せ〟を選択します。
10保存してプレビューで確認
保存してプレビューで確認します。
11段落ブロックを追加
新しく〝段落ブロック〟を追加して、そこにテキストを入力していきます。
テキストの位置は、テキストを選択して左寄せや中央寄せなど細かく調整が出来ます。
12カラムブロックを追加
テキストも画像と同様に、横に並べて表示させることが出来ます。
その場合もカラムブロックを追加して、2カラムなど適宜カラム分けをしていきます。
13追加するカラムの選択
ここでは、同じサイズで2カラムのブロックを配置します。
14一方に段落ブロックを追加
片方のカラムに〝段落ブロック〟を配置します。
15テキスト入力
配置した段落ブロックにテキストを入力します。
16テキストの位置変更
配置したテキストを中央寄せにします。
17ショートコードブロックの編集
ショートコードブロックもタグを変更しないように注意しながら、中のテキストを入れ替えていきます。
18プレビューで確認
編集を終えたら、こまめに保存をしてプレビュー画面で確認していきます。
19新たにカラムブロックを追加
WordPressのブロックエディター（Gutenberg）の記事は、ブロックを追加して、そのブロックをカラム分けしたり、画像や段落ブロックを追加して、そのブロックの中に画像やテキストを入力していくというのが記事執筆の流れになります。
20一方に画像を追加
ここは、2カラムで画像を横並びにしますので、ウェブアルバムから画像のリンク（画像のURL）を持ってきて、画像を差し込みます。
21残りのブロックにも画像を追加
こちらのブロックにも〝URLから挿入〟を選択して、ウェブアルバムから持ってきた画像のリンク（画像のURL）をペーストして画像を表示させます。
この手順で記事の作成を最後まで仕上げていきます。
22メタキーワードの設定
〝メタキーワード〟というのは、Googleなどの検索エンジンで検索される時のキーワードです。最近、Googleはこのメタキーワードの重要性を下げたというようなNewsもありますが、設定しないよりかは、設定しておいた方がいいので、GoogleやYahoo!などで検索して欲しいキーワードを設定しておきます。
キーワードは5つぐらい設定します。一つずつ、半角カンマで区切ります。
23メタディスクリプションの設定
〝メタディスクリプション〟というのは、Googleなどの検索エンジンで検索された時の検索結果に表示されるウェブサイトの一覧に表示される短いサイトの説明文です。
ここの設定を怠ると、Googleが自動的にウェブサイトの文章の一部を表示させるので、しっかり設定しておいた方がいいと思います。文章は120文字程度にしておきます。
24X（Twitter）タグの設定
記事がX（Twitter）でシェアされた時に自動的に組み込まれるタグの設定です。
こちらも、しっかり設定しておくことをお勧めします。
25タグの入力
これは、この記事のタグです。
記事の数が増えてくると、訪問者が必要な情報を探す時に利用するのが、〝タグ〟です。
アパレルで洋服に〝S〟、〝M〟、〝L〟といったタグを付けて商品を識別しているのと同じ考え方で、この記事の属性は何になるのか？をキーワードで分類します。
26indexの設定変更
メタキーワードなどの設定が全て終わったら、いよいよ記事を公開しますので、〝indexの設定〟を変更しておきます。
記事の書き始めにindexの設定を〝noindex,nofollow〟に設定したと思いますので、ここではその設定を、〝index,follow〟にします。
27記事の公開
記事を公開します。
公開したら、記事を表示させて編集画面ではなく、訪問者が見る画面と同じようにブラウザで記事を確認します。
このタイミングで意図しないレイアウトになっていたり、テキストの間違いがあったりした場合は、編集画面に戻って修正します。
28タイトルのコピー
編集画面でも実際のウェブページのどちらでも構わないので、記事のタイトルをコピーします。
ここから何を行うか？というと、トップページに記事一覧のスライドショーを表示させているため、そのスライドショーの中に今回新たに作成した記事を追加するという設定です。
29ダッシュボードを表示
タイトルをコピーしたら、ダッシュボードを表示させます
30SmartPostShow
〝SmartPostShow〟というプラグインを入れておけば、意図した場所に記事のスライドショーを表示させることが出来ます
ここでは既に〝SmartPostShow〟を入れて、設定が完了しているので、サイドバーから〝SmartPostShow〟を選択します。
31ManageShows
〝ManageShows〟を選択します。
32編集
既に設定してあるスライドショーを編集するので、〝編集〟をクリックします。
33IncludeOnly
〝IncludeOnly〟という項目の中に今回新たにつくった記事を追加します。
ここに先程コピーしたタイトルを貼り付けます。
34選択・追加
タイトルを貼り付けたら、そのタイトルの記事が表示されますので、選択して追加します。
36トップページの確認
トップページの記事のスライドショーを確認します。
WordPressのブロックエディタ（Gutenberg）はこれまで、ビジュアルエディタやテキストエディタで記事を作ってきた方に取っては始めはとっつくにくいところもありますが、使い慣れると、レイアウトも楽に組めて思うような記事やページをつくることが出来ます。
ブロックエディタがリリースされた直後は不具合も多く、使いづらさもありましたが、WordPressのアップデートの度にブロックエディタも改良されていっているのと、今後はこのブロックエディタが主流になっていくので、いまのうちに慣れることをお勧めします。
