クリックすると開いたり閉じたりするの、ありますよね。
スポイラーと言うらしいです。
このスポイラーを使用するために、Shortcodes Ultimateというプラグインを使っていきます。この記事では操作方法と使用例を初心者向けにご紹介します。
難しい設定がないプラグインなので、すぐに使えると思います。
＊目次＊
Shortcodes Ultimateのインストール＆有効化
まずはインストールしていきます。
ダッシュボード＞プラグイン＞新規追加＞キーワード「Shortcodes Ultimate」を入力＞「今すぐインストール」をクリック
「有効化」をクリック
自動的にプラグイン一覧のページに切り替わると思います。
もうこれで使えます。早いですね！
Shortcodes Ultimateを実際に使用する
せっかくなので試しに使ってみましょう。
投稿から「新規追加」クリックして、新規のページを開いてください。(試し入力用です)
新しいボタンが追加されていると思います。
「[]ショートコードを挿入」をクリック
「スポイラー」をクリック
「タイトル」を入力(クリックするところに表示されるテキスト)
「スタイル」と「アイコン」をプルダウンから選ぶ
※初期設定のまま進めます
「内容」にはクリック後に表示させたいテキストを入力＞「ショートコードを挿入」をクリック
コードを挿入後も入力可能なので、このままショートコードを挿入してもOKです。
自動的に編集画面に切り替わり、下の図のようなコードが挿入されていると思います。
「非表示のコンテンツ」はクリック後に表示させたいテキストを自由に入力できます。
ちなみに、「非表示のコンテンツ」のままだとこうなります↓↓
Shortcodes Ultimateの使用例
勉強会を開催している別サイトで、どうしてもページの上下の長さが長くなってしまうのでどうにかコンパクトにしたい、プラグインでできるのかな？と思ったら一瞬で見つかりました。
いろいろな使い方ができると思いますが、いくつか例を挙げてみたいと思います。
1.目次をコンパクトに表示したい
スポイラー
スタイル：デフォルト
アイコン：プラス
2.Q＆Aをスッキリ表示したい
スポイラー
スタイル：デフォルト
アイコン：カーソル
3.複数のQ＆Aを並べて表示したい
複数のQ＆Aを並べるなら、Shortcodes Ultimate(このプラグイン)の「アコーディオン」を活用する方法もあります。
アコーディオン
(その他特別な選択・設定はなし)
4.説明をコンパクトに表示したい
スポイラー
スタイル：デフォルト
アイコン：矢印
5.枠付きで内容をスッキリ表示したい
スポイラー
スタイル：ファンシー
アイコン：シェブロン
例は以上です。
スタイルは3つあり、アイコンは13個あるのでサイトに合わせて使い分けられそうです。
このサイトでは、こちらの記事で実際にスポイラーを使用しています。
