ゲームやアプリの攻略サイトには必ずと言っていいほどある、キャラ図鑑や最強ランキング形式の「表」。
このブログでいう下の記事で使っているような表ですね。
この類いのゲーム（アプリ）の攻略サイト風の表の作り方をできるかぎり詳しく解説していきます。
WordPressさえ使える環境にあれば、けっこう簡単で割とすぐにできるので、興味のある方はぜひ試してみてください！
では早速本題に。
プラグイン「TablePress」を準備
このブログのアプリ系の記事で使っている表は、「TablePress」というプラグインで作っています。
プラグインの「新規追加」を選択し、検索ボックスに「TablePress」と入力すると一番上に出てくるやつですね。（画像でいうと左のやつです）
まずはコチラをインストール、有効化してください。
この段階で設定などは特に必要ないので、さっそく使い方に移っています。
「TablePress」の使い方
下準備
インストール・有効化が済むと、左のバーに表の形をした「TablePress」のアイコンが増えているかと思いますので、そちらから「新しいテーブルを作成」へと進みましょう。
- 「テーブルの名前」という部分は後で変更可能なので、とりあえず自分が分かりやすい名前で問題ありません。
- 説明も後で変更可能なので、とりあえず後回しでも大丈夫です。
- 行数・列数は決まっているのならそれぞれ入力。決まっていなくてもあとで追加・削除は可能なので、大体で入れておいてもまったく問題ないです。
上記3項目の入力が終わったら、下にある「テーブルを追加」を押しましょう。
設定
表にデータを入れていく前にまずは骨組み部分を作っておく必要があるので、「テーブルの内容」の部分はひとまず飛ばして、少し下にスクロールしてください。
すると、「テーブルのオプション」「Data Tables Java Scriptライブラリの機能」という項目が出てくるので、そちらのチェックボックスをお好きなように操作していきましょう。
各項目しっかりと説明書きもありますし、何ならとりあえずすべてデフォルトでも特に問題はないのですが、重要な箇所だけはどこの部分を指しているのか少しだけ補足しておきます。
テーブルの見出し行
下の画像でいうと、水色の部分のことを指しています。
デフォルトはチェックが入っている状態なので、不要であればチェックを外してください。
テーブル名を表示
【下準備】の部分で入力した表の名前を表示するか否かという項目です。
チェックを入れると上画像のようにh2タグで表の直上、あるいは直下に表示される仕組みです。
テーブルの説明の表示
【下準備】の部分で入力した説明を表示するか否かという項目です。
テーブル名と同じく、チェックを入れると説明が直上、あるいは直下に表示されるので、必要に応じて操作して下さい。
「Data Tables Java Script」の補足
この部分を簡単に言うと、作成した表を観覧してくれる方が自分の見やすいように操作できるかどうかの設定です。
不要であれば、一番上の「Data Tablesを使用」の欄でチェックを外すとすべて無効になるのですが、今回は私の作っている表を元に解説しているので、重要な部分だけ解説しておきます。
不要な方は飛ばしてください。
並べ替え
ここにチェックを入れると、表の見出し（青色部分）の各項目横に上下の矢印が表示され、表を見ている方が昇順・降順の並べ替えを行えるようになります。
例えば上の画像はデフォルトの状態ですが、一番右端の「魔力」という部分を2度押すと、下のように魔力値が高い順に並び替わるような仕組みになっています。
検索/フィルター
チェックを入れておくと、表の直上に検索ボックスが表示されます。
ここに表の中に存在するワードを入力することで「見たいキャラだけを表示」「見たいタイプだけを抽出」などの操作が可能です。
試しに、上の画像には表示されていないキャラ名「ベル」と入れてみましょう。
すると、こんな感じに「ベル」というワードを含む行だけが抽出されます。
ページ送り
これは一度に表示される行数の指定ですね。
チェックを入れておくと、表の左上に何行表示するかのボックスが現れ、見ている方が見やすいように選択できるようになっています。（デフォルトは10行ですが初期数値の変更も可能）
行数が多すぎると見にくくなるので、作りたい表が膨大な行数になるのであればチェックを入れておくのがオススメです。
ちなみに私の場合は、各キャラのステイタスを一覧表示している表なので、現時点で90行近い状態です。それを全行表示するとかなり見づらくなるので、ここのチェックは入れていて、表の上に説明を書いています。
表にデータを入力
設定が終わったら、あとは「テーブルの内容」の部分にデータなり画像なりを入力していくだけなのですが、ここは作りたい表の形式によって入力内容が大きく変わってきます。
以下では、私の作っている表はどんな感じで入力しているかをサンプルとして紹介していますが、ここはご自身の作りたい表に合わせて変更を加えていってください。
サンプル
先程から再三同じ画像ですみません。
上のような形式の表にしたい場合、下のように「テーブルの内容」の箇所を1行ずつ埋めていきます。
画像挿入時の注意
「テーブルの操作」から画像挿入を行うと、Wordpressのメディアライブラリが開いてそこから画像を選択する仕組みになっていて、画像を選ぶと表の中には以下の形式で入力されます。
ただし、ここで注意点がひとつ！
メディアライブラリから呼び出した画像は、ライブラリの右下にある「添付ファイルの表示設定」の設定内容に依存するので、挿入前に「配置」「リンク先」は必要に応じて設定しておく必要があります。
また、「サイズ」に関しても同じく設定が必要なのですが、メディアライブラリで設定できる最小サイズが【サムネイル-150×150】までになっていますので、それ以外のサイズにしたい場合は”ここの数値を変更”の部分の数値変更が必要です。
参考までにですが、この記事で紹介している私の表では、ここの数値を両方とも50にしています。
作った表を記事に表示する方法
表が完成したら「変更を保存」を押して保存し、あとは「テーブル情報」の欄にあるショートコードをコピーして表示させたい記事に貼り付けるだけです。
表を編集したいときは？
TablePressから「すべてのテーブル」を選択し、変更を加えたいテーブルの編集を選ぶと編集が可能です。
行・列の追加や表の形式自体に編集を加えてもショートコードは変わらないので、表を表示させている記事側を編集する必要はありません。
あとがき
長くなりましたが、プラグイン「TablePress」を使ったゲーム（アプリ）攻略サイト風の表の作りかた解説記事でした。
説明は長くなってしまいましたが、実際に作ってみると案外すぐにできますし、あとから行や列を増やすのも簡単で非常に便利なプラグインです。
私自身、この形式の表を作るにあたってかなり色々と試してみたのですが、おそらくこれが一番簡単な方法なので、作ってみたい方はぜひトライしてみてください！
では、今回はこの辺で！
