DigiPress

Highly Flexible WordPress Theme

メニュー

accordions / accordion : アコーディオンパネルコンテンツを表示

accordions / accordion : アコーディオンパネルコンテンツを表示
このショートコードを使用するには「DigiPress Ex – Shortcodes」プラグインが必要です

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

Tips

スライドトグルショートコードとの違いは、スライドして表示されるパネルコンテンツは常に1つのみとなるよう展開されるのがアコーディオンで、同時に開いておくパネルコンテンツ数に制限がないのがスライドトグルです。

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

アコーディオンのタイトル 1

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

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

アコーディオンのタイトル 2

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

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

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

アコーディオンのタイトル 3
3つ目のスライド内のコンテンツ。
タイトルにHTMLタグでアイコンを表示しています。

クリックで開閉します。

このショートコード

[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]

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

アコーディオンのタイトル 1

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

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

アコーディオンのタイトル 2

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

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

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

アコーディオンのタイトル 3
3つ目のスライド内のコンテンツ。
タイトルにHTMLタグでアイコンを表示しています。

クリックで開閉します。

このショートコード

[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]

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

アコーディオンのタイトル 1

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

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

アコーディオンのタイトル 2

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

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

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

アコーディオンのタイトル 3
3つ目のスライド内のコンテンツ。
タイトルにHTMLタグでアイコンを表示しています。

クリックで開閉します。

このショートコード

[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='<i class="icon-sofa"></i>アコーディオンのタイトル 3']
3つ目のスライド内のコンテンツ。
タイトルにHTMLタグでアイコンを表示しています。

クリックで開閉します。
[/accordion]

[/accordions]

注意事項

  • このショートコードは 親用のコード(accordions)と子用のコード(accordion)でネスト(入れ子)にする必要があり、子(accordion)で括ったコンテンツが1つあたりのスライドの内容となります。

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

titlecolor
アコーディオンの各タイトルのフォントカラーを指定する場合に、HEX値やRGBA値などのカラーコード(#666, rgba(0,0,0,0.8) など)で指定します。

例: titlecolor=#333, titlecolor=’rgba(130,130,130,0.8)’ など

titlebgcolor
アコーディオンの各タイトルバーの背景カラーを指定する場合に、HEX値やRGBA値などのカラーコード(#666, rgba(0,0,0,0.8) など)で指定します。

例: titlebgcolor=#57A7D6, titlebgcolor=’rgba(87,167,214,0.92)’ など

titlesize
アコーディオンの各タイトルのフォントサイズを任意のサイズに変更する場合に、単位付き(px, em, % など)の数値で指定します。
既定値は 98% です。

例: titlesize=18px, titlesize=110% など

titlebold
アコーディオンの各タイトルを太字にする場合に「1」または「true」を指定します。

例: titlebold=1, titlebold=true

titlecenter
アコーディオンの各タイトルをタイトルバーの中央に表示する場合に「1」または「true」を指定します。

例: titlecenter=1, titlecenter=true

arrowiconright
アコーディオンの各タイトルの隣に表示される矢印(展開用)アイコンの表示位置をタイトルバーの右端に表示する場合に「1」または「true」を指定します。

例: arrowiconright=1, arrowiconright=true

contentcolor
選択されたアクティブなアコーディオンコンテンツエリアのフォントカラーを指定する場合に、HEX値やRGBA値などのカラーコード(#666, rgba(0,0,0,0.8) など)で指定します。

例: contentcolor=#333, contentcolor=’rgba(130,130,130,0.8)’ など

contentbgcolor
選択されたアクティブなアコーディオンコンテンツエリアの背景カラーを指定する場合に、HEX値やRGBA値などのカラーコード(#666, rgba(0,0,0,0.8) など)で指定します。

例: contentbgcolor=#57A7D6, contentbgcolor=’rgba(87,167,214,0.1)’ など

bdcolor
アコーディオンのタイトルバーやコンテンツエリアのボーダーカラーを指定する場合に、HEX値やRGBA値などのカラーコード(#666, rgba(0,0,0,0.8) など)で指定します。

例: bdcolor=#fff, bdcolor=’rgba(0,0,0,.12)’ など

rounded
アコーディオン全体の四隅の角を丸くする場合に「1」または「true」を指定します。

例: rounded=1, rounded=true など

class
このアコーディオンのラッパー要素(dl)に指定する任意の CSSクラスを指定できます。

例 : class=”mg40px-btm”

style
このアコーディオンのラッパー要素(dl)に指定する任意のスタイルを直接指定できます。

例 : style=”margin:20px 0 40px 0;”

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

title ※必須
アコーディオンのスライドタイトルを指定します。

例 : title=’手順その1’

open
このアコーディオン内の対象コンテンツエリアを初期状態で開いておく場合に「1」または「true」を指定します。

例: open=1, open=true など

class
個々のスライド(定義リスト)のタイトル(dt)に指定する任意の CSSクラスを指定できます。

例 : class=’mg40px-btm’

style
個々のスライド(定義リスト)のタイトル(dt)に指定する任意のスタイルを直接指定できます。

例 : style=’padding:20px 0 40px 0;’