WordPress投稿に表(テーブル)を設置する方法

WordPressで投稿を作成していると、投稿内に表を設置したい場合も出てくるかと思います。

表とは、複数の要素を行と列とを使った二次元的な配列に並べて情報を整理・分類する際に用いられることが多く、各要素間の関連性などを視覚的にわかりやすく表現することができます。
ホームページ内の情報を整理したり特徴を把握しやすくすることができる表を利用することで、視覚的にも分かりやすく情報を伝えることができるので是非上手に活用していきましょう。

今回は、WordPressのブロックエディタで投稿などの中に表を設置する方法と、WordPressで利用できる表のアレンジ方法について紹介していきたいと思います。

次の章から、表を設置する具体的な方法について紹介していきたいと思いますが、紹介してある設定画面などは使用しているテーマやプラグインによって変わってくることがあります。
この投稿では、WordPressのバージョン6.3にテーマ「Twenty Twenty-Three」を使用し、プラグインは無しの状態での説明になっていますのでご了承くだだい。

なお、ブロックエディタの基本的な使い方は下記の投稿で紹介していますので、よかったら見てみてください。

それでは次の章からWordPressの投稿などに表を設置する際の具体的な手順などについて紹介していきたいと思います。
具体例として、下の図のような表を設置する場合を例に説明していきます。

WordPressの投稿内で作成する表のサンプル画像

テーブルブロックの設置

まず、投稿内に表を設置する方法について紹介していきます。
WordPressのブロックエディタで表を設置するには、テーブルブロックを使用します。
初めに投稿内の表を設置したい箇所で「ブロックを追加」からテーブルブロックを選択して、テーブルブロックを設置しましょう。

テーブルブロックの追加

「ブロックを追加」をクリックして表示されたブロックの一覧の中から「テーブル」を選択します。(下図の赤い枠線内)

WordPressの投稿内にテーブルブロックを追加

上図赤枠内の「テーブル」をクリックすると下の図のように、表(テーブル)の枠の数を選択することができます。
上の方で紹介した今回作成する表には2列4行のデータがありますので、下の図のように「カラム数」に「2」、「行数」に「4」を入力して、「表を作成」ボタンをクリックします。

今回設置する表の例では一番上の行に項目の内容を表す「商品」と「価格」という行が表示されていて表の合計は5行になっていますが、ここで入力する行数はデータのみの行数で良いので4行の表を作成します。
(項目の内容を表す行の設置については、後述するブロック設定サイドバーの設定タブ内にある「ヘッダーセクション」のところで紹介しています。)

なお、枠の数は後からでも変更できますので設置したい表の内容が決まっていない場合は大まかな値を入力しておいても大丈夫です。

WordPressのテーブルブロックを設置する際に表の枠の数を指定

上のように入力して「表を作成」をクリックすると、下の図のように2列4行の枠をもつ表が設置されます。

WordPressの投稿内に指定した数の表の枠組みが設置される

表の各項目を入力

次に、表の枠内に各項目を入力していきます。
それぞれの枠をクリックして選択し、上で紹介した作成例と同じ内容をそれぞれの枠に入力していきます。

WordPress投稿内に設置された表の枠組みの中にそれぞれ項目を入力

表のキャプションを設置する

設置する表にキャプションをつけたい場合には、表の下側にある「キャプションを追加」という文字の部分をクリックしてテキストを入力すると、表の下にキャプションを設置することができます。

ブロックツールバーで設定できる項目

ここからは、テーブルブロックで表を設置した際にブロックツールバーで設定できる項目について、主なものを紹介していきます。

テーブルの配置

ブロックツールバーの中で、下の図の赤丸で囲んだ「配置」をクリックすると、表の配置についての設定を編集することができます。

WordPressのテーブルブロックのブロックツールバーで配置メニューを選択

「配置」アイコンをクリックすると、下図の赤枠で囲んだメニューが表示されます。
これらの中から、希望の配置を選択することができます。

WordPressのテーブルブロックのブロックツールバーで配置メニューを選択すると表示されるメニュー項目

テーブル内の要素の配置

ブロックツールバーの中で、下の図の赤丸で囲んだ「カラムの配置を変更」をクリックすると、表の中の要素の配置を編集することができます。

WordPressのテーブルブロックのブロックツールバーでカラムの配置メニューを選択

配置を変更したいカラム(列)の要素を選択してから上の図の赤丸で囲んだアイコンをクリックすると、下図の赤枠内のようなメニューが開き、そのカラム内の要素を左寄せするか、中央配置するか、右寄せするかを選択することができます。

WordPressのテーブルブロックのブロックツールバーでカラムの配置メニューを選択すると表示されるメニュー項目

表を編集

表の項目数を変更したい時には、下図の赤丸で囲んだ「表を編集」から行うことができます。

WordPressのテーブルブロックのブロックツールバーで表を編集メニューを選択

「表を編集」のアイコンをクリックすると、下図赤枠内のようなメニューが開きます。
はじめに行や列を挿入・削除したい枠をクリックして選択しておいてから「表を編集」をクリックして、下図にあるメニューの中から行や列の挿入または削除を行なってください。

WordPressのテーブルブロックのブロックツールバーで表を編集メニューを選択すると表示されるメニュー項目

ブロック設定サイドバーの設定タブで設定できる項目

テーブルブロックのブロック設定サイドバーには、「設定」と「スタイル」の二つの設定メニューが用意されており、サイドバー上部にあるそれぞれのタブをクリックして切り替えることでそれぞれの設定メニューが表示されるようになっています。

はじめに、テーブルブロックについてブロック設定サイドバーにある「設定」タブで設定できる内容を紹介していきたいと思います。
設定タブ内には下図のような項目が用意されています。

WordPressのテーブルブロックのブロック設定サイドバーで設定タブを選択

それでは、設定タブ内にあるそれぞれの設定項目について紹介していきます。

表のセル幅を固定

下の図の赤い枠線で囲んだ「表のセル幅を固定」をONにすると、表の各項目の幅をカラム(列)の数に応じて均等に配分して固定することができます。

WordPressのテーブルブロックのブロック設定サイドバーの設定タブ内にあるセル幅を固定を選択

ヘッダーセクション

