【内部用】スポイラー(アコーディオン)の設置手順

【内部用】スポイラー(アコーディオン)の設置手順

ここではオプト社員向けにページの折り畳み機能であるスポイラーの設置手順を記します。
既存のページに対しても簡単に埋め込むことができます。

1.スポイラーを埋め込むページを編集する

新規でページを作製するかまたは既存のページを編集状態にします。

2.スポイラータイトルとなる位置にクラシックを挿入する

スポイラー(ページの折り畳み機能)はそれを反映したい箇所のはじめと終わりにクラシックアイテムを挿入して定型タグを記載することで実現することができます。
まず、スポイラータイトル(折りたたんだときに表示されるタイトル)を置きたい位置にクラシックを挿入します。

3.クラシックにタグを入れる

クラシックと書いてある部分をクリックして次の定型タグを貼り付けます。

[su_spoiler title="ここにタイトルを入力" style="fancy" class="ttlFontSizeL backColor"]

4.定型タグの編集

「ここにタイトルを入力」の部分を実際にタイトルとして表示される文字列に編集します。

既存のページを編集する場合、タイトルにあたる文章(見出し)が既に存在する場合はスポイラータイトルとダブるので見出しは消してしまっても構いません。

5.スポイラーの終わり部分に終わり用の定型タグを入れる

スポイラータイトルと同様の手順で折りたたまれる末尾となる箇所に次の定型タグを挿入します。

[/su_spoiler]

6.プレビューで確認

編集ページ右上の「プレビュー」→「新しいタブでプレビュー」をクリックすると新しいタブが開きスポイラーの状態が確認できます。

左側に「+」が付与され、背景が水色となって折りたたまれた状態で表示されます。

8.編集の保存または公開

折りたたみたい箇所が全て編集できたら更新または公開します。

お疲れ様でした。

Verified by MonsterInsights