この記事で解決出来る課題は、
- ブロックエディターを使った記事ページの組み立て
- 記事の中で画像を横並びで表示
- 記事作成のショートカット
物件紹介記事のつくり方
単なる物件記載ではなく、近隣の飲食店やスーパーなど生活に関わる情報を織り交ぜた、物件の紹介記事ページの組み立て方を詳しく解説していきます。
WordPressのブロックエディター（Gutenberg）を使うことで、画像の横並びなどが簡単に出来るようになり、表現方法が広がります。
1サイトにログイン
WordPressのログイン画面を開き、サイトにログインします。
2ダッシュボード
ダッシュボードの画面を開いておきます。
3ウェブアルバムを開く
記事ページ内に掲載する画像が入っているウェブアルバムを開きます。
ウェブアルバムを開く時は違うブラウザで開くことをお勧めします。メインでChromeを使っているのであれば、ウェブアルバムはFirefoxで開けばいいでしょう。
4共有リンクを取得
ここから、ウェブアルバムの共有リンクを取得します。
ウェブアルバムの画面向かって右上のシェアアイコンをクリックします。
5リンクをコピー
共有リンクのリンクをコピーします。
表示された小窓の画面向かって左下にある〝リンクをコピー〟をクリックして、リンクを表示させます。
6リンクの共有
リンクの共有画面が開いたら、画面に表示されている共有リンクを選択してコピーします。
7プライベートウィンドウ
ここではFirefoxを使っているので、Firefoxの各パーツの名称で案内を進めます。画面向かって右上の設定アイコンをクリックしてメニューを表示させ、〝新規プライベートウィンドウ〟を選択します。
8プライベートブラウジングでアルバム表示
プライベートウィンドウが開いたら、アドレスバーの欄にウェブアルバムのURLを貼り付けて、エンターキーを押してウェブアルバムを表示させます。
ちなみに、〝プライベートウィンドウ〟というのは、通常のウェブサイトの閲覧とは違っていて、ウィンドウを閉じるとインターネットの閲覧履歴やフォームデータ、Cookie、サイトデータが保存されないようになっているウィンドウのことで、そのプライベートウィンドウでウェブページなどを閲覧することを〝プライベートブラウジング〟といいます。
9〝投稿〟から〝投稿一覧〟を表示
WordPressのダッシュボードの画面に戻り、〝投稿〟から〝投稿一覧〟を開きます。
10記事のフォーマットをコピー
レイアウトが同じで、中身の文章や画像を差し替えることで成立する今回のような記事ページの場合、事前にフォーマットとなる記事を用意しておきます。
そして、新たに記事ページを作成する場合、そのフォーマットをコピー（複製）して、中身の文章と画像を差し替えて行くといった流れになります。
記事の一覧の中から前回作成した記事をコピーして使うか、フォーマットを既に用意している場合は、フォーマットとなる記事をコピーします。
11記事のフォーマットがコピーされた状態
記事のフォーマットがコピーされた状態になると、記事一覧の中に新たに〝下書き〟として記事ページが出現します。
この時、記事のフォーマットそのものも、〝下書き〟として保存されていると思いますので、どちらがコピーなのか？分からなくなると思いますが、どちらも同じなのでどちらのフォーマットを使っても問題ありません、同じものだから。
12クイック編集機能
ここでは〝クイック編集〟という機能を使っていきます。
〝クイック編集〟とは、タイトル、スラッグ、投稿日やカテゴリー、タグなどを編集することが出来る機能です。
13〝クイック編集〟が開く
〝クイック編集〟をクリックして開きます。
14タイトル変更
識別しやすいように先にタイトルをこれから作成する記事名に変更しておきます。
15日付変更
日付を記事を公開する日時に変更します。
16投稿者を変更
投稿者をご自身あるいは、記事の担当者に変更します。
17更新
〝更新〟ボタンをクリックして、変更した箇所を記事に反映しておきます。
18編集
タイトル付けなどが終わったら、記事の編集に入ります。〝編集〟をクリックして編集画面を開きます。
19グーテンベルクの編集画面
2019年1月に導入されたWordPressのブロックエディタ、Gutenberg(グーテンベルク)は、htmlやスタイルシートといったウェブページを構成する言語を知らなくても、ブロックを組み上げて、そこにテキストを記述したり、画像を置いたりしてウェブページの表示を作っていくことが出来ます。
20サムネイル画像の設定
最初に、サムネイル画像を設定します。
ここでの解説は、記事の組み立てを順番にしていきます。そのため、一番最初に目にするのがサムネイルです。ですので、サムネイル画像の設定からやっていきます。
21サムネイル画像を選択
記事に使用する画像が入っているウェブアルバムから、〝サムネイル画像〟を選択します。
22画面いっぱいに画像を表示
記事の中で画像を設定したサイズで表示させるために、画面いっぱいに画像を表示（全画面表示）させます。
画面いっぱいに画像を表示させたら、画像のどこかの部分で右クリック、画像のリンクをコピーを選択して、画像のリンクを握ります。
画像を画面いっぱいに表示させることで、設定したサイズの画像のURLを取得出来ます。
23画像のリンク（画像URL）をペースト
WordPressの編集画面に戻り、サムネイルの表示アイテムに画像のリンク（画像URL）をペーストします。
24サムネイルのプレビュー
ここでは、Featured Imageというプラグインを使っていますので、〝Preview〟をクリックしてサムネイル画像のプレビューを表示させます。
なお、WordPressのデフォルトのサムネイル画像表示アイテムの場合はこのやり方では出来ません、アイキャッチ画像からの設定になります。
25サムネイル画像のプレビューの確認
サムネイル画像のプレビューを確認します。
26indexの変更
もし、制作途中で誤って公開してしまった時のことを考慮して、〝indexの設定〟を〝noindex,nofollow〟に設定しておきます。
noindexとは、Googleなどの検索エンジンにサイトやページをインデックスさせない（検索に表示されない）ようにするためにHTMLのheadタグ内にマークアップするmetaタグのことで、nofollowというのは、Googleなどの検索エンジンのクローラーにリンクを辿らせないようにするためにHTMLのheadタグ内にマークアップするmetaタグのことです。
27記事の執筆
ここから記事の執筆に入っていきます。
既にレイアウトが組まれていて、ダミーの文章あるいは他の記事の文章が記載されている箇所をクリックして選択・編集できる状態にして、タグの部分を消去や変更しないように注意しながら、記事を書いていきます。
28下書き保存
記事を執筆したら、公開ではなく、〝下書き保存〟します。
〝下書き保存〟というのは、そのまま記事を〝下書き〟として保存しておくということです。
WordPressはネットの接続で繋がっているため、ネットの接続が不安定になったりすると、それまで書き綴った記事が消えてしまうことがあります。そのため、こまめに下書き保存しておくことをお勧めします。
29プレビューの表示
下書きを保存したら、記事が実際に公開した時にどのように見えているか？を〝プレビュー〟の表示で確認しておきます。
最初のうちは、誤ってフォーマットに入っているタグを消してしまったりすることが少なくないため、下書き保存したら、プレビューで表示、確認するクセを付けることが結果、作業効率を高めます。
30プレビュー画面
プレビュー画面が表示されました。
31編集画面
編集画面に戻り、記事の続きを書いていきます。
32記事執筆の続き
予め、段落ブロックが用意されている場合は、段落ブロックをクリックして記事の続きを書いていきます。
33ブロックを追加
予め用意されているブロックが無い場合や、次に入れたいのが文章ではなく、画像の場合やあるいは、２カラムにして画像を横に並べたい場合などは、新たにブロックを追加します。
ブロックの追加は、エディタ画面に表示されている[＋]アイコンをクリックします。
34すべて表示
ブロックのメニューが開いたら、〝すべて表示〟をクリックします。
35カラムを選択
今回は、記事内にサイズの違う画像を２枚横並びで表示させるので、まずはカラムを選択します。
ちなみに、ここで〝カラム〟とは、列のことを指します。
36カラムの選択
今回は、記事内にサイズの違う画像を２枚横並びで表示させるので、画面向かって左側が大きく、右側が小さい〝66/33〟というサイズのカラムを選択します。
37アルバムを開いて
記事内にカラムが配置出来たら、ウェブアルバムを開きます。
この時点で、記事内には中身のない空のボックスが２個並んで配置されている状態だと考えてください。
38配置する画像を選択
画像を選択する時は、画面を最大表示してから、〝画像のリンクをコピー〟します。
最初に記事の画面向かって左側に表示させる画像のリンクをコピーします。
39カラムのブロックを選択
記事の編集画面に戻って、カラムの画面向かって左側のブロックを選択して、ブロックメニューを表示させます。
40画像を選択
ブロックメニューの中から、画像を選択します。
これはいま、どういう状態になっているかというと、最初に〝カラム（ブロック）〟を置いて、記事無いを２カラム、つまり２列にしました。この時点では中身はありません。そこに、片方のブロックに画像ブロックを追加したという状態です。
41URLから挿入
画像ブロックを追加したら、画像をどのように挿入するか？の案内が開きます。
今回は、URLから画像を挿入するので、〝URLから挿入〟を選択します。
42画像のURLをペースト
〝URLから挿入〟を選択すると、URLの入力窓が表示されるので、そこに先程ウェブアルバムを開いて記事に挿入する画像を表示させて、画像のURLをコピーして、握っているURLをペーストします。
43画像表示の確認
エディタ画面（記事の編集画面）で挿入した画像を確認します。
44次に挿入する画像の選択
次はカラムの向かって右側に表示させる画像をウェブアルバムを開き、選択して画像のリンクをコピーしてリンクを握ります。
45画像ボロックを追加・URLから挿入
同様に、〝画像ブロックを追加・URLから挿入〟で画像のURLをペーストします。
46横並びで２つの画像が表示された
横並びで２つの画像が表示されました。
ウェブページで横並びで２つの画像を表示させるには、ブロックエディター登場以前には、スタイルシートというウェブページのデザインを司る言語を使ってレイアウトを組む必要がありました。それが、ブロックエディターの登場で簡単に画像を横並びで表示出来るようになりました。
47下書き保存・画面プレビュー
編集画面で画像が２つ横並び出来ているのを確認出来たら、下書き保存→画面プレビューで実際のページで確認してみましょう。
48アルバムから次の画像リンクをコピー
次も記事内を２カラムに分けて、画面向かって左側に画像、右側には表を入れていきます。
49配置済みの画像を削除
ここでは既にカラム（２カラム）が配置されていて、ダミーの画像が入っているブロックの編集の手順を解説します。
まず、配置済みのダミー画像を選択して画像を削除します。
50メディアを追加
画像を削除したところに新たな画像を追加するので、画像を削除した場所にカーソルを置いたまま、メディアを追加を選択します。
〝メディア〟というのは、画像を始め、動画などの各種メディアのことです。
51URLから挿入
〝URLから挿入〟を選択して、アルバムから持ってきた画像リンク（画像のURL）をペーストして、〝投稿に挿入〟します。
これで、記事無いの画像が差し替わりました。
今回の解説では、あらかじめ記事のフォーマットを用意しておいて、同じようなレイアウトの記事を作る時には、そのフォーマットをコピーして新しい記事を作るやり方を解説しました。
また、記事内にブロックを追加してそこに文章を書いたり、画像を配置したり、またカラムを追加して２カラムにしたり、その２カラムにした箇所に画像を横並びで２枚並べたりしました。
WordPressにブロックエディターが登場したことで、簡単にウェブページが作れるようになりインターネットのマーケティング活動が楽になりました。