下の図の赤い枠線で囲んだ「ヘッダーセクション」をONにすると、一番上の行に各項目の内容を説明する行を追加することができます。
「ヘッダーセクション」の部分をクリックすると、下の図のように「ヘッダーラベル」と書かれた行が一番上に追加されますので、それぞれ内容を入力してください。
今回例として挙げた表の場合、それぞれに「商品」「価格(円)」と入力します。

作成される表の中でこの項目に入力された内容がデフォルトで太字になったり、境界線が太くなっていたりするので、他の項目とは異なり表の項目を表すヘッダーであることがわかりやすいようになっています。

WordPressのテーブルブロックのブロック設定サイドバーの設定タブ内にあるヘッダーセクションを選択

追加されたヘッダーセクションに今回の作成例の内容を入力すると、下の図のようになります。

WordPressのテーブルブロックのブロック設定サイドバーの設定タブ内にあるセル幅を固定を選択して表示されたヘッダーラベルに項目名を入力

フッターセクション

上で紹介した「ヘッダーセクション」の下にある「フッターセクション」をONにすると、「ヘッダーセクション」と同じものが表の一番下の行に追加されます。
表の下側に項目名などを表す行を設置したい場合は、こちらを利用してください。

ブロック設定サイドバーのスタイルタブで設定できる項目

次に、テーブルブロックのブロック設定サイドバーのスタイルタブ内で設定できる項目について紹介していきます。
スタイルタブ内には下図のような項目が用意されています。

WordPressのテーブルブロックのブロック設定サイドバーのスタイルタブを選択

それでは、スタイルタブ内のそれぞれの項目について紹介していきます。

スタイル

「スタイル」の項目では、表の見た目を「デフォルト」か「ストライプ」のどちらか選択できるようになっています。
「デフォルト」を選択すると一番はじめに今回の作成例として紹介したような縦横に枠線がついた表になります。
一方「ストライプ」を選択すると下の図のように行の背景色が交互にグレーで塗られた表になります。

WordPressのテーブルブロックのブロック設定サイドバーのスタイルタブ内にあるスタイル項目でストライプを選択したときの表示例

「色」の項目では、表の中のテキストと背景の色を編集することができます。
下の図の赤い枠で囲んだ部分の「テキスト」または「背景」をクリックすると、テーマカラーやデフォルトカラーの中から色を選択できるパネルが開きます。さらにこのパネルの一番上の部分(青い枠で囲んだ部分)をクリックすると、その左に自由に色を選択できるパネルが開くので、テーマ・デフォルト以外の色を使用したい場合はこちらで色を選択してください。
また、一度設定した色を元に戻したい場合は、一つ目のパネルの一番下にある「クリア」をクリックすることで、色の設定を元に戻すことができます。

WordPressのテーブルブロックのブロック設定サイドバーのスタイルタブ内にある色項目で設定できる内容

色について設定した内容を元に戻したい場合は、「色」という文字の右側にある縦に三つの点が並んだアイコン(色オプション)をクリックすると開くメニューの中にある、「すべてリセット」をクリックしてください。

タイポグラフィ

「タイポグラフィ」の項目では、表の中の文字のサイズなどを編集することができます。
初めの状態では、下図のようにS,M,L,XL,XXLの中からサイズを選択できるようになっています。

WordPressのテーブルブロックのブロック設定サイドバーのスタイルタブ内にあるタイポグラフィ項目で設定できる内容

また、上図の赤丸で囲んだアイコン(カスタムサイズを設定)をクリックすると数値を入力して文字のサイズを指定することができます。
こちらのアイコンをクリックすると、下の図のような表示に切り替わります。
文字サイズの指定単位は、下図の「px」となっている部分をクリックすることで、「em」や「rem」での指定をすることもできるようになります。
なお、下図の赤丸で囲んだ部分のアイコンをもう一度クリックすることで、元のようにS,M,L,XL,XXLの中から選択して文字サイズを指定することができるようになります。

WordPressのテーブルブロックのブロック設定サイドバーのスタイルタブ内にあるタイポグラフィ項目でカスタムサイズを設定

さらに、「タイポグラフィ」という文字の右側にある縦に三つの点が並んだアイコン(タイポグラフィオプション・下図の赤丸内)をクリックすると、下図の青い枠線で囲んだ部分のようなメニューが開き、表の中のテキストに関するいろいろな設定を行うことができます。

WordPressのテーブルブロックのブロック設定サイドバーのスタイルタブ内にあるタイポグラフィ項目でタイポグラフィオプションを開いた状態

タイポグラフィについて設定した内容を元に戻したい場合は、上図の青枠内の中にある、「すべてリセット」をクリックしてください。

サイズ

「サイズ」の項目では、表全体のパディングとマージンの編集を行うことができます。
それぞれの用語について簡単に説明すると、「パディング」とは表の要素の内側の余白のことで、「マージン」とは表の要素の外側の余白のことになります。どちらで余白を設定しても見た目上は同じように見えることが多いかと思います。
(なお、表の中の文字の余白については、前の項目で紹介したタイポグラフィの「行の高さ」や「文字間隔」で設定することができます。)
パディングやマージンを操作することで、表のサイズを変更することができます。

WordPressのテーブルブロックのブロック設定サイドバーのスタイルタブ内にあるサイズ項目で設定できる内容

パディングとマージンの設定方法は同じなので、例としてパディングを変更する場合を例に紹介していきます。
「サイズ」という文字の右側にある+のアイコンをクリックすると、上の図のようにパディングとマージンを選択できるようになります。
ここで、パディングをクリックすると、下の図のような表示になります。
パディングという文字の下に2段に分かれて設定できるようになっていますが、上の段は表の上側と下側のパディング(余白)を設定するもので、下の段は表の左側と右側のパディング(余白)を設定するものです。
こちらの画面では、バー状になっている部分をクリックすることで上下と左右のパディングをそれぞれ7段階に調整することができるようになっており、右側を選択するほどパディングが大きくなります。

WordPressのテーブルブロックのブロック設定サイドバーのスタイルタブ内にあるサイズ項目でパディングを設定

また、2段あるそれぞれの右端にあるアイコン(カスタムサイズを設定・下図の赤丸内)をクリックすることでより細かくパディングやマージンを設定することもできます。

