価格表を作ってみよう！（基本編その2）

……と，終わらせてしまうと，「⁠あまりの説明の端折りっぷり」に怒涛のブーイングが巻き起こりそうな気がしないでもないですので，少々補足をさせていただきます……

まず，表の中身の項目については，雛形（デモデータ）の複製を使っていますので，「⁠デモデータがしっかりしていたんだろう，きっとそうに違いない⁠」⁠，ということでOKですね。

しかし，その後「固定ページで何かする」というところでワープ航路に乗ってしまいました。あの辺りを細かく見てみましょう。

あ，そう言えば。今回，固定ページでは，「⁠Visual Composer」を使いませんでしたね。標準機能のエディタを使っています。しかも，テキストエディタを。

まずコレは何故なんでしょう？

実は，今回の「Go Pricing」は，前回の「Slider Revolution」のように，これ専用のエレメントが用意されているわけではありません（この辺りの詳しい説明は，前回をどうぞ！⁠）⁠。

ですので，「⁠Go Pricing」で作った表を固定ページや投稿記事に貼り付ける場合には，「⁠エレメント」ではなく，「ショートコード」というものを使います。

それが，途中に出てきたこのコードです。

コード：[go_pricing id="表ID"]

ショートコードとは，様々な「機能」を呼び出すための専用コードです。

大括弧（⁠［⁠ ⁠］⁠）で括られているのが特徴で，こうやって書かれているコードは，Webサイト上では，文字としては表示されず，代わりに指定した機能が呼び出されるようになっています。

実は，今回みなさんが書いたショートコードは，「⁠idが“⁠表ID⁠”になっている，Go Pricingの表を表示してね⁠」⁠，というコードだったのです。

ショートコードには使用上の注意がいくつかありましてね。

たとえば，ビジュアルエディタでコードを書いてしまうと，何故かエディタがコードを「普通の文字」と認識してしまい，前後に「装飾用のタグ」を自動でくっつけてしまう，という問題が起こったりします。

今回は，そのためにテキストエディタに変更した，というわけなのでした。

ちなみに，「⁠Visual Composer」の中でショートコードを使う場合は，「Text Block」のエレメントを設置して，その中に書けば実行されます。

ですので，「⁠Visual Composer」ではショートコードを使えない，というわけではなかったのですが，今回の場合は「表を設置するだけ」でしたので，エレメントを設置する手間を減らすために，標準エディタを使いました。

……おっと！だんだんムズカシそうな話になってきましたね。

でもご安心ください。詳しいショートコードの話は何回か後の連載でお話ししますので，今はムズカしそうな部分はスルーで大丈夫です。

「このコードが，表を呼び出したのね」とだけ覚えておきましょう。

それでは，「⁠表の作成自体」は問題なくできましたので，次は作成する「表の中身」をイジってみましょう！

価格表を作ってみよう！（応用編）

ここからは応用編です。

雛形をそのまま使った表の作成はできましたので，今度は雛形をカスタマイズして，オリジナルの表を作ってみます。

STEP1は基本編と同じですので，まずはそこまで準備してくださいね。

●STEP2-2：表の詳細項目を編集する

「⁠Go Pricing」の表は，列ごとに大きく分けて4つのブロックでできています。

・General options

列の「見た目や動き全般」を設定するブロックです。

ここでは，「⁠全体のスタイル⁠」⁠，「⁠影の形⁠」⁠，ヘッダー行に「リボン」を付けるかどうか，マウスを乗せた時に「大きく」するかどうか，などを設定します。

・Header options

列の「ヘッダー（見出し行⁠）⁠」を設定するブロックです。

ここでは，「⁠タイトル」や「価格」に加えて，HTML形式によって「画像」なども柔軟に設定できるようになっています（注：「General options」で選んだ「スタイル」によっては，チョットだけ設定項目が違ってきます⁠）⁠。

・Body options

列に対する，各行の項目である，「⁠セル」を設定するブロックです。

ここでは，「⁠セルの中身」や「フキダシ⁠」⁠，「⁠セル内の文字揃え」などを設定します。あまり長々と項目に文字を書きたくない場合，補足に関しては「フキダシ」を利用する，なんてことができるようになっています。

それから，「⁠行の追加（複製）や削除」もここで行います。

