DigiPress

Highly Flexible WordPress Theme

メニュー

promobox / promo : 商品やサービス等の機能、特徴一覧をアイコンと概要付きで並べて表示

promobox / promo : 商品やサービス等の機能、特徴一覧をアイコンと概要付きで並べて表示

このショートコードを使用するには「Shortcodes for DigiPress」または「DigiPress Ex – Shortcodes」プラグインが必要です。

商品、サービスなどのPR用にアイコンまたは画像とテキストを組み合わせて訪問者に存分にアピールできるプロモーションボックスを表示できます。
2〜4カラムの範囲に対応しています。

シンプルな2カラム表示例

Icon Coffee
プロモーション用の説明文です。HTMLタグやショートコードも利用できます。アイコンか任意の画像を表示できます。
プロモーション用の説明文です。HTMLタグやショートコードも利用できます。アイコンの大きさを変えれます。

このショートコード

[promobox]

[promo
title="Icon Coffee"
icon="icon-coffee"]
プロモーション用の説明文です。HTMLタグやショートコードも利用できます。アイコンか任意の画像を表示できます。
[/promo]

[promo
title="Icon Bag"
titlecolor="#888"
icon="icon-bag"
iconcolor="#726654"
url="#"]
プロモーション用の説明文です。HTMLタグやショートコードも利用できます。アイコンの大きさを変えれます。
[/promo]

[/promobox]

丸型、色付き、アイコンやフォントサイズを変更した例

プロモーション用の説明文です。HTMLタグやショートコードも利用できます。アイコンか任意の画像を表示できます。
Icon Sale
プロモーション用の説明文です。HTMLタグやショートコードも利用できます。アイコンの大きさを変えれます。

このショートコード

[promobox]
[promo
 title="Icon Cupcake"
 titlecolor="#726654"
 titlehovercolor="#E0B07F"
 icon="icon-cupcake"
 iconstyle="circle"
 iconcolor="#DDA654"
 iconhovercolor="#F9C38C"
 iconsize=60
 url="#"]
プロモーション用の説明文です。HTMLタグやショートコードも利用できます。アイコンか任意の画像を表示できます。
[/promo]

[promo
 title="Icon Sale"
 titlesize=28
 icon="icon-sale"
 iconstyle="circle"
 iconcolor="#fff"
 iconbdcolor="#41E7FF"
 iconbdwidth=2
 iconbgcolor="#bbb"
 iconsize=55]
プロモーション用の説明文です。HTMLタグやショートコードも利用できます。アイコンの大きさを変えれます。
[/promo]
[/promobox]

アイコンを左側に配置した場合

プロモーション用の説明文です。HTMLタグやショートコードも利用できます。アイコンか任意の画像を表示できます。
Icon Space Invader
プロモーション用の説明文です。HTMLタグやショートコードも利用できます。アイコンか任意の画像を表示できます。

このショートコード

[promobox]
[promo
 title="Icon Globe"
 titlecolor="#444"
 titlehovercolor="#227BCD"
 icon="icon-globe"
 iconhovercolor="#4DCE2E"
 iconstyle="round"
 iconalign="left"
 iconcolor="#227BCD"
 url="#"]
プロモーション用の説明文です。HTMLタグやショートコードも利用できます。アイコンか任意の画像を表示できます。
[/promo]
 
[promo
 title="Icon Space Invader"
 icon="icon-space-invaders"
 iconalign="left"
 iconstyle="square"
 iconcolor="#fff"
 iconbgcolor="#aaa"]
プロモーション用の説明文です。HTMLタグやショートコードも利用できます。アイコンか任意の画像を表示できます。
[/promo]
[/promobox]

アイコンを右側に配置した場合

プロモーション用の説明文です。HTMLタグやショートコードも利用できます。アイコンか任意の画像を表示できます。
プロモーション用の説明文です。HTMLタグやショートコードも利用できます。アイコンか任意の画像を表示できます。

このショートコード

[promobox]
[promo
 title="Icon Diamonod"
 titlecolor="#444"
 titlehovercolor="#888"
 icon="icon-diamond"
 iconalign="right"
 iconcolor="#4DCE2E"
 iconhovercolor="#2BEACE"
 url="#"]
プロモーション用の説明文です。HTMLタグやショートコードも利用できます。アイコンか任意の画像を表示できます。
[/promo]

[promo
 title="Icon Chart"
 titlecolor="#888"
 icon="icon-chart"
 iconalign="right"
 iconcolor="#AE75CE"
 url="#"]