WordPressのテーブルブロックのブロック設定サイドバーのスタイルタブ内にあるサイズ項目でパディングをカスタムサイズで設定

上図の赤丸内のアイコンをクリックすると、下の図のような表示に切り替わり、入力欄に数値を直接入力してパディングやマージンの値を設定することができるようになります。
また、「px」という文字の部分をクリックすることで、「%」「em」「rem」「vw」「vh」などの単位で指定することもできるようになります。
右端のアイコン(サイズプリセットを使用)をもう一度クリックすると、元のように段階式にパディングを設定できるようになります。

WordPressのテーブルブロックのブロック設定サイドバーのスタイルタブ内にあるサイズ項目でパディングをカスタムサイズで設定する際の入力欄

上下左右のパディングをそれぞれ個別に指定したい場合には、「パディング」の文字の右側にあるアイコン(パディングオプション・下図赤丸内)をクリックします。

WordPressのテーブルブロックのブロック設定サイドバーのスタイルタブ内にあるサイズ項目のパディングオプション

パディングオプションのアイコンをクリックすると、下の図のようなメニューが開きます。
上下左右のいずれかだけを指定したい場合には、指定したい場所をクリックしてください。
全ての箇所のパディングを個別に指定したい場合は、下図の赤い下線を引いた「カスタム」というところをクリックします。

WordPressのテーブルブロックのブロック設定サイドバーのスタイルタブ内にあるサイズ項目のパディングオプションを開いた状態

上図の「カスタム」をクリックすると、下の図のように表の上、右、下、左のそれぞれの箇所のパディングを個別に指定できるメニューが開きますので、それぞれ設定してください。
数値を指定して設定したい場合は、先程と同様右端にあるアイコンをクリックすると入力欄が表示されます。
赤丸で囲んだアイコンをクリックすると、上の図にあるメニューが再度開きますので、元のようにまとめてパディングの設定を行いたい場合には一番上の「水平と垂直」をクリックしてください。

WordPressのテーブルブロックのブロック設定サイドバーのスタイルタブ内にあるサイズ項目のパディングオプションでカスタムを選択した状態

サイズについて設定した内容を元に戻したい場合は、「サイズ」という文字の右側にある+マークのアイコンまたは縦に三つの点が並んだアイコン(いずれもサイズオプション)をクリックすると開くメニューの中にある、「すべてリセット」をクリックしてください。

枠線

「枠線」の項目では、表の枠線の色やスタイル、太さを設定することができます。

枠線の色については、下図の赤丸で囲んだ部分をクリックすることで、テーマカラーやデフォルトカラーの中から選択することができるようなパネルが開きます。
さらにそのパネルの一番上の部分(下図の青枠で囲んだ部分)をクリックすると、その左側に自由に色を選択できるパネルが開きますので、こちらから色を設定することもできます。

枠線のスタイルは、先ほどの色選択パネル内で設定することができます。(下図の赤い枠線内)
左から実線、破線、点線を選択することができます。

枠線の太さは、下図の「px」となっている部分に数値を入力するか、その右側にあるスライダーを操作して設定することができます。
また、「px」の文字の部分をクリックすることで、「%」「em」「rem」「vw」「vh」などの単位に切り替えて設定することもできます。

さらに、スライダーの右側にある鎖のアイコン(個別に指定する・下図の青丸内)をクリックすることで、上下左右それぞれの枠線について個別に設定することもできます。

WordPressのテーブルブロックのブロック設定サイドバーのスタイルタブ内にある枠線項目で設定できる内容

鎖のアイコンをクリックすると、下の図のような表示に切り替わり上下左右それぞれの場所の枠線の色や太さなどの設定を個別に指定することができます。
また、下図の赤丸内のアイコンをクリックすることで、元の表示に戻り全ての枠線についてまとめて設定することができるようになります。

WordPressのテーブルブロックのブロック設定サイドバーのスタイルタブ内にある枠線項目で個別に指定する入力欄

枠線について設定した内容を元に戻したい場合は、「枠線」という文字の右側にある縦に三つの点が並んだアイコン(枠線オプション)をクリックすると開くメニューの中にある、「すべてリセット」をクリックしてください。

まとめ

以上、WordPressの投稿などの中に表を設置する方法について紹介してきました。
表を使用することで、文章だけで表現する場合よりも分かりやすく読者に情報を伝えることができるようになると思いますので、投稿などの中で上手に表を活用してみてください。

WordPress投稿にリストを設置する方法

WordPressで投稿を作成していると、投稿内にリストを設置したい場合も出てくるかと思います。

リストは、複数の項目や要素を一定の順序や規則に従って並べたもので、情報を整理・分類する際に用いられることが多く、項目間の関連性や優先順位を明確にすることができます。
ホームページ内の情報を整理・分類して表現することができるリストを利用することで、視覚的に分かりやすく情報を伝えることができるので是非上手に活用していきましょう。

今回は、WordPressの投稿などの中でリストを表示させたいときの方法について、リストの設置方法とWordPressで利用できるリストのアレンジ方法について紹介していきたいと思います。

次の章から、リストを設置する具体的な方法について紹介していきたいと思いますが、紹介してある設定画面などは使用しているテーマやプラグインによって変わってくることがあります。
この投稿では、WordPressのバージョン6.2にテーマ「Twenty Twenty-Three」を使用し、プラグインは無しの状態での説明になっていますのでご了承くだだい。

なお、ブロックエディタの基本的な使い方は下記の投稿で紹介していますので、よかったら見てみてください。

リストの種類について

リストには、「順序なしリスト」と「順序付きリスト」の二つの種類がありますので、初めにそれぞれについて紹介しておきます。

リストの見た目の違いとして、順序なしリストはそれぞれの項目の前にドットなどが表示され、それぞれの項目間で順序関係は表現されません。一方、順序付きリストはそれぞれの項目の前に数字が表示され、それぞれの項目間での順序関係を表現することができます。
出力されるコードの違いとしては、順序なしリストはHTMLのulタグで出力され、順序付きリストはHTMLのolタグで出力されます。

