Shortcodes Ultimateという、いろんな機能をショートコードで実現するプラグインを使ったアコーディオンを試してみます。

まず、プラグインをインストール。「有効化」も忘れずに。

このプラグインで使えるショートコード一覧を見てみます。

驚くほどたくさんあります。

ともかく、使ってみます。

投稿画面に「ショートコードを挿入」というメニューが追加されています。

これをクリックするとショートコードの一覧が出てきました。

「アコーディオン」を選択。

ショートコードが入りました。

まずは、このままの状態のものがこの下です。クリックできます。

スポイラーのタイトル
非表示のコンテンツ
スポイラーのタイトル
非表示のコンテンツ
スポイラーのタイトル
非表示のコンテンツ

イマイチですね。まず、字が小さい。

なんとかならないかと調べて、こちらを見つけました。

Shortcodes Ultimateの設定でカスタムCSSを定義し、それをショートコードのclassに指定することで反映できるようです。

ということで見様見真似でやってみました。書いたCSSはこの二行。

タイトルを大きくする指定と、タイトルの色。この二つだけです。コードも載せておきます。

.l-ttl .su-spoiler-title{font-size:1.1em}
.mintcream .su-spoiler-title{background: #f5fffa;}

そして、ショートコードを使う側で、こんなふうにclassの中で指定します。

[su_spoiler title="defaultスタイル" open="no" style="default" icon="plus" anchor="" class="l-ttl mintcream"]非表示のコンテンツ[/su_spoiler]

これを使って、実際に書いたものがこの下。styleをdefault、simple、fancyの三つで試しています(これらは、Shortcodes Ultimateに標準で備わっているもの)。

defaultスタイル
非表示のコンテンツ
simpleスタイル
画像入れられるか?

fancyスタイル
Markdownはどう?

– qwerty
– asdfgh
1. 11111
1. 22222
1. 33333
– zxzcvbn

|タイトル1|タイトル2|タイトル3|
|:-|:-:|-:|
|123|456|789|
|亜細亜|インド|ウルグアイ|

期待通り、タイトルのフォントサイズが大きくなり、背景に色が付きました。また、コンテンツも画像が入れられました。しかし、残念ながら、Markdown記法は使えないようです。

「アコーディオン」プラグインだと、アコーディオンの中身はプラグインの中で管理されます。別の言い方をすると、記事本体とは切り離されます。

Shortcodes Ultimateでは、記事内にショートコードを使って直接書いていきますので、記事の中でアコーディオンを管理できます。一方、記述がごちゃごちゃします。

どちらがいいかは好み次第かな。どちらも、Markdown記法が使えないのが、個人的にはとても残念なところですが…。

スポンサードリンク