プロモーション用の説明文です。HTMLタグやショートコードも利用できます。アイコンか任意の画像を表示できます。
[/promo]
[/promobox]

3列表示にした場合

プロモーション用の説明文です。HTMLタグやショートコードも利用できます。アイコンか任意の画像を表示できます。
プロモーション用の説明文です。HTMLタグやショートコードも利用できます。アイコンか任意の画像を表示できます。
プロモーション用の説明文です。HTMLタグやショートコードも利用できます。アイコンか任意の画像を表示できます。

このショートコード

[promobox]
[promo
 title="Icon Desktop"
 titlecolor="#000"
 titlehovercolor="#2CC5EA"
 icon="icon-desktop"
 iconcolor="#A7E329"
 iconhovercolor="#41E7FF"
 iconbgcolor="#000"
 iconstyle="square"
 url="#"]
プロモーション用の説明文です。HTMLタグやショートコードも利用できます。アイコンか任意の画像を表示できます。
[/promo]

[promo
 title="Icon Laptop"
 titlecolor="#FF8DA4"
 icon="icon-laptop"
 iconcolor="#fff"
 iconbgcolor="#FF8DA4"
 iconstyle="round"
 url="#"]
プロモーション用の説明文です。HTMLタグやショートコードも利用できます。アイコンか任意の画像を表示できます。
[/promo]

[promo
 title="Icon Mobile"
 titlecolor="#3FC9EB"
 titlehovercolor="#222"
 icon="icon-mobile"
 iconcolor="#fff"
 iconhovercolor="#A7E329"
 iconbgcolor="#41E7FF"
 iconstyle="circle"
 url="#"]
プロモーション用の説明文です。HTMLタグやショートコードも利用できます。アイコンか任意の画像を表示できます。
[/promo]
[/promobox]

4列表示にした場合

プロモーション用の説明文です。HTMLタグやショートコードも利用できます。アイコンか任意の画像を表示できます。
プロモーション用の説明文です。HTMLタグやショートコードも利用できます。アイコンか任意の画像を表示できます。
Icon Linux
プロモーション用の説明文です。HTMLタグやショートコードも利用できます。アイコンか任意の画像を表示できます。
Icon Android
プロモーション用の説明文です。HTMLタグやショートコードも利用できます。アイコンか任意の画像を表示できます。

このショートコード

[promobox]
[promo
 title="Icon Apple"
 titlecolor="#444"
 icon="icon-apple"
 url="#"
 iconcolor="#000"]
プロモーション用の説明文です。HTMLタグやショートコードも利用できます。アイコンか任意の画像を表示できます。
[/promo]
 
[promo
 title="Icon Windows"
 icon="icon-windows"
 iconcolor="#4BB3DF"
 url="#"]
プロモーション用の説明文です。HTMLタグやショートコードも利用できます。アイコンか任意の画像を表示できます。
[/promo]
 
[promo
 title="Icon Linux"
 icon="icon-linux"
 iconcolor="#E3CA13"]
プロモーション用の説明文です。HTMLタグやショートコードも利用できます。アイコンか任意の画像を表示できます。
[/promo]
 
[promo
 title="Icon Android"
 icon="icon-android"
 iconcolor="#87C433"]
プロモーション用の説明文です。HTMLタグやショートコードも利用できます。アイコンか任意の画像を表示できます。
[/promo]
[/promobox]

任意の画像をアイコンにした場合

プロモーション用の説明文です。HTMLタグやショートコードも利用できます。画像を表示しています。
プロモーション用の説明文です。HTMLタグやショートコードも利用できます。画像を表示しています。
プロモーション用の説明文です。HTMLタグやショートコードも利用できます。画像を表示しています。
プロモーション用の説明文です。HTMLタグやショートコードも利用できます。画像を表示しています。

このショートコード

[promobox]
[promo
 title="Image Small"
 titlecolor="#666" imgurl="https://digipress.info/images/wp-test/palm.jpg"
 iconsize="small"
 url="#"]
プロモーション用の説明文です。HTMLタグやショートコードも利用できます。画像を表示しています。
[/promo]
 
[promo
 title="Image Rounded"
 titlecolor="#666" imgurl="https://digipress.info/images/wp-test/dolphin.jpg"
 iconstyle="round"
 url="#"]
プロモーション用の説明文です。HTMLタグやショートコードも利用できます。画像を表示しています。
[/promo]
 
[promo
 title="Image Big"
 titlecolor="#666" imgurl="https://digipress.info/images/wp-test/tiger.jpg"
 iconsize="big"
 iconstyle="circle"
 url="#"]