それぞれのリストが使われる事例としては、順序なしリストは箇条書きのように表示されるので、たとえば料理のレシピの場合で言うと材料を列挙する際に利用できます。順序付きリストは順番を表現することができるので、たとえば料理のレシピの場合で言うと調理の手順を説明する際に利用できます。

下の図は、マドレーヌのレシピを例にした順序なしリストと順序付きリストそれぞれの例です。

順序なしリストと順序付きリストの例
順序なしリストと順序付きリストの例

なお、ブロックエディタのリストブロックを使用しなくても、段落ブロックなどでリストブロックと同じような見た目の表示を作成することはできますが、出力されるHTMLタグが異なりますので、リストを設置する際は、段落ブロックなどではなくリストブロックを使用することをおすすめします。

順序なしリストについて

ここでは、順序のないリスト(ulタグで出力されるリスト)を設置する方法と、設置したリストの設定について紹介していきます。

順序なしリストの設置方法

投稿作成画面で+マークなどから「ブロックを追加」を選択すると、下の図のように追加できるブロックの一覧が表示されます。このブロック一覧の中からリスト(下図の赤い枠内)を選択すると、投稿内に順序なしリストを設置することができます。

WordPressの投稿作成画面でブロックを追加からリストを選択

上図の赤枠内の「リスト」をクリックすると、投稿内に下の図のように順序なしリストのブロックが追加されます。

WordPressの投稿作成画面でリストブロックを設置

リストの項目を入力してエンターキーを押すと、次のリスト項目を入力することができます。
一つのリスト項目の中で改行したいときは、シフトキーとエンターキーを同時に押すことで改行することができます。
このようにして、必要な数だけリスト項目を入力していくことで順序なしリストを設置することができます。

順序なしリストのアレンジ

順序なしリストを選択すると、ブロック設定サイドバーは下の図のようになっています。
設定できる項目としては下図の①色、②タイポグラフィ、③サイズ、④高度な設定の四つがあります。それぞれについて簡単に紹介していきます。

WordPressの投稿作成画面でリストブロックのブロック設定サイドバーでの設定項目

①色

上の図①の「色」の項目では、テキスト、背景、リンクの色をそれぞれ設定することができます。
「テキスト」「背景」「リンク」のそれぞれの部分をクリックすると、カラーピッカーが表示されますので設定したい色を選択してください。

たとえばリスト内のテキストの色を変更したい場合は、「テキスト」の部分をクリックします。すると下図のAの部分が表示されます。
この中にある「テーマ」「デフォルト」の中から色を選択するか、この中に希望の色がない場合は下図Aの部分にある青い枠線で囲んだ部分をクリックすると、Bの部分のカラーピッカーが表示されますので、こちらで色を選択してください。

同様の手順で、背景やリンクの色も設定することができます。

WordPressの投稿作成画面のブロック設定サイドバーでリストブロックの色を設定する

色の設定をデフォルトの状態に戻したいときは、「色」の右側にある「 」のアイコン(色オプション)をクリックして、「すべてリセット」を選択してください。

②タイポグラフィ

先ほどの図中の②の「タイポグラフィ」の項目では、リスト内の文字についてフォントサイズなどを設定することができます。
「タイポグラフィ」の文字の右側にある「 」のアイコン(タイポグラフィオプション)をクリックすると、下の図のようにメニューが開き、サイズ以外に「フォント」「外観」「行の高さ」「文字間隔」「装飾」「大文字小文字」について設定を操作することができます。

サイズの設定については「サイズ」のところにあるS~XXLの中からサイズを選択するほか、「サイズ」の文字の右側にある設定のアイコン(カスタムサイズを設定)をクリックすることで、数値を指定して文字のサイズを設定することもできます。(使用できる単位としては、px,em,remが用意されています。)

WordPressの投稿作成画面のブロック設定サイドバーでリストブロックのタイポグラフィを設定する

タイポグラフィの設定をデフォルトの状態に戻したいときは、「タイポグラフィ」の右側にある「 」のアイコン(タイポグラフィオプション)をクリックして、「すべてリセット」を選択してください。

③サイズ

先ほどの図中の③の「サイズ」の項目では、リストのパディングとマージンをそれぞれ設定することができます。
「サイズ」の文字の右側にある「 」のアイコン(サイズグラフィオプション)をクリックすると、パディングとマージンのボタンがありますのでそれぞれをクリックしてください。
すると、下の図のようにパディングとマージンを設定することができるようになります。

WordPressの投稿作成画面のブロック設定サイドバーでリストブロックのサイズ(パディングとマージン)を設定する

パディングやマージンの値の設定は、上の図にあるそれぞれの項目下のバーで選択するほか、上図赤丸で囲んだ設定のアイコン(カスタムサイズを設定)をクリックして数値で入力することもできます。(設定できる単位には、px,%,em,rem,vw,vhが用意されています。)
その隣にある上図青丸で囲んだ鎖のようなアイコン(個別に指定する)をクリックすると、上下左右それぞれのパディングやマージンを個別に設定することができます。

サイズの設定をデフォルトの状態に戻したいときは、「サイズ」の右側にある「 」のアイコン(サイズオプション)をクリックして、「すべてリセット」を選択してください。

④高度な設定

先ほどの図中の④の「高度な設定」の項目では、リストにHTMLアンカーや追加CSSクラスを設定することができます。

順序付きリストについて

ここでは、順序付きのリスト(olタグで出力されるリスト)を設置する方法と、設置したリストの設定について紹介していきます。

順序付きリストの設置方法

順序付きリストを設置するには、まず順序なしリストと同じ手順で「ブロックを追加」からリストを選択します。
すると一旦、順序なしリストが設置されますので、これを順序付きリストに変更していきます。
設置したリストを選択した状態のブロックツールバーは下の図のようになっています。この中に順序なしリストと順序付きリストを選択するボタン(下図の赤い枠と青い枠)がありますので、順序付きリストを設置したいときは下図の青い枠をつけた部分をクリックしてください。

WordPressの投稿作成画面のリストブロックのブロックツールバーでリストブロックの種類(順序なしリストか順序付きリストか)を選択する

リストブロックのブロックツールバーで順序付きリストを選択すると、下の図のようにリスト項目の前に数字が表示されるようになり、リストが順序なしリストから順序付きリストに変わったことがわかります。

