このショートコードを使用するには「DigiPress Ex – Shortcodes」プラグインが必要です。
サービスや商品などのプランごとに並べた料金表(Pricing Table)を表示できます。
INDEX
表示例
最低限のパラメータを指定した例(3アイテムの場合)
[ptable] [ptableitem title='ベーシック' price='¥980' row1='WordPress 1サイト利用可能' row2='最大25,000アクセス/月' row3='転送量最大 300GB/月' button='お申し込み' buttonurl='#'] [ptableitem title='スタンダード' price='¥1,980' row1='WordPress 3サイト利用可能' row2='最大100,000アクセス/月' row3='転送量最大 600GB/月' button='お申し込み' buttonurl='#'] [ptableitem title='プレミアム' price='¥39,800' row1='WordPressサイト数無制限' row2='最大500,000アクセス/月' row3='転送量無制限' button='お申し込み' buttonurl='#'] [/ptable]
様々なオプションを組み合わせた例
[ptable hoverfx=1] [ptableitem title='<i class="icon-user"></i>ベーシック' titlesize=18 titlecaption='スタータープラン' titlecaptionsize=12 price='¥980' priceper='/ 月' pricesize=40 pricecaption='消費税込み' row1='<i class="icon-wordpress"></i>WordPress 1サイト利用可能' row2='<i class="icon-users"></i>最大25,000アクセス/月' row3='<i class="icon-retweet"></i>転送量最大 300GB/月' row4='<i class="icon-database"></i>最大50GBのローカルストレージ' button='お申し込み' buttonurl='#' buttonsize=18 buttonbdsize=24 buttonext=1 border=1 bdcolor='#82DACA' keycolor='#82DACA'] [ptableitem title='<i class="icon-warmedal"></i>スタンダード' titlesize=18 titlecaption='もっともポピュラーなプラン' titlecaptionsize=12 price='¥1,980' priceper='/ 月' pricesize=40 pricecaption='消費税込み' row1='<i class="icon-wordpress"></i>WordPress 3サイト利用可能' row2='<i class="icon-users"></i>最大100,000アクセス/月' row3='<i class="icon-retweet"></i>転送量最大 600GB/月' row4='<i class="icon-database"></i>最大500GBのローカルストレージ' button='お申し込み' buttonurl='#' buttonsize=18 buttonbdsize=30 buttonext=1 border=1 bdcolor='#49D1FF' keycolor='#49D1FF'] [ptableitem title='<i class="icon-crown"></i>プレミアム' titlesize=18 titlecaption='商用利用に最適なプラン' titlecaptionsize=12 price="¥39,800" priceper="/ 月" pricesize=40 pricecaption='消費税込み' row1='<i class="icon-wordpress"></i>WordPressサイト数無制限' row2='<i class="icon-users"></i>最大500,000アクセス/月' row3='<i class="icon-retweet"></i>転送量無制限' row4='<i class="icon-database"></i>最大3TBのローカルストレージ' button='お申し込み' buttonurl='#' buttonbdsize=24 buttonext=1 keycolor='#FF76A1' border=1 bdcolor='#FF76A1'] [/ptable]
レスポンシブ無効、強調(拡大)表示、ラベルを表示した例
[ptable scrollable=1] [ptableitem title='<i class="icon-user"></i>ベーシック' titlesize=18 titlecaption='スタータープラン' titlecaptionsize=12 price='¥980' priceper='/ 月' pricesize=40 pricecaption='消費税込み' row1='<i class="icon-wordpress"></i>WordPress 1サイト利用可能' row2='<i class="icon-users"></i>最大25,000アクセス/月' row3='<i class="icon-retweet"></i>転送量最大 300GB/月' row4='<i class="icon-database"></i>最大50GBのローカルストレージ' button='お申し込み' buttonurl='#' buttonsize=18 buttonfill=1 keycolor='#82DACA'] [ptableitem title='<i class="icon-warmedal"></i>スタンダード' titlesize=18 titlecaption='もっともポピュラーなプラン' titlecaptionsize=12 price='¥1,980' priceper='/ 月' pricesize=40 pricecaption='消費税込み' row1='<i class="icon-wordpress"></i>WordPress 3サイト利用可能' row2='<i class="icon-users"></i>最大100,000アクセス/月' row3='<i class="icon-retweet"></i>転送量最大 600GB/月' row4='<i class="icon-database"></i>最大500GBのローカルストレージ' button='お申し込み' buttonurl='#' buttonsize=18 buttonbdsize=30 buttonfill=1 label='Popular!' labelbgcolor=#EBD545 labelcolor='#fff' boxshadow=1 main=1 keycolor='#49D1FF'] [ptableitem title='<i class="icon-crown"></i>プレミアム' titlesize=18 titlecaption='商用利用に最適なプラン' titlecaptionsize=12 price="¥39,800" priceper="/ 月" pricesize=40 pricecaption='消費税込み' row1='<i class="icon-wordpress"></i>WordPressサイト数無制限' row2='<i class="icon-users"></i>最大500,000アクセス/月' row3='<i class="icon-retweet"></i>転送量無制限' row4='<i class="icon-database"></i>最大3TBのローカルストレージ' button='お申し込み' buttonurl='#' buttonfill=1 keycolor='#FF76A1'] [/ptable]
ダークカラーを基本とした例
[ptable] [ptableitem title='<i class="icon-user"></i>ベーシック' titlesize=18 titlecaption='スタータープラン' titlecaptionsize=12 price='¥980' priceper='/ 月' pricesize=40 pricecaption='消費税込み' row1='<i class="icon-wordpress"></i>WordPress 1サイト利用可能' row2='<i class="icon-users"></i>最大25,000アクセス/月' row3='<i class="icon-retweet"></i>転送量最大 300GB/月' row4='<i class="icon-database"></i>最大50GBのローカルストレージ' button='お申し込み' buttonurl='#' buttonsize=18 buttonbdsize=24 bgcolor=#393939 fontcolor=#fff keycolor='#82DACA'] [ptableitem title='<i class="icon-warmedal"></i>スタンダード' titlesize=18 titlecaption='もっともポピュラーなプラン' titlecaptionsize=12 price='¥1,980' priceper='/ 月' pricesize=40 pricecaption='消費税込み' row1='<i class="icon-wordpress"></i>WordPress 3サイト利用可能' row2='<i class="icon-users"></i>最大100,000アクセス/月' row3='<i class="icon-retweet"></i>転送量最大 600GB/月' row4='<i class="icon-database"></i>最大500GBのローカルストレージ' button='お申し込み' buttonurl='#' buttonsize=18 buttonbdsize=30 label='Popular!' labelbgcolor=#EBD545 labelcolor='#fff' bgcolor=#393939 fontcolor=#fff border=1 boxshadow=1 bdcolor=#49D1FF main=1 keycolor='#49D1FF'] [ptableitem title='<i class="icon-crown"></i>プレミアム' titlesize=18 titlecaption='商用利用に最適なプラン' titlecaptionsize=12 price="¥39,800" priceper="/ 月" pricesize=40 pricecaption='消費税込み' row1='<i class="icon-wordpress"></i>WordPressサイト数無制限' row2='<i class="icon-users"></i>最大500,000アクセス/月' row3='<i class="icon-retweet"></i>転送量無制限' row4='<i class="icon-database"></i>最大3TBのローカルストレージ' button='お申し込み' buttonurl='#' buttonbdsize=24 bgcolor=#393939 fontcolor=#fff keycolor='#FF76A1'] [/ptable]
指定可能なパラメータ(ptable ※親)
- fontcolor
-
料金表コンテンツ全体に反映するフォントカラーを指定できます。
未指定の場合は、テーマのフォントカラーが反映されます。例 : fontcolor=#666
- fontsize
-
料金表コンテンツ全体(主に自由行)に反映するフォントサイズをピクセル(px)または数値のみで指定します。
未指定の場合は「13px」が適用されます。例 : fontsize=13
- rowbordered
-
料金表の行を奇数、偶数の交互にボーダー背景で表示しない場合は、「0」または「false」を指定します。
未指定の場合は、料金表の行は交互にボーダー背景で表示されます。例 : rowbordered=0
- hoverfx
-
料金表をマウスオーバーした際に、アニメーションで拡大表示する場合に「1」または「true」を指定します。
未指定の場合はマウスオーバー効果はしません。例 : hoverfx=1
- scrollable
-
料金表のレスポンシブ表示を無効にし、表の幅がブラウザの表示幅を超えた場合はオーバーフローし、横へのスクロールを許可する場合に「1」または「true」を指定します。
このオプションが有効になるのは、表示幅が1024ピクセル以下になった場合です。
例 : scrollable=1
- class
-
料金表全体を括るdivに指定するclassがある場合にそのクラス名を指定します。
例 : class=’mypricingtable’
- style
-
料金表全体を括るdivにスタイルシートを直接指定する場合に、そのCSSを指定します。
例 : style=”font-size:13px;”
- plx
-
パララックススクロールコンテンツ対応のDigiPressテーマを使用している場合は、このオプションを指定することで料金表の表示にパララックススクロールを反映させることができます。
例 : plx=’enter bottom delay 0.8s’
指定可能な値はこちらを参照してください。
指定可能なパラメータ(ptableitem ※子)
- title
-
料金表アイテムの1行目に表示されるメインタイトルを指定できます。
未指定の場合は、タイトル行は表示されません。例 : title=’ベーシック’
- titlesize
-
料金表アイテムの1行目に表示されるメインタイトルのフォントサイズをピクセル(px)または数値のみで指定します。
未指定の場合は「18px」が適用されます。例 : titlesize=20
- titlecolor
-
料金表アイテムの1行目に表示されるメインタイトルのフォントカラーをHEX値(#666666 など)、またはRGBA値(rgba(0,0,0,0.2) など)で指定します。
未指定の場合は「#ffffff」が設定されます。例 : titlecolor=#666
- titlebold
-
料金表アイテムの1行目に表示されるメインタイトルを太字で表示する場合は、「1」または「true」を指定します。
例 : titlebold=1
- titlecaption
-
料金表アイテムの1行目に表示されるメインタイトル直下にキャプションを表示したい場合に、その文章を入力します。
未指定の場合は、キャプションは表示されません。例 : titlecaption=’スタータープラン’
- titlecaptionsize
-
料金表アイテムの1行目に表示されるメインタイトル直下に表示されるキャプションのフォントサイズをピクセル(px)または数値のみで指定します。
未指定の場合は「12px」が適用されます。例 : titlecaptionsize=13
- price
-
料金表アイテムの2行目(タイトルがない場合は1行目)に表示されるサービスや商品の対象料金を指定します。
未指定の場合は、料金行は表示されません。例 : price=’¥980′, price=’980円’ など
- pricesize
-
料金表アイテムの2行目に表示される料金のフォントサイズをピクセル(px)または数値のみで指定します。
未指定の場合は「40px」が適用されます。例 : pricesize=42
- pricecolor
-
料金表アイテムの2行目に表示される料金のフォントカラーをHEX値(#666666 など)、またはRGBA値(rgba(0,0,0,0.2) など)で指定します。
未指定の場合は「#ffffff」が設定されます。例 : pricecolor=#666
- pricebold
-
料金表アイテムの2行目に表示される料金を太字で表示する場合は、「1」または「true」を指定します。
例 : pricebold=1
- pricecaption
-
料金表アイテムの2行目に表示される料金直下にキャプションを表示したい場合に、その文章を入力します。
未指定の場合は、キャプションは表示されません。例 : pricecaption=’スタータープラン’
- pricecaptionsize
-
料金表アイテムの2行目に表示される料金直下に表示されるキャプションのフォントサイズをピクセル(px)または数値のみで指定します。
未指定の場合は「12px」が適用されます。例 : pricecaptionsize=13
- priceper
-
料金表アイテムの2行目に表示される料金の右隣りに「月額」などの料金が発生する対象期間がある場合にその単位を指定します。
未指定の場合は、何も表示されません。例 : priceper=’/ 月’
- button
-
料金表アイテムの一番最後の行に表示されるボタンリンクを表示する際に、そのボタンのテキストを指定します。
未指定の場合はボタンは表示されません。例 : button=’お申し込み’
- buttonurl
-
料金表アイテムの一番最後の行に表示されるボタンリンクを表示する際に、そのボタンをクリックして移動する先のURLを指定します。
例 : buttonurl=’http://hogehoge.com/order’
- buttonsize
-
料金表アイテムの一番最後の行に表示されるボタンリンクを表示する際に、そのボタンのフォントサイズをピクセル(px)または数値のみで指定します。
未指定の場合は「18px」が適用されます。例 : buttonsize=20
- buttonbold
-
料金表アイテムの一番最後の行に表示されるボタンリンクを太字で表示する場合は、「1」または「true」を指定します。
例 : buttonbold=1
- buttontextcolor
-
料金表アイテムの一番最後の行に表示されるボタンリンクを表示する際に、そのボタンのフォントカラーをHEX値(#666666 など)、またはRGBA値(rgba(0,0,0,0.2) など)で指定します。
未指定の場合は「#ffffff」が設定されます。例 : buttontextcolor=#666
- buttonbgcolor
-
料金表アイテムの一番最後の行に表示されるボタンリンクを表示する際に、そのボタンの背景カラーをHEX値(#666666 など)、またはRGBA値(rgba(0,0,0,0.2) など)で指定します。
未指定の場合は、キーカラー(keycolor)に指定したカラーコードが設定されます。例 : buttonbgcolor=#ddd
- buttonbdsize
-
料金表アイテムの一番最後の行に表示されるボタンリンクを表示する際に、そのボタンを角丸にする割合をピクセル単位の数値で指定します。
未指定の場合は、「4px」が設定されます。例 : buttonbdsize=24
- buttonfill
-
料金表アイテムの一番最後の行に表示されるボタンリンクを、行全体に埋めるデザインに変更する場合は「1」または「true」を指定します。
このオプションが有効の場合は、ボタンの角丸(buttonbdsize)は反映されません。
- buttonext
-
料金表アイテムの一番最後の行に表示されるボタンリンクをクリックした際に、別ウィンドウで対象URLを開く場合は「1」または「true」を指定します。
未指定の場合は、同じページでリンク先に移動します。例 : buttonext=1
- row1 〜 row10 (自由行)
-
タイトル、料金の行と最後のボタンの行の間に表示できる、任意の料金表の行コンテンツ(自由行)を設置できます。
自由行は、最大10行まで指定可能で、1行目から順番に、row1、row2,row3… と順番に指定してください。ダブルクォーテーション(“)を含むHTMLタグなどを値に指定する場合は、値全体をシングルクォートで括ってください。
例 : row1='<i class=”icon-wordpress”></i>WordPress1サイトまで’
row2=’転送量無制限’ - keycolor
-
料金表のアイテムのキーカラーをHEX値(#82DACA など)で指定します。
未指定の場合は、「#82DACA」が割り当てられます。このパラメータで指定したキーカラーは、タイトル行、料金行、ボタンの背景カラーとして利用されます。
例 : keycolor=#82DACA
- label
-
料金表のアイテムの上部右端に、三角形のラベルを表示させる場合に、そのラベルテキストを指定します。
未指定の場合は、ラベルは表示されません。例 : label=’NEW!’
- labelcolor
-
料金表のアイテムの上部右端のラベルテキストのフォントカラーをHEX値(#666666 など)、またはRGBA値(rgba(0,0,0,0.2) など)で指定します。
未指定の場合は「#ffffff」が設定されます。例 : labelcolor=#666
- labelbgcolor
-
料金表のアイテムの上部右端の三角形ラベルの背景カラーをHEX値(#666666 など)、またはRGBA値(rgba(0,0,0,0.2) など)で指定します。
未指定の場合は、キーカラーをベースに暗めの背景カラーが設定されます。例 : labelbgcolor=#82DACA
- boxshadow
-
料金表のアイテムにボックスシャドウを反映させる場合に、「1」または「true」を指定します。
例 : boxshadow=1
- border
-
料金表アイテムにボーダーを表示する場合に、「1」または「true」を指定します。
未指定の場合は、料金表アイテムにはボーダーは表示されません。例 : border=1
- bdcolor
-
料金表アイテムにボーダーを表示する際、そのボーダーカラーをHEX値(#666666 など)、またはRGBA値(rgba(0,0,0,0.2) など)で指定します。
例 : bdcolor=#ccc, bdcolor=’rgba(0,0,0,0.12)’ など。
- fontcolor
-
料金表アイテム全体として反映するフォントカラーをHEX値(#666666 など)、またはRGBA値(rgba(0,0,0,0.2) など)で指定します。
未指定の場合は、料金表を表示する箇所のテーマのフォントカラーに依存します。例 : fontcolor=#666
- bgcolor
-
料金表アイテム全体として反映する背景カラーをHEX値(#666666 など)、またはRGBA値(rgba(0,0,0,0.2) など)で指定します。
未指定の場合は、料金表を表示する箇所のテーマの背景カラーに依存します。例 : bgcolor=#fff
- main
-
料金表アイテムのうち、他よりも目立たせたいアイテムなどについて、強調(5%拡大)表示する場合に「1」または「true」を指定します。
例 : main=1
- class
-
料金表アイテムに指定するclassがある場合にそのクラス名を指定します。
例 : class=”ft13px bg-blue”
- style
-
料金表アイテムに指定する任意のスタイルを直接指定できます。
例 : style=”border:1px solid #ccc;”