プロモーション用の説明文です。HTMLタグやショートコードも利用できます。画像を表示しています。
[/promo]
 
[promo
 title="Image Border"
 titlecolor="#000" imgurl="https://digipress.info/images/wp-test/rose.jpg"
 iconstyle="circle"
 iconsize=88
 iconbdwidth=2
 iconbdcolor="#D381EE"
 url="#"]
プロモーション用の説明文です。HTMLタグやショートコードも利用できます。画像を表示しています。
[/promo]
[/promobox]

ホバーアニメーションを指定した場合

アイコンをホバーしたときに、6種類の回転パターンとズーム表示からお好みで組み合わせてアニメーション表示することができます。
アイコンをホバーしたときに、6種類の回転パターンとズーム表示からお好みで組み合わせてアニメーション表示することができます。
アイコンをホバーしたときに、6種類の回転パターンとズーム表示からお好みで組み合わせてアニメーション表示することができます。

このショートコード

[promobox plx="enter bottom delay 1.0s"]
[promo
 title="Rotate and zoom-up"
 titlecolor="#000"
 titlehovercolor="#2CC5EA"
 icon="icon-desktop"
 iconcolor="#A7E329"
 iconhovercolor="#41E7FF"
 iconbgcolor="#000" 
 iconstyle="square" 
 url="#"
 iconrotate=1
 iconscale=1]
アイコンをホバーしたときに、6種類の回転パターンとズーム表示からお好みで組み合わせてアニメーション表示することができます。
[/promo]
 
[promo
 title="Rotate 45 degrees"
 titlecolor="#FF8DA4"
 icon="icon-laptop"
 iconcolor="#fff"
 iconbgcolor="#FF8DA4"
 iconstyle="round"
 url="#"
 iconrotate=5]
アイコンをホバーしたときに、6種類の回転パターンとズーム表示からお好みで組み合わせてアニメーション表示することができます。
[/promo]
 
[promo
 title="Rotate 360 degrees"
 titlecolor="#3FC9EB"
 titlehovercolor="#222"
 icon="icon-mobile"
 iconcolor="#fff"
 iconhovercolor="#000"
 iconbgcolor="#41E7FF"
 iconstyle="circle"
 url="#"
 iconrotate=3]
アイコンをホバーしたときに、6種類の回転パターンとズーム表示からお好みで組み合わせてアニメーション表示することができます。
[/promo]
[/promobox]

背景カラーを指定した場合

プロモーション用の説明文です。 ここには背景カラーのみを指定しています。
プロモーション用の説明文です。 ホバー時背景カラーのみを指定しています。
プロモーション用の説明文です。 背景カラーとホバー時背景カラーを指定しています。

このショートコード

[promobox]
[promo
 title="Background Color"
 titlecolor="#fff"
 descsize=13px
 desccolor=#fff
 icon="icon-desktop"
 iconcolor="#fff"
 bgcolor="#ed347d"
 url="#"]
プロモーション用の説明文です。
ここには背景カラーのみを指定しています。
[/promo]
 
[promo
 title="Hover Color"
 titlecolor="#222"
 descsize=13px
 icon="icon-laptop"
 iconcolor="#222"
 iconstyle="circle"
 iconbgcolor="#fff"
 iconscale=1
 bghovercolor="#CFBE27"
 url="#"]
プロモーション用の説明文です。
ホバー時背景カラーのみを指定しています。
[/promo]
 
[promo
 title="BG and Hover Color"
 titlecolor="#fff"
 titlehovercolor="#fff"
 descsize=13px
 desccolor=#fff
 icon="icon-mobile"
 iconcolor="#222"
 iconhovercolor="#00A1CB"
 iconstyle="round"
 iconrotate=1
 bgcolor="#F27435"
 bghovercolor="#00A1CB"
 url="#"]
プロモーション用の説明文です。
背景カラーとホバー時背景カラーを指定しています。
[/promo]
[/promobox]

スクロールで可視エリアに入ったときに表示する例

タブレット端末ではレスポンシブ表示、スマートフォンではモバイル専用テーマで軽量化と最適化を行っています。レスポンシブ対応だけではもう古い!
ボタンやラベルなど標準であらゆるCSSセレクタとショートコードを用意。テーブル、Googleマップ、このPRボックスなども簡単に表示できます。
日付有無、カラムやカラー変更、ウィジェット制御、オリジナルCSS追加などできないことがないくらいテーマオプションは他のテーマに比べて圧倒的に豊富です。

このショートコード

[promobox
iconhovershadow=1
plx="enter bottom delay 1.0s"]