WordPressの投稿作成画面のリストブロックのブロックツールバーで順序付きリストを選択したときのリストの様子とブロック設定サイドバー

順序付きリストのアレンジ

順序付きリストのブロック設定サイドバーは上図の中に赤い文字で示したように「Settings」と「Styles」の二つのタブに分かれていて、「Settings」タブでは、リスト項目に付く数字の初期値を設定したり、数字を逆順にしてカウントダウンのようなリストを作成することもできます。
「Styles」タブを選択すると、順序なしリストの場合と同じ設定項目が表示されます。「Styles」タブで設定できる項目は順序なしリストのところで紹介したものと同じになっていますので、詳しい内容は先ほど紹介した順序なしリストのアレンジのところを見てみてください。

まとめ

以上、WordPressの投稿などの中にリストを設置する方法について紹介してきました。
リストを使用することで、文章だけで表現する場合よりも分かりやすく読者に情報を伝えることができるようになると思いますので、うまくリストを活用してみてください。

E-E-A-Tでウェブサイトの品質を評価するGoogleの仕組みと、それに対応するための具体的な施策を紹介

ホームページを制作・運営する際に、SEO(検索エンジン最適化)について考えられる方も多いと思います。SEOとは、Googleなどの検索エンジンに自分のサイトを評価してもらい、検索結果の上位に表示させるための方法です。しかし、SEOは常に変化しており、最新の基準に合わせてサイトを改善する必要があります。

その中で、Googleが重要視している評価基準の一つがE-E-A-Tです。E-E-A-Tとは、「Experience(経験)」「Expertise(専門性)」「Authoritativeness(権威性)」「Trust(信頼性)」の略で、ウェブサイトの品質を測る指標です。E-E-A-Tは2022年12月にGoogleが発表した新しい評価基準で、以前はE-A-Tと呼ばれていました。

では、E-E-A-Tの各要素はどういう意味を持ち、どうやって高めることができるのでしょうか?この記事では、E-E-A-Tについて詳しく解説します。

続きを読む

WordPress投稿内に画像を設置する方法

WordPressで投稿を作成するときに、投稿内に画像を貼りたいという場合も多いかと思います。
投稿内に画像を設置することで、何かを図解したり、読者によりイメージを使えやすくなったりする他、投稿ページの雰囲気を作ったりすることができます。

今回は、WordPressの投稿に画像を設置する方法について紹介していきたいと思います。

なお、記事内で紹介している設定画面などは使用しているWordPressのバージョンやテーマ、プラグインなどによって変わってくることがあります。
この投稿では、WordPressのバージョン6.1にテーマ「Twnty Twenty-Two」を使用し、プラグインは無しの状態での説明になっていますのでご了承くだだい。

画像を設置する

まず初めは、投稿内に画像を設置する方法について見ていきましょう。

まずは「ブロックを追加」をクリックしてブロックの選択画面を開きます。
追加するブロックの候補の中から、下図の赤丸で囲んだ「画像」をクリックします。

「ブロックを追加」のブロック候補から画像ブロックを選択

すると下図のように画像の選択方法を尋ねられますので、「アップロード」「メディアライブラリ」「URLから挿入」の中から選択します。

設置する画像の選択方法を「アップロード」「メディアライブラリ」「URLから挿入」の中から選びます

上の図で「メディアライブラリ」を選択すると、下の図のような画面が開きます。
メディアライブラリにアップロードした画像の中から投稿内に設置する画像を選択することができます。

メディアライブラリへのアップロード方法は、下記の記事で紹介していますので良かったら見てみてください。
WordPressで作ったホームページへの画像のアップロード方法

画像を選択すると下の図のように選択された画像にチェックマークがつき、画面の右側に情報が表示されますので、この画像でよければ右下にある「選択」(画像の赤丸部)をクリックします。

メディアライブラリにアップロードしてある画像の中から投稿に設置したい画像を選択して「選択」ボタンをクリック

すると、下図のように投稿作成画面内に選択した画像が配置されます。

ここでは、画像にキャプションを設置したりすることもできます。
画像の下側にある「キャプションを追加」の部分をクリックして文章を入力すると、キャプションとして表示されます。

投稿の中に選択した画像が設置されました

画像の設定パネルでできる設定

ここからは、投稿作成画面右側に表示される設定パネルで行うことができる設定について紹介していきます。

設定パネルでは、設置した画像に関するいくつかの設定をすることができますのでここでは主なものを紹介したいと思います。

・スタイル
設置した画像の形状を「デフォルト」と「角丸」から選択できるようになっています。
「角丸」に関しては下の方で紹介する項目でも設定できます。

・ALTテキスト(代替テキスト)
画像の代替テキストを設定することができます。
画像の代替テキストは、何らかの理由で画像が表示できない場合にテキストとして表示されたり、ブラウザの読み上げ機能で利用されたりしますので、この画像を説明する文章を設定しておきましょう。
ユーザビリティやSEOの面からも、装飾目的の画像など以外には画像の代替テキストを設定することが推奨されています。

設置した画像について、画面右側の設定パネルで設定できる項目「スタイル」「ALTテキスト(代替テキスト)」

・画像サイズ
画像サイズは、下図の「画像サイズ」の項目のところで「フルサイズ」などの選択肢から選択する方法か、「画像の寸法」の項目のところで数値やパーセンテージを入力して選択する方法が選べます。

設置した画像について、画面右側の設定パネルで設定できる項目「画像サイズ」「画像の寸法」

なお、「画像サイズ」の項目で選択肢の中にある「フルサイズ」「中」「サムネイル」の各画像のサイズは管理画面の設定の中にある「メディア」の項目内で設定した数値が使用されます。(下図参照)

設置した画像について、画面右側の設定パネルで設定できる項目「画像サイズ」の各サイズは設定のメディアの項目で確認・変更することができます

・枠線、角丸
ここでは、設置した画像に枠線をつけたり、画像の角を丸くしたりすることができます。
それぞれ枠線の太さや角丸の半径を数値で入力する他、スライダーで設定することもできます。

また右側の赤丸で囲んだ部分をクリックすると、四辺の枠線の太さをそれぞれ独立して設定したり、4つの角の角丸の半径を個別に設定することができます。

