IRIE FILM WORKS

cinematic wedding movie

プロモーションボックス用ショートコード

  • Weekly Ranking
  • Menu
  • Search by Tag
    このショートコードを使用するにはDigiPressテーマ専用のプラグイン(有料)が必要です。

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

    シンプルなPRボックス

    [promobox column=2]
    [promo title=”Icon Coffee” icon=”icon-coffee”]
    プロモーション用の説明文です。HTMLタグやショートコードも利用できます。アイコンか任意の画像を表示できます。
    [/promo]
    [promo title=”Icon Bag” titlecolor=”#888″ icon=”icon-bag” iconcolor=”#726654″ url=”#”]
    プロモーション用の説明文です。HTMLタグやショートコードも利用できます。アイコンの大きさを変えれます。
    [/promo]
    [/promobox]

    Code

    [promobox column=2]
[promo title="Icon Coffee" icon="icon-coffee"]
プロモーション用の説明文です。<span class="b">HTMLタグやショートコード</span>も利用できます。アイコンか任意の画像を表示できます。
[/promo]
[promo title="Icon Bag" titlecolor="#888" icon="icon-bag" iconcolor="#726654" url="#"]
プロモーション用の説明文です。<span class="b">HTMLタグやショートコード</span>も利用できます。アイコンの大きさを変えれます。
[/promo]
[/promobox]

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

    [promobox column=2]
    [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]

    Code

    [promobox column=2]
[promo title="Icon Cupcake" titlecolor="#726654" titlehovercolor="#E0B07F" icon="icon-cupcake" iconstyle="circle" iconcolor="#DDA654" iconhovercolor="#F9C38C" iconsize=60 url="#"]
プロモーション用の説明文です。<span class="b">HTMLタグやショートコード</span>も利用できます。アイコンか任意の画像を表示できます。
[/promo]
[promo title="Icon Sale" titlesize=28 icon="icon-sale" iconstyle="circle" iconcolor="#fff" iconbdcolor="#41E7FF" iconbdwidth=2 iconbgcolor="#bbb" iconsize=55]
プロモーション用の説明文です。<span class="b">HTMLタグやショートコード</span>も利用できます。アイコンの大きさを変えれます。
[/promo]
[/promobox]

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

    [promobox column=2]
    [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]

    Code

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

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

    [promobox column=2]
    [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]

    Code

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

    3列表示にした場合

    [promobox column=3]
    [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]

    Code

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

    4列表示した場合

    [promobox column=4]
    [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]

    Code

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

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

    [promobox column=4]
    [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]

    Code

    [promobox column=4]
[promo title="Image Small" titlecolor="#666" imgurl="https://digipress.info/images/wp-test/palm.jpg" iconsize="small" url="#"]
プロモーション用の説明文です。<span class="b">HTMLタグやショートコード</span>も利用できます。画像を表示しています。
[/promo]
[promo title="Image Rounded" titlecolor="#666" imgurl="https://digipress.info/images/wp-test/dolphin.jpg" iconstyle="round" url="#"]
プロモーション用の説明文です。<span class="b">HTMLタグやショートコード</span>も利用できます。画像を表示しています。
[/promo]
[promo title="Image Big" titlecolor="#666" imgurl="https://digipress.info/images/wp-test/tiger.jpg" iconsize="big" iconstyle="circle" url="#"]
プロモーション用の説明文です。<span class="b">HTMLタグやショートコード</span>も利用できます。画像を表示しています。
[/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="#"]
プロモーション用の説明文です。<span class="b">HTMLタグやショートコード</span>も利用できます。画像を表示しています。
[/promo]
[/promobox]

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

    [promobox column=3 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
    iconrotate=1
    iconscale=1
    url=”#”]
    アイコンをホバーしたときに、6種類の回転パターンとズーム表示からお好みで組み合わせてアニメーション表示することができます。
    [/promo]
    [promo
    title=”Rotate 45 degrees”
    titlecolor=”#FF8DA4″
    icon=”icon-laptop”
    iconcolor=”#fff”
    iconbgcolor=”#FF8DA4″
    iconstyle=”round”
    iconrotate=5
    url=”#”]
    アイコンをホバーしたときに、6種類の回転パターンとズーム表示からお好みで組み合わせてアニメーション表示することができます。
    [/promo]
    [promo
    title=”Rotate 360 degrees”
    titlecolor=”#3FC9EB”
    titlehovercolor=”#222″
    icon=”icon-mobile”
    iconcolor=”#fff”
    iconhovercolor=”#000″
    iconbgcolor=”#41E7FF”
    iconstyle=”circle”
    iconrotate=3
    url=”#”]
    アイコンをホバーしたときに、6種類の回転パターンとズーム表示からお好みで組み合わせてアニメーション表示することができます。
    [/promo]
    [/promobox]

    Code

    [promobox column=3 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
iconrotate=1
iconscale=1
url="#"]
アイコンをホバーしたときに、<span class="blue">6種類の回転パターンとズーム表示</span>からお好みで組み合わせてアニメーション表示することができます。
[/promo]
[promo
title="Rotate 45 degrees"
titlecolor="#FF8DA4"
icon="icon-laptop"
iconcolor="#fff"
iconbgcolor="#FF8DA4"
iconstyle="round"
iconrotate=5
url="#"]
アイコンをホバーしたときに、<span class="blue">6種類の回転パターンとズーム表示</span>からお好みで組み合わせてアニメーション表示することができます。
[/promo]
[promo
title="Rotate 360 degrees"
titlecolor="#3FC9EB"
titlehovercolor="#222"
icon="icon-mobile"
iconcolor="#fff"
iconhovercolor="#000"
iconbgcolor="#41E7FF"
iconstyle="circle"
iconrotate=3
url="#"]
アイコンをホバーしたときに、<span class="blue">6種類の回転パターンとズーム表示</span>からお好みで組み合わせてアニメーション表示することができます。
[/promo]
[/promobox]

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

    [promobox column=3]
    [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]

    Code

    [promobox column=3]
[promo
title="Background Color"
titlecolor="#fff"
descsize=13px
desccolor=#fff
icon="icon-desktop"
iconcolor="#fff"
bgcolor="#ed347d"
url="#"]
プロモーション用の説明文です。<br />ここには<span class="b">背景カラーのみを指定</span>しています。
[/promo]
[promo
title="Hover Color"
titlecolor="#222"
descsize=13px
icon="icon-laptop"
iconcolor="#222"
iconstyle="circle"
iconbgcolor="#fff"
iconscale=1
bghovercolor="#CFBE27"
url="#"]
プロモーション用の説明文です。<br /><span class="b">ホバー時背景カラーのみを指定</span>しています。
[/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="#"]
プロモーション用の説明文です。<br /><span class="b">背景カラーとホバー時背景カラーを指定</span>しています。
[/promo]
[/promobox]

    マウスオーバーでアイコンにシャドウを表示する例

    [promobox
    column=3
    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]

    Code

    [promobox
column=3
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)"]
タブレット端末ではレスポンシブ表示、スマートフォンでは<span class="b">モバイル専用テーマで軽量化と最適化</span>を行っています。<span class="b">レスポンシブ対応だけではもう古い！</span>
[/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マップ、<span class="b">このPRボックスなども簡単に表示</span>できます。
[/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]