本ページはプロモーションが含まれています
WordPressのブロックエディタ「Gutenberg」は自動的にHTMLのコーディングもされ非常に便利な機能です。
そこに人気のテーマ「AFFINGER6」の機能を加えるとデザインも格段に改善し、自分が望むようなページを作ることができます。
ただ一点、テーブル（表）に関しては不満な点があります。「theadタグ」「tbodyタグ」「tfootタグ」などのタグのコーティングが思い通りにできない点です。
thタグなど正しくコーディングすることでSEOにも効果があると考えられます。
そこで今回はクラシックモードでテーブル（表）のソースを整え、さらに枠線や背景色もしっかりと描く方法を紹介したいと思います。
こんな人におすすめ
- WordPressできれいなテーブル（表）を作りたい初心者～中級者
- AFFINGER6でなテーブル（表）を作りたい初心者～中級者
- テーブル（表）のコーディングをしたい初心者～中級者
完成形
| 都道府県 | 人口 | 面積 | 人口密度 |
|---|---|---|---|
| 東京都 | 14,011,487 | 2,194.05 | 6,386.13 |
| 大阪府 | 8,807,279 | 1,905.34 | 4,622.42 |
| 愛知県 | 7,516,008 | 5,173.15 | 1,452.89 |
| 福岡県 | 5,123,371 | 4,986.86 | 1,027.37 |
| 北海道 | 5,181,776 | 78,421.36 | 66.08 |
| 国内平均 | 2,670,279 | 7,935.56 | 654.59 |
テーブル（表）に「theadタグ」「tbodyタグ」「tfootタグ」などもしっかりとコーディングして、見出しの背景色を変え、枠線も描くことで見やすいテーブル（表）に仕上げます。
AFFINGER6でテーブル（表）を作成する
「新規投稿を追加」か「投稿を編集」のページで画面左上の「ブロック挿入ツールを切り替え」ボタンを選択してブロック挿入ツールを表示します。
ブロック挿入ツールから「テーブル」を選択します。
テーブル作成に必要な表形式のデータを挿入します。
カラム数
カラム数を設定します。カラム数はテーブル（表）の横軸、列の部分になります。
行数
行数を設定します。行数はテーブル（表）の縦軸の部分になります。
スタイル
AFFINGER6の機能を利用してテーブル（表）のデザインを変更します。
画面右上の歯車マークの「設定」ボタンを選択してテーブルの設定画面を表示します。
行と列に構造化して情報を表示するコンテンツを作成します。
デフォルト
| 都道府県 | 人口 | 面積 | 人口密度 |
| 東京都 | 14,011,487 | 2,194.05 | 6,386.13 |
| 大阪府 | 8,807,279 | 1,905.34 | 4,622.42 |
| 愛知県 | 7,516,008 | 5,173.15 | 1,452.89 |
| 福岡県 | 5,123,371 | 4,986.86 | 1,027.37 |
| 北海道 | 5,181,776 | 78,421.36 | 66.08 |
デフォルトのまま制作したテーブル（表）です。こちらをベースをほかのスタイルも見てみます。
合わせてhtmlのソースも確認していきます。
html
<figure class="wp-block-table is-style-regular">
<table>
<tbody>
<tr>
<td>都道府県</td>
<td>人口</td>
<td>面積</td>
<td>人口密度</td>
</tr>
<tr>
<td>東京都</td>
<td>14,011,487</td>
<td>2,194.05</td>
<td>6,386.13</td>
</tr>
<tr>
<td>大阪府</td>
<td>8,807,279</td>
<td>1,905.34</td>
<td>4,622.42</td>
</tr>
<tr>
<td>愛知県</td>
<td>7,516,008</td>
<td>5,173.15</td>
<td>1,452.89</td>
</tr>
<tr>
<td>福岡県</td>
<td>5,123,371</td>
<td>4,986.86</td
<td>1,027.37</td>
</tr>
<tr
<td>北海道</td>
<td>5,181,776</td>
<td>78,421.36</td>
<td>66.08</td>
</tr>
</tbody>
</table>
<figcaption>各都市の人口・面積・人口密度</figcaption>
</figure>
ストライプ
| 都道府県 | 人口 | 面積 | 人口密度 |
| 東京都 | 14,011,487 | 2,194.05 | 6,386.13 |
| 大阪府 | 8,807,279 | 1,905.34 | 4,622.42 |
| 愛知県 | 7,516,008 | 5,173.15 | 1,452.89 |
| 福岡県 | 5,123,371 | 4,986.86 | 1,027.37 |
| 北海道 | 5,181,776 | 78,421.36 | 66.08 |
テーブル（表）の背景色が交互になります。
html
<figure class="wp-block-table is-style-stripes">
<table>
<tbody>
<tr>
<td>都道府県</td>
<td>人口</td>
<td>面積</td>
<td>人口密度</td>
</tr>
<tr>
<td>東京都</td>
<td>14,011,487</td>
<td>2,194.05</td>
<td>6,386.13</td>
</tr>
～省略～
</tbody>
</table>
<figcaption>各都市の人口・面積・人口密度</figcaption>
</figure>
<figure class="wp-block-table is-style-stripes">
スクロール（SP）
| 都道府県 | 人口 | 面積 | 人口密度 |
| 東京都 | 14,011,487 | 2,194.05 | 6,386.13 |
| 大阪府 | 8,807,279 | 1,905.34 | 4,622.42 |
| 愛知県 | 7,516,008 | 5,173.15 | 1,452.89 |
| 福岡県 | 5,123,371 | 4,986.86 | 1,027.37 |
| 北海道 | 5,181,776 | 78,421.36 | 66.08 |
スマートフォンでテーブル（表）を見ると横スクロールするようになります。
個人的には一番使用頻度の高いテーブル（表）です。
横に長いテーブル（表）の場合はこちらを推奨します。
html
<figure class="wp-block-table is-style-scroll-box">
<table>
<tbody>
<tr>
<td>都道府県</td>
<td>人口</td>
<td>面積</td>
<td>人口密度</td>
</tr>
<tr>
<td>東京都</td>
<td>14,011,487</td>
<td>2,194.05</td>
<td>6,386.13</td>
</tr>
～省略～
</tbody>
</table>
<figcaption>各都市の人口・面積・人口密度</figcaption>
</figure>
<figure class="wp-block-table is-style-scroll-box">
中央寄せ
| 都道府県 | 人口 | 面積 | 人口密度 |
| 東京都 | 14,011,487 | 2,194.05 | 6,386.13 |
| 大阪府 | 8,807,279 | 1,905.34 | 4,622.42 |
| 愛知県 | 7,516,008 | 5,173.15 | 1,452.89 |
| 福岡県 | 5,123,371 | 4,986.86 | 1,027.37 |
| 北海道 | 5,181,776 | 78,421.36 | 66.08 |
テキストが全て中央寄せになります。
html
<figure class="wp-block-table is-style-st-centertable">
<table>
<tbody>
<tr>
<td>都道府県</td>
<td>人口</td>
<td>面積</td>
<td>人口密度</td>
</tr>
<tr>
<td>東京都</td>
<td>14,011,487</td>
<td>2,194.05</td>
<td>6,386.13</td>
</tr>
～省略～
</tbody>
</table>
<figcaption>各都市の人口・面積・人口密度</figcaption>
</figure>
<figure class="wp-block-table is-style-st-centertable">
ラインのみ
| 都道府県 | 人口 | 面積 | 人口密度 |
| 東京都 | 14,011,487 | 2,194.05 | 6,386.13 |
| 大阪府 | 8,807,279 | 1,905.34 | 4,622.42 |
| 愛知県 | 7,516,008 | 5,173.15 | 1,452.89 |
| 福岡県 | 5,123,371 | 4,986.86 | 1,027.37 |
| 北海道 | 5,181,776 | 78,421.36 | 66.08 |
デフォルトと比べて縦線がなくなりました。
html
<figure class="wp-block-table is-style-st-table-line">
<table>
<tbody>
<tr>
<td>都道府県</td>
<td>人口</td>
<td>面積</td>
<td>人口密度</td>
</tr>
<tr>
<td>東京都</td>
<td>14,011,487</td>
<td>2,194.05</td>
<td>6,386.13</td>
</tr>
～省略～
</tbody>
</table>
<figcaption>各都市の人口・面積・人口密度</figcaption>
</figure>
<figure class="wp-block-table is-style-st-table-line">
ラインのみ2
| 都道府県 | 人口 | 面積 | 人口密度 |
| 東京都 | 14,011,487 | 2,194.05 | 6,386.13 |
| 大阪府 | 8,807,279 | 1,905.34 | 4,622.42 |
| 愛知県 | 7,516,008 | 5,173.15 | 1,452.89 |
| 福岡県 | 5,123,371 | 4,986.86 | 1,027.37 |
| 北海道 | 5,181,776 | 78,421.36 | 66.08 |
「ラインのみ」と「ラインのみ2」は違いが分かりません。
html
<figure class="wp-block-table is-style-st-table-line-2">
<table>
<tbody>
<tr>
<td>都道府県</td>
<td>人口</td>
<td>面積</td>
<td>人口密度</td>
</tr>
～省略～
</tbody>
</table>
<figcaption>各都市の人口・面積・人口密度</figcaption>
</figure>
<figure class="wp-block-table is-style-st-table-line-2">
表の設定
「theadタグ」「tbodyタグ」「tfootタグ」などのタグを設定するために表の設定を利用します。
ヘッダーセクション
表の設定の「ヘッダーセクション」をチェックして、「theadタグ」を追加します。
| ヘッダーラベル | ヘッダーラベル | ヘッダーラベル | ヘッダーラベル |
|---|---|---|---|
| 都道府県 | 人口 | 面積 | 人口密度 |
| 東京都 | 14,011,487 | 2,194.05 | 6,386.13 |
| 大阪府 | 8,807,279 | 1,905.34 | 4,622.42 |
| 愛知県 | 7,516,008 | 5,173.15 | 1,452.89 |
| 福岡県 | 5,123,371 | 4,986.86 | 1,027.37 |
| 北海道 | 5,181,776 | 78,421.36 | 66.08 |
テーブル（表）の上部に「ヘッダーラベル」が追加されました。
なぜかヘッダーセクション部分のボーダーが表示されないのが不思議です。こちらは後ほど修正します。
テーブルはスクロール（SP）を使用しています。
html
<figure class="wp-block-table is-style-scroll-box">
<table>
<thead>
<tr>
<th>ヘッダーラベル</th>
<th>ヘッダーラベル</th>
<th>ヘッダーラベル</th>
<th>ヘッダーラベル</th>
</tr>
</thead>
<tbody>
<tr>
<td>都道府県</td>
<td>人口</td>
<td>面積</td>
<td>人口密度</td>
</tr>
<tr>
<td>東京都</td>
<td>14,011,487</td>
<td>2,194.05</td>
<td>6,386.13</td>
</tr>
～省略～
</tbody>
</table>
<figcaption>各都市の人口・面積・人口密度</figcaption>
</figure>
ソースを確認すると「thead」が追加されたのが分かると思います。
「ヘッダーセクション」に「都道府県」「人口」「面積」「人口密度」をコピー＆ペーストしてテーブル（表）を整えます。
| 都道府県 | 人口 | 面積 | 人口密度 |
|---|---|---|---|
| 東京都 | 14,011,487 | 2,194.05 | 6,386.13 |
| 大阪府 | 8,807,279 | 1,905.34 | 4,622.42 |
| 愛知県 | 7,516,008 | 5,173.15 | 1,452.89 |
| 福岡県 | 5,123,371 | 4,986.86 | 1,027.37 |
| 北海道 | 5,181,776 | 78,421.36 | 66.08 |
html
<figure class="wp-block-table is-style-scroll-box">
<table>
<thead>
<tr>
<th>都道府県</th>
<th>人口</th>
<th>面積</th>
<th>人口密度</th>
</tr>
</thead>
<tbody>
<tr>
<td>東京都</td>
<td>14,011,487</td>
<td>2,194.05</td>
<td>6,386.13</td>
</tr>
～省略～
</tbody>
</table>
<figcaption>各都市の人口・面積・人口密度</figcaption>
</figure>
フッターセクション
続いて「フッターセクション」も追加したいと思います。表の設定の「フッターセクション」をチェックして、「tfootタグ」を追加します。
| 都道府県 | 人口 | 面積 | 人口密度 |
|---|---|---|---|
| 東京都 | 14,011,487 | 2,194.05 | 6,386.13 |
| 大阪府 | 8,807,279 | 1,905.34 | 4,622.42 |
| 愛知県 | 7,516,008 | 5,173.15 | 1,452.89 |
| 福岡県 | 5,123,371 | 4,986.86 | 1,027.37 |
| 北海道 | 5,181,776 | 78,421.36 | 66.08 |
| フッターラベル | フッターラベル | フッターラベル | フッターラベル |
テーブル（表）の上部に「フッターラベル」が追加されました。
html
<figure class="wp-block-table is-style-scroll-box">
<table>
<thead>
<tr>
<th>都道府県</th>
<th>人口</th>
<th>面積</th>
<th>人口密度</th>
</tr>
</thead>
<tbody>
<tr>
<td>東京都</td>
<td>14,011,487</td>
<td>2,194.05</td>
<td>6,386.13</td>
</tr>
～省略～
</tbody>
<tfoot>
<tr>
<td>フッターラベル</td>
<td>フッターラベル</td>
<td>フッターラベル</td>
<td>フッターラベル</td>
</tr>
</tfoot>
</table>
<figcaption>各都市の人口・面積・人口密度</figcaption>
</figure>
せっかくなので項目を追加してみました。
| 都道府県 | 人口 | 面積 | 人口密度 |
|---|---|---|---|
| 東京都 | 14,011,487 | 2,194.05 | 6,386.13 |
| 大阪府 | 8,807,279 | 1,905.34 | 4,622.42 |
| 愛知県 | 7,516,008 | 5,173.15 | 1,452.89 |
| 福岡県 | 5,123,371 | 4,986.86 | 1,027.37 |
| 北海道 | 5,181,776 | 78,421.36 | 66.08 |
| 国内平均 | 2,670,279 | 7,935.56 | 654.59 |
html
<figure class="wp-block-table is-style-scroll-box">
<table>
<thead>
<tr>
<th>都道府県</th>
<th>人口</th>
<th>面積</th>
<th>人口密度</th>
</tr>
</thead>
<tbody>
<tr>
<td>東京都</td>
<td>14,011,487</td>
<td>2,194.05</td>
<td>6,386.13</td>
</tr>
～省略～
</tbody>
<tfoot>
<tr>
<td>国内平均</td>
<td>2,670,279</td>
<td>7,935.56</td>
<td>654.59</td>
</tr>
</tfoot>
</table>
<figcaption>各都市の人口・面積・人口密度</figcaption>
</figure>
見出しを設定
テーブル（表）の見出しを設定していきます。見出しは各項目のタイトルのような部分のことを指します。
今回、制作しているテーブル（表）の見出しは画像の赤い部分になります。
見出しに変更するためには「tdタグ」と「thタグ」に変更する必要があります。ヘッダーセクションは自動的に「thタグ」が設定されていますがそれ以外の部分は手動で変更する必要があります。
まずはビジュアル編集からHTML編集に切り替えます。
オプションを選択します。
オプションの中から「HTMLとして編集」を選択します。
HTMLのソースが表示されます。改行がされずに1行で記載されているので少し見づらいですが、ソースを整えると以下のようになります。
html
<figure class="wp-block-table is-style-scroll-box">
<table>
<thead>
<tr>
<th>都道府県</th>
<th>人口</th>
<th>面積</th>
<th>人口密度</th>
</tr>
</thead>
<tbody>
<tr>
<td>東京都</td>
<td>14,011,487</td>
<td>2,194.05</td>
<td>6,386.13</td>
</tr>
<tr>
<td>大阪府</td>
<td>8,807,279</td>
<td>1,905.34</td>
<td>4,622.42</td>
</tr>
<tr>
<td>愛知県</td>
<td>7,516,008</td>
<td>5,173.15</td>
<td>1,452.89</td>
</tr>
<tr>
<td>福岡県</td>
<td>5,123,371</td>
<td>4,986.86</td
<td>1,027.37</td>
</tr>
<tr
<td>北海道</td>
<td>5,181,776</td>
<td>78,421.36</td>
<td>66.08</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>国内平均</td>
<td>2,670,279</td>
<td>7,935.56</td>
<td>654.59</td>
</tr>
</tfoot>
</table>
<figcaption>各都市の人口・面積・人口密度</figcaption>
</figure>
「tbody」部分と「tfoot」部分の見出し部分を「tdタグ」から「thタグ」に書き換えます。
「<td>」と「</td>」を「<th>」と「</th>」に書き換えます。
| 都道府県 | 人口 | 面積 | 人口密度 |
|---|---|---|---|
| 東京都 | 14,011,487 | 2,194.05 | 6,386.13 |
| 大阪府 | 8,807,279 | 1,905.34 | 4,622.42 |
| 愛知県 | 7,516,008 | 5,173.15 | 1,452.89 |
| 福岡県 | 5,123,371 | 4,986.86 | 1,027.37 |
| 北海道 | 5,181,776 | 78,421.36 | 66.08 |
| 国内平均 | 2,670,279 | 7,935.56 | 654.59 |
書き換えましたが見た目に変化はありません。ですがこれが正しいコーディングになります。
html
<figure class="wp-block-table is-style-scroll-box">
<table>
<thead>
<tr>
<th>都道府県</th>
<th>人口</th>
<th>面積</th>
<th>人口密度</th>
</tr>
</thead>
<tbody>
<tr>
<th>東京都</th>
<td>14,011,487</td>
<td>2,194.05</td>
<td>6,386.13</td>
</tr>
<tr>
<th>大阪府</th>
<td>8,807,279</td>
<td>1,905.34</td>
<td>4,622.42</td>
</tr>
<tr>
<th>愛知県</th>
<td>7,516,008</td>
<td>5,173.15</td>
<td>1,452.89</td>
</tr>
<tr>
<th>福岡県</th>
<td>5,123,371</td>
<td>4,986.86</td
<td>1,027.37</td>
</tr>
<tr
<th>北海道</th>
<td>5,181,776</td>
<td>78,421.36</td>
<td>66.08</td>
</tr>
</tbody>
<tfoot>
<tr>
<th>国内平均</th>
<td>2,670,279</td>
<td>7,935.56</td>
<td>654.59</td>
</tr>
</tfoot>
</table>
<figcaption>各都市の人口・面積・人口密度</figcaption>
</figure>
追加CSSクラス
ここからは見た目をきれいにしていきたいと思います。
現状ではヘッダーセクション部分の枠線が無く、見出し（th）との違いも見た目では分からないので変化をつけたいと思います。
テーブルの高度な設定の中から「追加CSSクラス」にクラスを追加します。
今回は「basic-table」というスタイル名で記載しています。（スタイル名は自由に決めてください。）
html
<figure class="wp-block-table basic-table is-style-scroll-box">
<table>
<thead>
<tr>
<th>都道府県</th>
<th>人口</th>
<th>面積</th>
<th>人口密度</th>
</tr>
</thead>
<tbody>
<tr>
<th>東京都</th>
<td>14,011,487</td>
<td>2,194.05</td>
<td>6,386.13</td>
</tr>
～省略～
</tbody>
<tfoot>
<tr>
<th>国内平均</th>
<td>2,670,279</td>
<td>7,935.56</td>
<td>654.59</td>
</tr>
</tfoot>
</table>
<figcaption>各都市の人口・面積・人口密度</figcaption>
</figure>
CSSを追加するために左側のメインメニューから「外観」「カスタマイズ」を選択します。
追加CSSに以下の内容をコピー＆ペーストします。
css
.basic-table {
border-collapse: collapse;
}
.basic-table thead th,
.basic-table thead td {
position: static;
}
.basic-table th {
background-color: #eee !important;
border: 1px solid lightgray !important;
white-space: nowrap;
}
.basic-table td {
border: 1px solid lightgray !important;
}
追加CSSを登録することでテーブル（表）が以下のようになりました。
| 都道府県 | 人口 | 面積 | 人口密度 |
|---|---|---|---|
| 東京都 | 14,011,487 | 2,194.05 | 6,386.13 |
| 大阪府 | 8,807,279 | 1,905.34 | 4,622.42 |
| 愛知県 | 7,516,008 | 5,173.15 | 1,452.89 |
| 福岡県 | 5,123,371 | 4,986.86 | 1,027.37 |
| 北海道 | 5,181,776 | 78,421.36 | 66.08 |
| 国内平均 | 2,670,279 | 7,935.56 | 654.59 |
枠線の色を変える
枠線を変える場合は「border」の色を変更すると変えることができます。
css
.basic-table th {
background-color: #eee !important;
border: 1px solid lightgray !important;
white-space: nowrap;
}
.basic-table td {
border: 1px solid lightgray !important;
}
色はカラーネームか16進表記で指定することができます。
カラーコード及び16進表記は原色大辞典が参考になります。
背景色を変える
枠線を変える場合は「background-color」の色を変更すると変えることができます。
css
.basic-table th {
background-color: #eee !important;
border: 1px solid lightgray !important;
white-space: nowrap;
}
枠線と同様に色はカラーネームか16進表記で指定することができます。
数字を右寄せにする
数字はテーブル（表）の左寄せより右寄せの方が見やすいのでHTMLにclassを追加して右寄せに変更します。
数字が記載されているコードに「class="has-text-align-right"」を追加します。
| 都道府県 | 人口 | 面積 | 人口密度 |
|---|---|---|---|
| 東京都 | 14,011,487 | 2,194.05 | 6,386.13 |
| 大阪府 | 8,807,279 | 1,905.34 | 4,622.42 |
| 愛知県 | 7,516,008 | 5,173.15 | 1,452.89 |
| 福岡県 | 5,123,371 | 4,986.86 | 1,027.37 |
| 北海道 | 5,181,776 | 78,421.36 | 66.08 |
| 国内平均 | 2,670,279 | 7,935.56 | 654.59 |
html
<figure class="wp-block-table basic-table is-style-scroll-box">
<table>
<thead>
<tr>
<th>都道府県</th>
<th>人口</th>
<th>面積</th>
<th>人口密度</th>
</tr>
</thead>
<tbody>
<tr>
<th>東京都</th>
<td class="has-text-align-right">14,011,487</td>
<td class="has-text-align-right">2,194.05</td>
<td class="has-text-align-right">6,386.13</td>
</tr>
<tr>
<th>大阪府</th>
<td class="has-text-align-right">8,807,279</td>
<td class="has-text-align-right">1,905.34</td>
<td class="has-text-align-right">4,622.42</td>
</tr>
<tr>
<th>愛知県</th>
<td class="has-text-align-right">7,516,008</td>
<td class="has-text-align-right">5,173.15</td>
<td class="has-text-align-right">1,452.89</td>
</tr>
<tr>
<th>福岡県</th>
<td class="has-text-align-right">5,123,371</td>
<td class="has-text-align-right">4,986.86</td>
<td class="has-text-align-right">1,027.37</td>
</tr>
<tr>
<th>北海道</th>
<td class="has-text-align-right">5,181,776</td>
<td class="has-text-align-right">78,421.36</td>
<td class="has-text-align-right">66.08</td>
</tr>
</tbody>
<tfoot>
<tr>
<th>国内平均</th>
<td class="has-text-align-right">2,670,279</td>
<td class="has-text-align-right">7,935.56</td>
<td class="has-text-align-right">654.59</td>
</tr>
</tfoot>
</table>
<figcaption>各都市の人口・面積・人口密度</figcaption>
</figure>
これでテーブル（表）が完成です。これを参考にテーブル（表）を作っていただければ幸いです。
よく読まれている記事
WordPressはブログやホームページを誰でも簡単に管理・運営するために開発されたサイト構築サービスです。 インターネット上にあるWebサイトのおよそ4割はWordPressを利用して作られています ... アフィリエイトに興味を持つ人が増えていますが、実際にどのように始めたらいいのか、どのような仕組みで稼げるようになるのか分からなくないですか？ そこで今回は、アフィリエイトで稼ぐために必要な知識を学べる ... 副業のためのアフィリエイトブログ、自分のコレクションを紹介する趣味ブログなど本気でブログを開設するためにはWordPressは必須です。ブログ以外でもWordPressは企業サイトなどにも数多く利用さ ... 副業のためのアフィリエイトブログ、自分のコレクションを紹介する趣味ブログなど本気でブログを開設するためにはWordPressは必須です。ブログ以外でもWordPressは企業サイトなどにも数多く利用さ ... 長引く不況で給料が上がらない、定収入をどうにかしたい、お小遣いを増やしたいなど副業を始める理由はいろいろとあると思います。 でも実際にどうやってブログで稼ぐのか分からない人が大半です。 今回はブログを ...
【初心者向け】WordPressブログの始め方
【初心者必見】アフィリエイトで稼ぐブログの仕組み
【初心者向け】ロリポップでWordPressを始める方法をご紹介
【初心者向け】エックスサーバーでWordPressを始める方法をご紹介［WordPressクイックスタート編］
【初心者向け】ブログで副業を始める方法