設置した画像について、画面右側の設定パネルで設定できる項目「枠線」「角丸」

画像のツールバーでできる設定

次に、設置した画像を選択すると表示されるツールバーで設定できる内容について紹介していきます。

・配置
ブロックツールバーの一番左側には「配置」のボタンがあります。「配置」をクリックすると下図のように配置の選択肢が表示されますので、お好みのものを選択してください。

ブロックツールバーで設定できる項目「配置」

・リンク
次に「リンク」のボタンがあります。ここをクリックすると、設置した画像をクリックした時のリンク先などを設定することができます。

ブロックツールバーで設定できる項目「リンク」

・切り抜き
「切り抜き」をクリックすると、設置した画像を切り抜くことができます。

ブロックツールバーで設定できる項目「切り抜き」

・画像上にテキストを追加
「画像上にテキストを追加」をクリックすると、設置した画像の上に重なるようにしてテキスト(文章)を設置することができます。

ブロックツールバーで設定できる項目「画像上にテキストを追加」

・デュオトーンフィルターを適用
「デュオトーンフィルターを適用」をクリックすると、設置した画像にフィルターをかけることができます。いくつかのフィルターが用意されている他、自分でフィルターの色を指定することもできますので、設置した画像をフィルター加工したい場合には使ってみてください。

ブロックツールバーで設定できる項目「デュオトーンフィルターを適用」

・置換
・オプション
「置換」をクリックすると、設置した画像を他の画像に置き換えることができます。
「オプション」をクリックすると下図のようなオプションのメニューが開き、画像を削除したりすることができます。

ブロックツールバーで設定できる項目「置換」「オプション」

まとめ

以上、WordPressの投稿内に画像を設置する方法について紹介してきました。
うまく画像を利用して、より魅力的な投稿になるように工夫してみてください。

WordPressの投稿にアイキャッチ画像を設置する方法

WordPress投稿のアイキャッチ画像とは、よく投稿ページの一番初めの方に表示されている画像のことです。

このアイキャッチ画像の役割としては、読者の興味を引きつけたり投稿の内容をイメージしてもらうことなどがあります。
また、SNSなどを通しての投稿の拡散されやすさも、上手にアイキャッチ画像を使っている場合とそうでない場合とでは大きく変わってきますので、投稿を作成する際はアイキャッチ画像をうまく活用することをおすすめします。

アイキャッチ画像の表示のされ方は、使用しているテーマやプラグインによって変わってくるのですが一般的にはそれぞれの投稿ページの一番上に大きく表示されたり、投稿一覧のページでタイトル等と一緒に表示されることが多いです。

今回は、このアイキャッチ画像を投稿に設置する方法について初心者の方にもわかりやすいように紹介していきたいと思います。

アイキャッチ画像とは

まず初めに、アイキャッチ画像について例を挙げながら簡単に説明していきたいと思います。

投稿ページでのアイキャッチ画像

下の画像は、WordPressのテーマに「Twenty Twenty-Two」を使用しているサイトの投稿ページの例です。
一番上に投稿のタイトルがあり、その下に大きくアイキャッチ画像が表示され、その下に投稿の本文が来ています。
使用するテーマや設定によって変わってくることもありますが、アイキャッチ画像はこの例のように投稿の初めの方に大きく表示されることが多いです。

wordpress投稿ページでのアイキャッチ画像の表示例
投稿ページの例

投稿一覧ページでのアイキャッチ画像

下の画像は同じく、WordPressのテーマに「Twenty Twenty-Two」を使用しているサイトの投稿一覧ページの例です。
それぞれの投稿のアイキャッチ画像とタイトル、抜粋などが表示されています。
この例のように、投稿一覧ページでも多くのテーマではアイキャッチ画像が表示されていることが多いです。

wordpress投稿一覧ページでのアイキャッチ画像の表示例
投稿一覧ページの例

アイキャッチ画像の設置方法

それでは、ここからは具体的なアイキャッチ画像の設置方法について紹介していきます。
なお、WordPressのテーマとして「Twenty Twenty-Two」を使用している場合を例にして紹介していきます。

下の画像は、投稿作成画面です。
投稿作成画面の右側に、設定の操作ができるサイドバーがあります。
(このサイドバーが表示されていない場合は、画面一番上の右から二番目にある歯車のアイコンをクリックすると表示されます。)

※ 投稿の設定については以前紹介した下記のページでお話ししていますので、興味のある方は見てみてください。
 WordPress投稿の操作方法:投稿の設定

このサイドバーの一番上で「投稿」(下図の赤丸部)か「ブロック」かを選択できますので「投稿」を選択します。

すると設定項目の中に「アイキャッチ画像」(下図の赤い下線部)という項目がありますのでここをクリックします。

wordpressの投稿作成画面でアイキャッチ画像を設定する箇所

「アイキャッチ画像」をクリックすると下の図のように「アイキャッチ画像を設定」(下図の赤い枠線内)という枠が表示されます。

wordpressの投稿作成画面でアイキャッチ画像を設定する

さらに、この「アイキャッチ画像を設定」の部分をクリックすると、下の図のようにアイキャッチ画像を設定できる画面が開きます。

こちらの画面では、画像をアップロードしてアイキャッチ画像に設定するか、メディアライブラリにアップロード済みの画像の中から選択してアイキャッチ画像を設定することができます。


下図の赤い枠線内の部分でアップロードするかメディアライブラリの画像の中から選ぶかを選択することができます。
次の項目以降でそれぞれの場合についてアイキャッチ画像の設定方法を紹介していきます。

wordpressのアイキャッチ画像設定画面
アイキャッチ画像の設定画面

ファイルをアップロードしてアイキャッチ画像を設定

アイキャッチ画像の設定画面で「ファイルをアップロード」を選択すると下の画像のようなページが開きます。

この画面に画像をドラッグアンドドロップするか、「ファイルを選択」ボタンから画像を選択することでアイキャッチ画像に設定したい画像をアップロードすることができます。

画像のアップロードが完了すると、次の項目で照会するメディアライブラリの画像一覧のページが開きます。

