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

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

表示例

シンプルなPRボックス

Code

Icon Coffee

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

Icon Bag

プロモーション用の説明文です。<span class="b">HTMLタグやショートコード</span>も利用できます。アイコンの大きさを変えれます。

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

Code

Icon Cupcake

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

Icon Sale

プロモーション用の説明文です。<span class="b">HTMLタグやショートコード</span>も利用できます。アイコンの大きさを変えれます。

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

Code

Icon Globe

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

Icon Space Invader

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

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

Code

Icon Diamonod

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

Icon Chart

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

3列表示にした場合

Code

Icon Desktop

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

Icon Laptop

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

Icon Mobile

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

4列表示した場合

Code

Icon Apple

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

Icon Windows

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

Icon Linux

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

Icon Android

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

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

Code

Image Small

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

Image Rounded

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

Image Big

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

Image Border

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

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

Code

Rotate and zoom-up

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

Rotate 45 degrees

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

Rotate 360 degrees

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

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

Code

Background Color

<div class="white">プロモーション用の説明文です。<br />ここには<span class="b">背景カラーのみを指定</span>しています。</div>

Hover Color

プロモーション用の説明文です。<br /><span class="b">ホバー時背景カラーのみを指定</span>しています。

BG and Hover Color

<div class="white">プロモーション用の説明文です。<br /><span class="b">背景カラーとホバー時背景カラーを指定</span>しています。</div>

Point!レスポンシブ、スマホテーマ対応！