商品、サービスなどの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=”http://digipress.digi-state.com/images/wp-test/palm.jpg” iconsize=”small” url=”#”]
プロモーション用の説明文です。HTMLタグやショートコードも利用できます。画像を表示しています。
[/promo]
[promo title=”Image Rounded” titlecolor=”#666″ imgurl=”http://digipress.digi-state.com/images/wp-test/dolphin.jpg” iconstyle=”round” url=”#”]
プロモーション用の説明文です。HTMLタグやショートコードも利用できます。画像を表示しています。
[/promo]
[promo title=”Image Big” titlecolor=”#666″ imgurl=”http://digipress.digi-state.com/images/wp-test/tiger.jpg” iconsize=”big” iconstyle=”circle” url=”#”]
プロモーション用の説明文です。HTMLタグやショートコードも利用できます。画像を表示しています。
[/promo]
[promo title=”Image Border” titlecolor=”#000″ imgurl=”http://digipress.digi-state.com/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="http://digipress.digi-state.com/images/wp-test/palm.jpg" iconsize="small" url="#"] プロモーション用の説明文です。<span class="b">HTMLタグやショートコード</span>も利用できます。画像を表示しています。 [/promo] [promo title="Image Rounded" titlecolor="#666" imgurl="http://digipress.digi-state.com/images/wp-test/dolphin.jpg" iconstyle="round" url="#"] プロモーション用の説明文です。<span class="b">HTMLタグやショートコード</span>も利用できます。画像を表示しています。 [/promo] [promo title="Image Big" titlecolor="#666" imgurl="http://digipress.digi-state.com/images/wp-test/tiger.jpg" iconsize="big" iconstyle="circle" url="#"] プロモーション用の説明文です。<span class="b">HTMLタグやショートコード</span>も利用できます。画像を表示しています。 [/promo] [promo title="Image Border" titlecolor="#000" imgurl="http://digipress.digi-state.com/images/wp-test/rose.jpg" iconstyle="circle" iconsize=88 iconbdwidth=2 iconbdcolor="#D381EE" url="#"] プロモーション用の説明文です。<span class="b">HTMLタグやショートコード</span>も利用できます。画像を表示しています。 [/promo] [/promobox]
ホバーアニメーションを指定した場合
[promobox column=3]
[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]
Code
[promobox column=3] [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] アイコンをホバーしたときに、<span class="blue">6種類の回転パターンとズーム表示</span>からお好みで組み合わせてアニメーション表示することができます。 [/promo] [promo title="Rotate 45 degrees" titlecolor="#FF8DA4" icon="icon-laptop" iconcolor="#fff" iconbgcolor="#FF8DA4" iconstyle="round" url="#" iconrotate=5] アイコンをホバーしたときに、<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" url="#" iconrotate=3] アイコンをホバーしたときに、<span class="blue">6種類の回転パターンとズーム表示</span>からお好みで組み合わせてアニメーション表示することができます。 [/promo] [/promobox]
背景カラーを指定した場合
[promobox column=3]
[promo title=”Background Color” titlecolor=”#fff” icon=”icon-desktop” iconcolor=”#fff” bgcolor=”#ed347d” url=”#”]
ここには背景カラーのみを指定しています。
ホバー時背景カラーのみを指定しています。
[/promo] [promo title=”BG and Hover Color” titlecolor=”#fff” titlehovercolor=”#fff” icon=”icon-mobile” iconcolor=”#222″ iconhovercolor=”#00A1CB” iconstyle=”round” iconrotate=1 bgcolor=”#F27435″ bghovercolor=”#00A1CB” url=”#”]
背景カラーとホバー時背景カラーを指定しています。
Code
[promobox column=3] [promo title="Background Color" titlecolor="#fff" icon="icon-desktop" iconcolor="#fff" bgcolor="#ed347d" url="#"] <div class="white">プロモーション用の説明文です。
ここには<span class="b">背景カラーのみを指定</span>しています。</div> [/promo] [promo title="Hover Color" titlecolor="#222" icon="icon-laptop" iconcolor="#222" iconstyle="circle" iconbgcolor="#fff" iconscale=1 bghovercolor="#CFBE27" url="#"] プロモーション用の説明文です。
<span class="b">ホバー時背景カラーのみを指定</span>しています。 [/promo] [promo title="BG and Hover Color" titlecolor="#fff" titlehovercolor="#fff" icon="icon-mobile" iconcolor="#222" iconhovercolor="#00A1CB" iconstyle="round" iconrotate=1 bgcolor="#F27435" bghovercolor="#00A1CB" url="#"] <div class="white">プロモーション用の説明文です。
<span class="b">背景カラーとホバー時背景カラーを指定</span>しています。</div> [/promo] [/promobox]
Point!レスポンシブ、スマホテーマ対応！
