033特定の記事ページのつくり方IE仕様・後半

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選択・追加

タイトルを貼り付けたら、そのタイトルの記事が表示されますので、選択して追加します。

35更新

〝更新〟をクリックします。

36トップページの確認

トップページの記事のスライドショーを確認します。