[promo
title="モバイル表示の最適化"
url="https://digipress.info/extensions/shortcodes/"
titlecolor=#777
titlesize=17px
descsize=13px
icon=icon-plane
iconcolor=#fff
iconbgcolor=#ef9e9e
iconbdcolor=#fff
iconbdwidth=3
iconsize=55
iconstyle=circle
iconrotate=3
bghovercolor="rgba(239,158,158,0.12)"]
タブレット端末ではレスポンシブ表示、スマートフォンではモバイル専用テーマで軽量化と最適化を行っています。レスポンシブ対応だけではもう古い!
[/promo]
 
[promo
title="豊富なCSS装飾とショートコード"
url="https://digipress.info/extensions/shortcodes/"
titlecolor=#777
titlesize=17px
descsize=13px
icon=icon-cube4
iconcolor=#fff
iconbgcolor=#86d0d8
iconbdcolor=#fff
iconbdwidth=3
iconsize=55
iconstyle=circle
iconrotate=4
bghovercolor="rgba(134,208,206,0.12)"]
ボタンやラベルなど標準であらゆるCSSセレクタとショートコードを用意。テーブル、Googleマップ、このPRボックスなども簡単に表示できます。
[/promo]
 
[promo
title="すべてのカスタマイズを管理画面で"
url="https://digipress.info/extensions/shortcodes/"
titlecolor=#777
titlesize=17px
descsize=13px
icon=icon-display
iconcolor=#fff
iconbgcolor=#cbd886
iconbdcolor=#fff
iconbdwidth=3
iconsize=55
iconstyle="circle"
iconscale=1
bghovercolor="rgba(203,216,134,0.12)"]
日付有無、カラムやカラー変更、ウィジェット制御、オリジナルCSS追加などできないことがないくらいテーマオプションは他のテーマに比べて圧倒的に豊富です。
[/promo]

[/promobox]

指定可能なパラメータ(promobox ※親)

maxwidth

このプロモーションボックスの最大表示幅を指定する場合は、その値をピクセル値として指定します。

例 : maxwidth=1180

iconhovershadow

各プロモーションボックスのマウスオーバー時にアイコンにシャドウを表示する場合に「1」または「true」を指定します。

例 :
iconhovershadow=1,
iconhovershadow=true

iconhovershadowwhite

各プロモーションボックスのマウスオーバー時のアイコンのシャドウをホワイトにする場合に「1」または「true」を指定します。
※既定値はブラック

例 :
iconhovershadowwhite=1,
iconhovershadowwhite=true

disableresponsive

スマートフォンなどのモバイルデバイスでもレスポンシブ表示(1カラム化)を無効にし、指定したカラムのまま表示する場合は「1」または「true」を指定します。

例 :
disableresponsive=1,
disableresponsive=true

class

このプロモーションボックス全体を括るHTMLタグ(div)に任意のCSSクラスを指定する場合に指定します。

例 : class=”mg40px-btm”

style

このプロモーションボックス全体を括るHTMLタグ(div)に任意のスタイルを指定する場合に指定します。

例 : style=”margin-bottom:40px;”

plx

パララックススクロールコンテンツ対応のDigiPressテーマを使用している場合は、このオプションを指定することでショートコードコンテンツの表示にパララックススクロールを反映させることができます。

例 : plx=’enter bottom delay 0.8s’

指定可能な値はこちらを参照してください。

指定可能なパラメータ(promo ※子)

icon

プロモーションボックスに表示するアイコンを、サポートするCSSのアイコンクラスで指定します。

例 :
icon=”icon-mobile”

iconstyle

プロモーション用アイコンの背景の縁取り方法を指定する場合に指定します。

指定可能な値
  • square : 正方形
  • round : 角丸
  • circle : 円形

例 : iconstyle=”circle”

iconsize

プロモーション用アイコンのアイコンサイズをピクセル(px)、または簡易サイズ名(small, big)で指定できます。
未指定の場合は 38px (アイコンフォントの場合)、72px(画像の場合) のサイズが適用されます。

ピクセルを前提とした数値のみの指定も可能です。

例 : iconsize=80

iconcolor

