FRANKIES

アコーディオンパネル用ショートコード

ご挨拶

2020年、行徳駅にオープンした「Frankies International Bar」のマスター Frank(フランク)です。

長年、日本でのバーテンダーとしてのキャリアがあり日本語も話せます。
もちろんスタッフは全員英語が通じます。

フランキーズはお一人様から団体様、また男性から女性まで自由に楽しめる空間を提供しています。
お客様同士の出会いを求めたり、ゆっくり一人で飲みたい方も、ぜひお気軽にお越しください。

皆さまとお話できるのを楽しみに待っています。
ぜひ気軽に遊びに来て下さい。


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

機能やサービス一覧、手順などの要約やステップコンテンツをまとめ、クリックして展開されるスライドパネルで表示することができるショートコートです。

オプション未指定(初期状態)の表示例

[accordions]
[accordion title=’アコーディオンのタイトル 1′]

1つ目のスライド内のコンテンツ。
これはスライドして表示されるコンテンツです。クリックで開閉します。

アコーディオンパネルコンテンツ内にはHTMLやショートコードを記述することができます。

[blogcard url=’https://digipress.info/’]
[/accordion]
[accordion title=’アコーディオンのタイトル 2′]

2つ目のスライド内のコンテンツ。

スライドの中に画像を挿入した例。

このようにスライドコンテンツとしてHTMLタグを利用することももちろんできます。
方法は記事を書く要領とまったく同じです。

[/accordion]
[accordion title=’アコーディオンのタイトル 3′]
3つ目のスライド内のコンテンツ。
タイトルにHTMLタグでアイコンを表示しています。
クリックで開閉します。
[/accordion]
[/accordions]

このショートコード

[accordions]
[accordion title='アコーディオンのタイトル 1']
1つ目のスライド内のコンテンツ。
これはスライドして表示されるコンテンツです。クリックで開閉します。
アコーディオンパネルコンテンツ内には<span class="b">HTMLやショートコードを記述</span>することができます。
[blogcard url='https://digipress.info/']
[/accordion]
[accordion title='アコーディオンのタイトル 2']
2つ目のスライド内のコンテンツ。
<div class="clearfix">
<div><img src="https://digipress.info/_wp/wp-content/uploads/2018/04/hd-banner-mb6.jpg" alt="" width="300" height="200" class="alignleft" /></div>
<p>スライドの中に画像を挿入した例。</p>
<p>このようにスライドコンテンツとしてHTMLタグを利用することももちろんできます。
方法は記事を書く要領とまったく同じです。</p>
</div>
[/accordion]
[accordion title='アコーディオンのタイトル 3']
3つ目のスライド内のコンテンツ。
タイトルにHTMLタグでアイコンを表示しています。
クリックで開閉します。
[/accordion]
[/accordions]

フォントとカラーをカスタムし、矢印アイコンを右側に表示した例

[accordions
titlesize=’110%’
titlebold=1
titlecolor=#fff
titlebgcolor=#57A7D6
titlecenter=1
contentcolor=’#434343′
contentbgcolor=’rgba(87, 167, 214, 0.1)’
bdcolor=#fff
arrowiconright=1]
[accordion title=’アコーディオンのタイトル 1′]

1つ目のスライド内のコンテンツ。
これはスライドして表示されるコンテンツです。クリックで開閉します。

アコーディオンパネルコンテンツ内にはHTMLやショートコードを記述することができます。

[blogcard url=’https://digipress.info/’]
[/accordion]
[accordion title=’アコーディオンのタイトル 2′]

2つ目のスライド内のコンテンツ。

スライドの中に画像を挿入した例。

このようにスライドコンテンツとしてHTMLタグを利用することももちろんできます。
方法は記事を書く要領とまったく同じです。

[/accordion]
[accordion title=’アコーディオンのタイトル 3′]
3つ目のスライド内のコンテンツ。
タイトルにHTMLタグでアイコンを表示しています。
クリックで開閉します。
[/accordion]
[/accordions]

このショートコード

[accordions
titlesize='110%'
titlebold=1
titlecolor=#fff
titlebgcolor=#57A7D6
titlecenter=1
contentcolor='#434343'
contentbgcolor='rgba(87, 167, 214, 0.1)'
bdcolor=#fff
arrowiconright=1]
[accordion title='<i class="icon-t-shirt"></i>アコーディオンのタイトル 1']
<p>1つ目のスライド内のコンテンツ。
これはスライドして表示されるコンテンツです。クリックで開閉します。</p>
<p>アコーディオンパネルコンテンツ内には<span class="b">HTMLやショートコードを記述</span>することができます。</p>
[blogcard url='https://digipress.info/']
[/accordion]
[accordion title='<i class="icon-bed"></i>アコーディオンのタイトル 2']
<p>2つ目のスライド内のコンテンツ。</p>
<div class="clearfix">
<div><img src="https://digipress.info/_wp/wp-content/uploads/2018/04/hd-banner-mb6.jpg" alt="" width="300" height="200" class="alignleft" /></div>
<p>スライドの中に画像を挿入した例。</p>
<p>このようにスライドコンテンツとしてHTMLタグを利用することももちろんできます。
方法は記事を書く要領とまったく同じです。</p>
</div>
[/accordion]
[accordion title='<i class="icon-sofa"></i>アコーディオンのタイトル 3']
3つ目のスライド内のコンテンツ。
タイトルにHTMLタグでアイコンを表示しています。
クリックで開閉します。
[/accordion]
[/accordions]

角を丸くし、初期状態で開いておくタブを指定した例

[accordions
titlecolor=#fff
titlebgcolor=#57A7D6
contentcolor=’#434343′
contentbgcolor=’rgba(87, 167, 214, 0.1)’
bdcolor=#fff
rounded=1]
[accordion open=1 title=’アコーディオンのタイトル 1′]

1つ目のスライド内のコンテンツ。
これはスライドして表示されるコンテンツです。クリックで開閉します。

アコーディオンパネルコンテンツ内にはHTMLやショートコードを記述することができます。

[blogcard url=’https://digipress.info/’]
[/accordion]
[accordion title=’アコーディオンのタイトル 2′]

2つ目のスライド内のコンテンツ。

スライドの中に画像を挿入した例。

このようにスライドコンテンツとしてHTMLタグを利用することももちろんできます。
方法は記事を書く要領とまったく同じです。

[/accordion]
[accordion title=’アコーディオンのタイトル 3′ class=’icon-sofa’]
3つ目のスライド内のコンテンツ。
タイトルにHTMLタグでアイコンを表示しています。
クリックで開閉します。
[/accordion]
[/accordions]

このショートコード

[accordions
titlecolor=#fff
titlebgcolor=#57A7D6
contentcolor='#434343'
contentbgcolor='rgba(87, 167, 214, 0.1)'
bdcolor=#fff
rounded=1]
[accordion open=1 title='<i class="icon-t-shirt"></i>アコーディオンのタイトル 1']
<p>1つ目のスライド内のコンテンツ。
これはスライドして表示されるコンテンツです。クリックで開閉します。</p>
<p>アコーディオンパネルコンテンツ内には<span class="b">HTMLやショートコードを記述</span>することができます。</p>
[blogcard url='https://digipress.info/']
[/accordion]
[accordion title='<i class="icon-bed"></i>アコーディオンのタイトル 2']
<p>2つ目のスライド内のコンテンツ。</p>
<div class="clearfix">
<div><img src="https://digipress.info/_wp/wp-content/uploads/2018/04/hd-banner-mb6.jpg" alt="" width="300" height="200" class="alignleft" /></div>
<p>スライドの中に画像を挿入した例。</p>
<p>このようにスライドコンテンツとしてHTMLタグを利用することももちろんできます。
方法は記事を書く要領とまったく同じです。</p>
</div>
[/accordion]
[accordion title='アコーディオンのタイトル 3' class='icon-sofa']
3つ目のスライド内のコンテンツ。
タイトルにHTMLタグでアイコンを表示しています。
クリックで開閉します。
[/accordion]
[/accordions]