拡張パーツ ＞ 価格表
商品比較や販売用のページを作りたいときに活用できるパーツです。
プランごとに価格や特長の一覧と、移動してほしいページへの誘導ボタンを設定し、それらを比較表示できるようになっています。
使用例
パフパーフ
- 生分解プラスチック
- ピラニア10分間負荷試験済
- 耐熱70度
- ３年保証
ジェラロック
- 強化セルロース
- ホオジロザメ耐性試験合格
- 耐熱480度
- ３年保証
グラッコロン
- 透明アルミニウム
- 成層圏落下試験合格
- 耐熱8000度
- 15年保証
内容個別編集
パーツを配置して最初に設定が開いた状態で「価格プラン1」のみが項目として表示されています。「価格プラン追加」ボタンを押すことで、「価格プラン２」「価格プラン３」と設定が追加されて現れますので、必要なだけ価格表に追加表示できます。
設定が終わった価格プランは、右にあるファイルマークを押して複製することができます。さらに複数の価格プランがある場合に現れる十字マークをドラッグアンドドロップすれば、順序の入れ替えもできます。不要なものは「X」マークをクリックすれば削除されます。
価格プラン1〜
右側の「価格プラン編集」クリックすることで各価格プランの内容を設定します。
各価格プランごとに「価格プラン編集」内で個別に記入を行っていきます。
それぞれの価格やタイトルの内容と大きさ。特長などの情報追加。背景色といった調整を進めていきます。
一般設定
タイトル
その価格プランに対してのタイトルを記入します。商品名やコース名などが一般的です。
タイトルの文字サイズ
タイトル部分の文字サイズをピクセル単位で設定します。
価格設定
価格
実際の価格を入力する欄です。単位は自動で付加されません。¥や円、あるいは（税込）などをつけたい場合は、それも含めて記載してください。
数量・期間
上の価格が、どういった条件に基づくものなのかを記載する欄です。たとえば価格が1000円のとき、それが1個なのか10個入りなのかといった必要情報を記載する必要があります。１か月、１年間といった期間の場合も同じです。
価格表示の大きさ
価格部分の文字サイズをピクセル単位で指定します。タイトルより大きくすると、価格勝負のイメージが強くなります。
特長やメリット
この価格プランでのオススメ点や他と比較できる特長を一つずつ記入していきます。
あまり多いと要点が伝わらなくなるので、通常は３〜６程度にとどめるようにしましょう。
また、最終的な価格表になった際に価格プランどうしを比較できるように、記載の順番を考慮してください。
最初に設定が開いた状態では記入欄は１つだけ表示されています。「追加」ボタンを押すことで記入欄が追加されて現れますので、必要なだけ特長やメリットを表示できます。
記入済みの欄は、右にあるファイルマークを押して複製することができます。さらに複数の特長がある場合に現れる十字マークをドラッグアンドドロップすれば、順序の入れ替えができます。不要なものは「X」マークをクリックすれば削除されます。
ボタン（価格プラン個別）
ボタン上の文字
ボタン上に表示する文字内容を入力します。
URLの設定
ボタンを押した際のリンク先URLアドレスを入力します。
自己サイト内のページであれば、「選択」を押して現れた入力欄に、リンクを張りたい記事やページのタイトルを一部入力します（３文字以上必要）。
候補が一覧で表示されますので、その中から目的のものを選択すれば、自動でリンクが張られます。
リンク先の開き方
ボタンを押した際にリンク先ページを同じウインドウで開くか別のウインドウで開くかを選択します。
リンク先を検索エンジンに知らせない
検索エンジンのページ情報収集ロボットに対し、リンクの先をたどってほしくないという意思表示（nofollow指示）します。ただし、収集ロボットが必ず言うことを聞くとは限りません。主にSEO対策として使用します。
通常はNoを選択して知らせておいて問題ありませんが、有料サイト、ログインが必要なページへのリンクの場合はYesにしてください。
> GoogleのnoFollowに対する考え方
ボタン内アイコン
ボタン上にアイコンを加えたい場合に、リストから選択できます。
ボタン内アイコンの位置
文字内容に対してのアイコン表示位置を選択します。
アイコン表示状態
- 常に表示→ボタン上にアイコンをずっと表示します。
- マウスオーバー時にフェードイン→マウスポインターを重ねるとアイコンが表示されます。
ボタンの色
背景色
ボタン自体の色を指定します。指定しなければ、ホームページの全体設定に準じた色になります。
また、ここで色を設定することで、下に「ボタンのスタイル」の設定欄が出現します。
マウスオーバー時の背景色
マウスポインターを重ねた際にボタンの色を変化させる場合に設定します。
文字色
文字の色を設定します。
マウスオーバー時の文字色
マウスポインターを重ねた際に文字色を変化させる場合に設定します。
ボタンのスタイル（上で背景色を指定すると表示）
スタイル
以上の中からボタンの形状を選択できます。
フラット
簡易グラデーション
エッジ線
表示入れ替わり効果
ボタンにマウスポインターを重ねた際の変化のさせ方を設定します。
- 無効 → 段階なく切り替わります
- 有効 → 切り替わりに視覚効果が加わります。
ボタンの構造設定
表示幅の設定
ボタンの表示幅を選択します。
- 自動設定 → 文字数に合わせたサイズで表示されます。
- 全幅表示 → このボタンが配置されている価格プラン枠の幅に合わせて表示されます。
表示位置合わせ
このボタンが配置されている価格プラン枠内での配置を設定します。
文字サイズ
ボタン上の文字サイズを調整します。
余白設定
文字の周りにどのぐらいの余白をつくるかを調整します。
角丸
ボタンの角の形状を調整します。（0にすると角は直角になります）
スタイル（価格プラン個別）
スタイル
この価格プラン内のみの色設定を行います。
エッジ線の色
取り囲む枠線の色を設定します。
背景色
このプラン内の背景色を設定します。文字色の設定はできませんので、読みやすさを考慮した薄い色にとどめてください。
強調部分の背景色
価格表全体のスタイル設定で指定した強調部分の背景色を設定します。
強調部分の背景色
価格表全体のスタイル設定で指定した強調部分の文字色を設定します。
上部との間隔
この価格プラン部分を下にずらす目的で上部との間隔をピクセル単位で設定できます。オススメの価格プラン以外を少し下にずらすことで、オススメを目立つように表示するといった使い方ができます。
スタイル（価格表全体）
ここでの設定は価格表内の価格プランすべてに反映されます。
強調部分
価格表の中でアクセントとして色を変えて強調したい部分を選択します。
エッジ線のデザイン
価格表の角を丸めにするか直角にするかを選択できます。
エッジ線の太さ
表の縁取り枠の幅を選択します。
余白設定
複数の価格プランが並んだ際の間隔を選択します。
高さを整える
複数の価格プランが並んだ場合、それぞれの内容により表の高さがバラバラになってしまうのを調整します。