WordPressテーマ「STREETIST」
で表（テーブル）を作る方法を紹介します。中でもSTREETISTが提供している横スクロールできる表を作る方法について順を追って説明します。
すぐに作成できるようにテンプレートも用意していますので、ぜひ参考にしてください！
こんな僕は…
僕はミニマリストに関する記事を発信する一方で、ブログテーマSTREETISTについての記事も書いています！今回の記事以外にもSTREETISTについて役に立つ記事を書いていますので、ぜひ下の記事も合わせてご覧ください。
STREETISTの使い方についてまとめ記事はこちら！
STREETISTの表/テーブルの特徴
ワードプレスにもともと用意されているテーブルとは違い、STREETISTのテーブルは横スクロールできるようになっています。
ブラウザの横幅を狭くして、下の表で試してみてください。
ワードプレス標準の表
| サイズ | Sサイズ | Mサイズ | Lサイズ |
| 身丈 | 74 | 75 | 76 |
| 肩巾 | 45 | 46 | 47 |
| 袖丈 | 56 | 57 | 58 |
| アームホール | 22 | 23 | 24 |
| 袖巾 | 20 | 21 | 22 |
STREETISTの横スクロールの表
| サイズ | Sサイズ | Mサイズ | Lサイズ |
|---|---|---|---|
| 身丈 | 74 | 75 | 76 |
| 肩巾 | 45 | 46 | 47 |
| 袖丈 | 56 | 57 | 58 |
| アームホール | 22 | 23 | 24 |
| 袖巾 | 20 | 21 | 22 |
見ての通り、文字が不自然な箇所で改行されることなく、表をきれいに見せることができます。
このように記事を読んでくださるユーザに優しいサイト作りをするためにもSTREETIST特有のスクロールできるテーブルの使い方はマスターしておきましょう。
【見本】STREETISTの表/テーブル
今回は以下のような３つの表を作成することにします。
１．シンプルなテーブル
| A | B | C | D | E |
|---|---|---|---|---|
| 74点 | 75点 | 76点 | 77点 | 78点 |
| 80点 | 70点 | 90点 | 60点 | 80点 |
| 80点 | 70点 | 90点 | 60点 | 80点 |
２．縦と横に色がついたテーブル
| サイズ | Sサイズ | Mサイズ | Lサイズ | XLサイズ |
|---|---|---|---|---|
| 身丈 | 74 | 75 | 76 | 78 |
| 肩巾 | 45 | 46 | 47 | 50 |
| 袖丈 | 56 | 57 | 58 | 60 |
| アームホール | 22 | 23 | 24 | 26 |
| 袖巾 | 20 | 21 | 22 | 24 |
３，一つのマスに複数の文字が含むテーブル
| バナナ | リンゴ | ブドウ | メロン | |
|---|---|---|---|---|
| 特徴 | 甘い 黄色い 長い 熟したらもっとおいしい |
甘い ジューシー 赤い 固い |
ジューシー 紫色 緑色もある たくさん食べられる |
甘い 一人では食べきれない 外は緑 中身がオレンジのモノもある |
【テンプレート】表/テーブルを作成するコード
挿入したテーブルのタイプが決まったら、そのテーブルを構成するテンプレートコードをコピーしておきましょう。
テンプレートコードは以下に示す通りです。
１．シンプルなテーブル
[table width="800"]
<table>
<tbody>
<tr>
<th>A</th>
<th>B</th>
<th>C</th>
<th>D</th>
<th>E</th>
</tr>
<tr>
<td>74点</td>
<td>75点</td>
<td>76点</td>
<td>77点</td>
<td>78点</td>
</tr>
<tr>
<td>80点</td>
<td>70点</td>
<td>90点</td>
<td>60点</td>
<td>80点</td>
</tr>
<tr>
<td>80点</td>
<td>70点</td>
<td>90点</td>
<td>60点</td>
<td>80点</td>
</tr>
</tbody>
</table>
[/table]
２．縦と横に色がついたテーブル
[table width="800"]
<table>
<tbody>
<tr>
<th>サイズ</th>
<th>Sサイズ</th>
<th>Mサイズ</th>
<th>Lサイズ</th>
<th>XLサイズ</th>
</tr>
<tr>
<th>身丈</th>
<td>74</td>
<td>75</td>
<td>76</td>
<td>78</td>
</tr>
<tr>
<th>肩巾</th>
<td>45</td>
<td>46</td>
<td>47</td>
<td>50</td>
</tr>
<tr>
<th>袖丈</th>
<td>56</td>
<td>57</td>
<td>58</td>
<td>60</td>
</tr>
<tr>
<th>アームホール</th>
<td>22</td>
<td>23</td>
<td>24</td>
<td>26</td>
</tr>
<tr>
<th>袖巾</th>
<td>20</td>
<td>21</td>
<td>22</td>
<td>24</td>
</tr>
</tbody>
</table>
[/table]
３，一つのマスに複数の文字が含むテーブル
[table width="800"]
<table>
<tbody>
<tr>
<th></th>
<th>バナナ</th>
<th>リンゴ</th>
<th>ブドウ</th>
<th>メロン</th>
</tr>
<tr>
<th>特徴</th>
<td>甘い
黄色い
長い
熟したらもっとおいしい</td>
<td>甘い
ジューシー
赤い
固い</td>
<td>ジューシー
紫色
緑色もある
たくさん食べられる</td>
<td>甘い
一人では食べきれない
外は緑
中身がオレンジのモノもある</td>
</tr>
</tbody>
</table>
[/table]
【手順】テーブルを作成するときの手順
実際に作成したいテーブルが見つかり、テンプレートも確認できたので、テーブルを挿入手順を確認していきましょう。すべてのテーブルで共通する作成手順については以下の通りです。
- STEP
挿入したいテーブルのコードを編集する
- STEP
記事の編集画面で「コードエディタ」を開く
- STEP
編集したコードを貼り付ける
以上が、テーブルを作成するうえで共通する手順になります。
一つ一つ確認していきます。
挿入したいテーブルのコードを編集する
まずは用意したテーブルのテンプレートコードをもとに項目の内容を変更しましょう。
＜＞で囲まれたタグの内容は変更せず、＜＞と＜＞の間の内容を変更するというところに注意して編集してください。マスの数が足りないときには同じ内容をコピーしてマスを追加しましょう。
記事の編集画面で「コードエディタ」を開く
記事を書くときにclassicエディタを使っている人もビジュアルエディタを使用している人にも共通で「コードエディタ」が用意されていますので、クリックして開きます。
記事を構成するコードがずらーっと並んでいる画面です。
編集したコードを貼り付ける
記事の中に挿入したい位置が見つかったら、先ほど編集しておいたテーブルのコードを貼り付けるだけです。これでテーブルの作成が完了します。
STREETISTの表/テーブルの注意点
注意！
テーブルを貼り付けたあとに必ず、PCとスマホの画面両方の表示を確認してください。
※パソコンのような大きな画面では綺麗に表示されるテーブルも、スマホの画面ではうまく表示できないということが稀にあります。
対処法：幅のサイズを変更する
テンプレートコードの最初の行に注目すると 【table width=”800″】 というコードがあります。
こちらは表/テーブルの幅を指定するコードです。こちらの「800」という数字を細かく調整しながら、あなたの記事にピッタリな幅の表を設定してください。
皆さんのサイトの幅や表に記載する内容によってそれぞれですので、数字の指定ができません。あくまでも例ですので、ご自身で地道に調整してみてください。
まとめ
今回は「【初心者のための】STREETISTで表を作成する！テンプレート付き」というタイトルでSTREETISTを適用してからまだ操作に慣れていない方向けてに表/テーブルの挿入方法と挿入するテンプレートコードを紹介しました。
STREETIST特有の横にスクロールする表を活用して、よりユーザに寄り添ったサイト作成を実現しましょう。
他にも…
僕はミニマリストに関する記事を発信する一方で、ブログテーマSTREETISTについての記事も書いています。
今回の記事以外にもSTREETISTについて役に立つ記事を書いていますので、ぜひこちらもご覧ください。
STREETISTを使っている人は確認しておきたい
STREETISTについて知らないことはまだまだたくさん！
参考記事①
アドセンスに合格した後に見ておきたい！
参考記事②
ショートコードについて全部知ってる？
参考記事③
タイムラインを使いこなすとレイアウトがきれいに！