画像ファイルをアップロードしてアイキャッチ画像を設定する箇所
画像をアップロードしてアイキャッチ画像を設定

メディアライブラリにアップロード済みの画像の中からアイキャッチ画像を設定

すでにメディアライブラリにアップロードしてある画像の中からアイキャッチ画像を選択する場合は、アイキャッチ画像の設定画面で「メディアライブラリ」を選択すると下の画像のようになりメディアライブラリにアップロードされた画像が一覧表示されます。

この中からアイキャッチ画像に設定したい画像をクリックすると、下の図のように選択した画像にチェックマークが付きます。
この状態でページの右下にある「アイキャッチ画像を設定」ボタン(下図の赤い枠線部)をクリックすることで選択した画像がアイキャッチ画像として設定されます。

なお、メディアライブラリへの画像のアップロード方法について詳しくは下記のページで紹介していますので興味のある方は見てみてください。
WordPressで作ったホームページへの画像のアップロード方法

メディアライブラリの画像の中からアイキャッチ画像を設定する箇所
メディアライブラリの画像の中からアイキャッチ画像を設定

アイキャッチ画像の設定完了後

上記のそれぞれの方法でアイキャッチ画像を選択して「アイキャッチ画像を設定」をクリックすると、下の画像のように投稿作成ページに戻り、右側のアイキャッチ画像の部分で設定した画像を確認することができます。

この画像の下にある「画像を置換」ボタンや「アイキャッチ画像を削除」から設定してあるアイキャッチ画像の変更や取り消しを行うことができます。

アイキャッチ画像を設定した投稿作成画面
投稿作成画面でアイキャッチ画像が設定された状態

まとめ

以上、WordPressの投稿にアイキャッチ画像を設置する方法について紹介してきました。
投稿の内容をうまく伝えたり投稿に興味を持ってもらえるように、アイキャッチ画像をうまく活用してみましょう。

WordPress投稿にボタンなどでリンクを設置する方法

WordPressで投稿を作成していると、投稿内にリンクを設置したい場合が結構出てくるかと思います。

ホームページ内のボタンやテキストなどをクリックすることでページを移動することができるリンクは、読者の利便性を向上させるのにとても役に立ちますので是非上手に活用していきましょう。

今回は、WordPressの投稿内にリンクを設置する方法について紹介していきたいと思います。

次の章から、ボタン・テキスト・画像にそれぞれリンクを設定する具体的な方法について紹介していきたいと思いますが、紹介してある設定画面などは使用しているテーマやプラグインによって変わってくることがあります。
この投稿では、WordPressのバージョン5.9にテーマ「Twnty Twenty-Two」を使用し、プラグインは無しの状態での説明になっていますのでご了承くだだい。

ボタンにリンクを設定する方法

WordPressのブロックエディタには、ボタンブロックが用意されています。
ボタンは見た目でクリックできることが伝わりやすいため、読者にとってリンクであることが分かりやすいと思います。
このボタンにリンクを設置するには、まずボタンを設置して、そのあとにボタンにリンクを設定します。
それぞれについて簡単に手順を紹介しておきます。

なお、ブロックエディタの基本的な使い方は下記の投稿で紹介していますので、よかったら見てみてください。

ボタンを設置

投稿にボタンを設置するには、投稿作成画面の「ブロックを追加」でボタンブロックを選択します。
ブロックの追加をクリックし、デザインブロックのカテゴリー内にあるボタンブロック(下図の赤い枠線内)をクリックします。

投稿作成画面でボタンブロックを選択

「ボタン」をクリックすると、下図のようにボタンが設置されます。
また、図中の赤い文字で示したようにボタンのブロックツールバーに配置やリンクを設定するツールが表示されています。
「テキストを追加…」となっているところをクリックしてボタンに設置したいテキストを入力しましょう。

投稿作成画面でボタンブロックを追加

ボタンの設置自体は、以上で完了です。
次の項目では、ボタンの見た目を変更する方法を紹介していきます。

ボタンブロックの設定で見た目を変更

ボタンを設置したあと、ボタンブロックの設定を操作することでボタンの見た目を変更することができます。
ボタンブロックの設定は、設置したボタンをクリックして選択すると投稿作成画面の右側に表示されます。
ここでは、主な設定項目について紹介していきます。

スタイル

スタイルの項目では、ボタンのスタイルを「塗りつぶし」と「輪郭」の二つの中から選択することができます。
「デフォルトスタイル」でいずれかを選択しておくと、次からボタンを設置した段階でそのスタイルが適用されます。

ボタンブロックの設定内にあるスタイルの項目

色の項目では、ボタンのテキスト色と背景色を設定することができます。
背景色にはグラデーションを利用することもできます。

ボタンブロックの設定内にある色の項目

枠線

枠線の項目では、ボタンの四隅の角の形状を変更することができます。
ボタンを設置した段階では角ばっているボタンの四角を丸くすることができます。
左側の枠内に数値を入力するか、真ん中のスライダーを操作することで四隅の角丸の半径を変更することができます。なお、左側の枠内にある「px」の部分をクリックすると、他の単位で角丸の半径を指定することもできます。
また、右側のマーク(個別に指定する)をクリックすると、上下左右の角丸の半径にそれぞれ別々の数値を指定することができます。

ボタンブロックの設定内にある枠線の項目

幅の設定

幅の設定の項目では、ボタンの幅を選択することができます。

ボタンブロックの設定内にある幅の設定の項目

タイポグラフィ

タイポグラフィの項目では、ボタンの中の文字のサイズを設定することができます。1〜4の中から選択する他、右側のマークをクリックすることで下側の図のように入力欄に変わるので、ここに直接数値を入力して文字サイズを指定することもできます。なお、こちらも「px」の部分をクリックすることで他の単位も利用することができます。
また、右上のプラスマークをクリックすることで文字のフォントなど他のタイポグラフィについても設定することができます。

ボタンブロックの設定内にあるタイポグラフィの項目(デフォルト)
ボタンブロックの設定内にあるタイポグラフィの項目(カスタム)

寸法

寸法の項目では、ボタン内の文字の周りのパディング(余白)を設定することができます。
左側の枠内に数値を入力することでパディングを設定することができます。こちらも「px」となっている部分をクリックすることで、他の単位を利用することができます。
また、右側のマーク(個別に指定する)をクリックすることで、上下のパディングと左右のパディングをそれぞれ個別に設定することができます。