あ，そうそう。この「行の追加（複製）や削除」には，間違いやすいポイントがひとつありまして。

画面上，ひとつひとつのセルの下に「Clone row」ボタンや「Delete row」ボタンがありますので，なんとな～く「そのセルのみ」を複製したり削除したりできる気になってしまうことが多々あります。

ですが，このボタンで複製や削除を行うと，「⁠行」としてすべての列に適用されます。

セルをひとつ消すつもりで「削除」を押したら，行まるごと消えていて大変なことになっていた，なんてことがありますので，特に「削除」する場合は気をつけてくださいね。

・Button options

列の最後に付いている「ボタン」を設定するブロックです。

「⁠ボタンのサイズ」や「ボタンのタイプ⁠」⁠，「⁠ボタンに表示する文字」や「クリックした時に移動するページ」などの設定を行います。

「⁠ボタンに表示する文字」を書かないと，ボタンが非表示になります。「⁠見出し列」などでボタンが必要ない場合は，文字を消しておきましょう。

●STEP3-2：表の列を増やす

次に，表の列を増やしてみましょう。

列を増やす際のポイントも，表の時と同じように，「⁠＋」ボタンを押して列を「新規作成」するのではなく，どこかの列を「Clone（複製⁠）⁠」することです。

「⁠Go Pricing」の世界の中では，何かと新規作成するより複製するほうがグー，ということですね。表ってタテヨコの体裁を整えて作るものですしね。あらかじめ体裁が出来ているものを複製したほうがいいのです。

●STEP4-2：表をWebサイトに設置して，Webサイトで見てみよう！

ではでは，固定ページに貼り付けて公開してみましょう！基本編のSTEP3でやりましたね，このコードです。

コード：[go_pricing id="表ID"]

ペタッと貼り付けて，今回用の表IDを記入して，公開，と。

さてさて。どうでしょう？

基本編，応用編とも，上手に表が作れましたか？

事前に「表を作るのってスゴい大変なんですよ！」って，耳タコで言われていなかったら，「⁠表なんてカンタンなんじゃね？」と思ってしまうくらいの，楽チンな作業でしたね。

今回お話しした「Go Pricing」は，その名の通り「価格表」を作るためのプラグインですので，一応「価格表として最適な仕様制限」がいくつかあります。

ですがもちろん，発想を柔軟にしていくことで，価格表じゃない「様々な表」を作ることも可能です。

さーて，ここからは腕の見せどころってやつですね。あれこれとアイデアを出して，ステキな表をたくさん作って，ユーザーさんが思わず見入ってしまうような，スマートなWebサイトにしていきましょう！

目指せ！表マスター！

まとめ

いかがでしたか？

今回は進化した価格表プラグイン，「⁠Go Pricing（正式名称Go - Responsive Pricing & Compare Tables for WP⁠）⁠」のお話でした。

いやはや，「⁠Visual Composer」や「Slider Revolution」に負けず劣らず，今回のプラグインも簡単便利，なおかつ美麗なシロモノでしたね～。

この水準が当たり前，となると，確かに「昔ながらのWebサイト」と「イマドキのWebサイト」の間の溝は想像以上に深いものがあるのがわかります。

ユーザーさんは正直な生き物ですからね。モッサリした価格表よりも，スマートな価格表のほうが，「好ましい印象」を受けてしまうことだって多々あるわけです。

「⁠でも，スマートなものを作るには，特別な修行を積んだデザイナーさんが必要なんでしょう？（そして，そういう人はお高いんでしょう？⁠）⁠」⁠

……なんて，一昔前ならきっと敬遠してしまう人もいたかと思います。

ノンノン。今回見たように，「⁠Go Pricing」なら，誰にでもスマートな価格表があっという間にできます。もうそういう時代なんですね。

さあディスプレイの前の奥さん！……いや，社長さん！イマドキのWebサイトに切り替えるなら今ですよ！

なんと今なら送料無料！（ダウンロード販売だから⁠）⁠，今すぐお電話（回線を使って購入ページまでアクセス）をどうぞ！

ほらほら！ワタシに騙されたと思って，ね。レッツトライ！

……おっと。

と，いうところで終了の時間です。

ではでは，今回はここまで！

次回をお楽しみに～。