プロモーション用アイコンのカラーをカラーコード(#0000ff など)、またはカラー名(blue など)で指定します。

例 : iconcolor=’#4797E0′

iconhovercolor

プロモーションボックスのアイコンリンクにカーソルがホバーした際のホバーカラーをカラーコード(#0000ff など)、またはカラー名(blue など)で指定します。

例 : iconhovercolor=”#00ffee”

このオプションは url パラメータを指定した際に有効です。

iconbgcolor

プロモーションボックスのアイコンに背景カラーを指定する場合に、そのカラーコード(#0000ff など)、またはカラー名(blue など)で指定します。

例 : iconbgcolor=”#eee”

iconbdcolor

プロモーションボックスのアイコン背景の縁のボーダーカラーを指定する場合に、そのカラーコード(#0000ff など)、またはカラー名(blue など)で指定します。

例 : iconbdcolor=’#227BCD’

iconbdwidth

プロモーションボックスのアイコン背景の縁のボーダーサイズ(太さ)をピクセル単位で指定できます。
数値のみの指定も可能です。

例 : iconbdwidth=3

iconalign

プロモーションボックス内のアイコンの表示位置を指定する場合に指定します。
未指定の場合はボックス内の中央上部にアイコンが表示されます。

指定可能な値
  • left : 左側にアイコン
  • right : 右側にアイコン
iconrotate

プロモーションボックス内のアイコンをマウスでホバーしたときのアイコンの回転アニメーションパターンをセットする場合に指定します。
未指定の場合はホバー時にアニメーションしません。

指定可能な値
  • 1 : 時計回りに15度回転
  • 2 : 時計回りに45度回転
  • 3 : 時計回りに360度回転(1回転)
  • 4 : 反時計回りに15度回転
  • 5 : 反時計回りに45度回転
  • 6 : 反時計回りに360度回転(1回転)

例 : iconrotate=4

iconscale

プロモーションボックス内のアイコンをマウスでホバーしたときにアイコンを拡大表示する場合に「1」または「true」を指定します。
未指定の場合はホバー時に拡大しません。

例 : iconscale=1

imgurl

プロモーションボックスのアイコンをアイコンフォントではなく、画像で表示する場合はその画像のURLを指定します。

例 : imgurl=’http://hogehoge.com/wp-content/upload/promo-icon1.png’

url

プロモーションボックス内のアイコンやタイトルを任意のページへのリンクにする場合にそのURLを指定します。

例 : url=’http://hogehoge.com/order/’

target

プロモーションボックス内のアイコンリンク、タイトルリンクをクリックしたときに別ウィンドウで開くようにする場合に target=1 または target=true を指定します。

このオプションは url パラメータを指定した際に有効です。

title

プロモーションボックス内のタイトルを指定します。
商品、サービス、会社の特徴など訪問者にアピールしたい最も重要な1文を記述します。

url パラメータを指定した場合はこのタイトルは自動的に参照先ページへのリンクになります。

titlecolor

現在のプロモーションボックスのタイトル文字列のフォントカラーをカラーコード(例 #0000ff)やアルファ値(例 rgba(0,0,0,.5))、カラーネーム(blueなど)で指定できます。

例 : titlecolor=#ff0000, titlecolor=’rgba(0,0,0,.68)’ など

titlehovercolor

プロモーションボックスのタイトルリンクにカーソルがホバーした際のホバーカラーをカラーコード(例 #0000ff)やアルファ値(例 rgba(0,0,0,.5))、カラーネーム(blueなど)で指定できます。

例 : titlehovercolor=#00ffee

このオプションは url パラメータを指定した際に有効です。

titlesize

プロモーションボックスのタイトルのフォントサイズを変更する場合にピクセル単位(px)で指定します。
未指定の場合は、18ピクセルのフォントサイズが適用されます。

数値のみの指定も可能です。

例 : titlesize=20

titlebold

プロモーションボックスのタイトルの太字を無効にする場合は、titlebold=0 として指定します。

desccolor

現在のプロモーションボックスに表示される説明文のフォントカラーをカラーコード(例 #0000ff)やアルファ値(例 rgba(0,0,0,.5))、カラーネーム(blueなど)で指定できます。

例 : desccolor=#ff0000, desccolor=’rgba(0,0,0,.68)’ など

descsize

プロモーションボックスの説明文のフォントサイズを変更する場合にピクセル単位(px)で指定します。
未指定の場合は、13ピクセルのフォントサイズが適用されます。

数値のみの指定も可能です。

例 : descsize=14

bgcolor

プロモーションボックスの背景カラーを設定する場合は、そのカラーをHEX値のカラーコードやアルファ値で指定します。

例 : bgcolor=#ed347d, bgcolor=’rgba(0,0,0,.06)’ など

bghovercolor

プロモーションボックスのホバー時の背景カラーを設定する場合は、そのカラーをHEX値のカラーコードやアルファ値で指定します。

例 : bghovercolor=#ed347d, bghovercolor=’rgba(255, 255, 255, 0.2)’ など