ボタンブロックの設定内にある寸法の項目

ここまでで、希望の見た目のボタンを設置することができたと思います。
次の項目で、設置したボタンにリンクを設置していきます。

ボタンにリンクを設定

ボタンにリンクを設定するには、リンクを設定したいボタンを選択した状態で、ブロックツールバーにあるリンクボタンをクリックします。

設置したボタンブロックを選択してブロックツールバー内のリンクボタンをクリック

すると、下図のようなダイアログが開くので、上の段の枠内に移動先のURLを入力するか、コピペなどで貼り付けます。
例えば、Googleのページへのリンクを設置したい場合は、この枠内にGoogleのページのURLである「https://www.google.com/」と入力し、リターンキーを押すか入力欄右側にあるリターンマークをクリックします。

また、リンクがクリックされたときに移動先をブラウザの新しいタブで開くようにしたいときは、下の段の「新しいタブで開く」をクリックしてオンにしておきます。

リンクボタンをクリックすると表示されるダイアログに移動先のURLを入力

リンクの移動先のURを変更したい場合は、リンクを設定したボタンをクリックして選択し、下図のダイアログの「編集」(ペンのマーク)をクリックします。
リンクを取り消したい場合は、このダイアログの一番右側かブロックツールバーにある「リンク解除」をクリックします。

リンクを設置したボタンをクリックすると表示されるダイアログで移動先を変更したりリンクを解除

テキストにリンクを設定する方法

投稿内の任意のテキストにリンクを設置することで、ホームページの読者が文章を読むことを中断せずにリンクを認識することができます。
投稿内のテキストにリンクを設置するには、リンクを設置したいテキストを選択した状態で、ブロックツールバー内にあるリンクボタンをクリックします。

例として、「詳しくはこちら」という文章を入力した段落ブロックの「こちら」というテキストにリンクを設置したい場合の手順を紹介します。
段落ブロック内の「こちら」というテキストを選択してブロックツールバーのリンクボタンをクリックします。

リンクを設置したいテキストを選択した状態でブロックツールバーのリンクボタンをクリック

すると先ほどボタンのところでも紹介したリンク設置のダイアログが開きますので、移動先のURLなどを入力します。
また、段落ブロック以外のブロック内のテキストにも同じ手順でリンクを設置することができます。

画像にリンクを設定する方法

投稿内に設置した画像や、バナーにリンクを設置することで、ホームページの読者にとってリンクであることが分かりやすくなったりします。
投稿内の画像にリンクを設置するには、リンクを設置したい画像を選択した状態で、ブロックツールバー内にあるリンクボタンをクリックします。

例として、バナーの画像を設置してその画像にリンクを設置したい場合の手順を紹介します。
まずは画像ブロックを追加して、バナーの画像を設置します。
画像を設置すると下の図のようにブロックツールバーが表示されますので、ブロックツールバーの「リンクを挿入」ボタンをクリックします。

リンクを設置したい画像を選択した状態でブロックツールバーのリンクボタンをクリック

すると先ほどボタンのところでも紹介したリンク設置のダイアログが開きますので、移動先のURLなどを入力します。

ページ内リンクの設置方法

リンクの種類について

ここまで、リンクを設置する方法について紹介してきましたが、リンクはその移動先によって、外部リンク、内部リンク、ページ内リンクに分けることができます。

  • 外部リンク
    外部リンクとは、リンクを設置してあるページとは別のホームページへ移動するリンクのことです。
    引用元のホームページや参考になる外部のホームページへリンクを貼る場合などに利用します。
  • 内部リンク
    内部リンクとは、リンクを設置してあるページと同じホームページ内の異なるページへ移動するリンクのことです。
    同じホームページ内にある過去の投稿ページへのリンクやトップページへのリンクも内部リンクになります。
  • ページ内リンク
    ページ内リンクとは、リンクを設置してあるページ内の別の場所に移動するリンクのことです。
    ページが長くなった際などに読者が目的の部分に簡単に移動することができるようにすることで、利便性を向上させることができます。

ページ内リンクを設置する方法

外部リンクと内部リンクについてはリンクの設定時に移動先のURLを記載するだけでリンクの設置は完了しますが、ページ内リンクの場合には移動先となるURLを自分で作成する必要があります。
ここでは、簡単な例をあげながらページ内リンクを設置する手順を紹介していきます。

移動先を作成

まずは、投稿作成画面で移動先にしたいブロックをクリックして選択します。
その状態で、右側の設定の一番下側にある「高度な設定」の右側にある「 」マークをクリックすると「高度な設定」の内容が開きます。
その中の一番上にある「HTMLアンカー」の枠内に移動先の名前を設定します。
(移動先の名前は好きなように決めることができますが、一つのページ内で同じ名前を使い回すことはできません。)

例として、「アクセス情報」という見出しブロックがあり、そこへ移動するページ内リンクを設置する場合の手順を紹介します。
この見出しブロックを選択した状態で、HTMLアンカーの枠内にリンク先の名前として「access」と入力します。

ブロックの設定の「高度な設定」内にあるHTMLアンカーの入力欄に移動先の名前を入力

以上でページ内リンクの移動先の作成は完了です。

移動先へのリンクを設置

次に、先ほど作成した移動先へのリンクを設置します。
ページ内リンクを設定する場合も、他のリンクを設置する場合と同様にブロックツールバーのリンクマークをクリックして移動先のURLを入力します。
ページ内リンクの場合は、このURL入力欄に、前の項目で作成した移動先の名前の先頭に「#」をつけて入力します。

先程の例で挙げた「アクセス情報」へのページ内リンクを設定したい場合、「#」とHTMLアンカーに設定した名称「access」を入力するので、URLの入力欄には「#access」と入力します。

リンクの移動先のURL入力欄に「#」と移動先の名前を入力

以上の二つの工程でページ内リンクの設置は完了です。

まとめ

以上、WordPressの投稿にリンクを設置する方法について紹介してきました。
上手にリンクを活用して、読者が使いやすく役に立つ投稿になるように工夫してみてください。