トグルボックスに矢印とは違った意味で、装飾用にFontAwesomeを表示したかったのですが、どうしてもエラーになってしまいます。
何か方法がないものかと試行錯誤して、Cocoonのテンプレートを使うことにしました。
経緯を忘れてテンプレートを消したり編集してしまいそうなので、記録として残しておこうと思います。
トグルボックスとは？
トグルボックスというのはこちら
トグルボックス、または、アコーディオンボックスとも言います。
上のボックスをクリックして頂くとわかりやすいです。開いたり、閉じたり、できます。
記事の中で場所をとりたくない場合や、レビューなどでネタバレを隠したりするのに使える便利なボックスです。
当サイトではスキンのデザインを元に、プラスアルファでカスタマイズしていますので、Cocoonデフォルトの表示とは異なりますが、役割は同じです。
トグルボックスにアイコンフォントを表示したい
先に完成品をお見せしましょう。
アイコンフォントとテキストを並べて表示したいだけ…
失敗の巻
トグルボックスを挿入し、［HTMLとして編集］を使ってフォントコードを貼り付けました。
結果は、見事にエラーとなりました。
［ブロックのリカバリーを試行］すると、貼り付けたコードは消されてしまいます。
そこで、［詳細設定］で［HTMLに変換］を選択してみました。
編集画面でプレビューしてもアイコンは表示されませんが、サイトプレビューしてみるとアイコンは表示され、いかにも成功したように見えます。
ただ、これだとボックス内の編集までHTMLで行うことになり、かなり面倒です。
アイコンフォントをテンプレートに登録
Cocoonには、繰り返し使う文章などを定型文として登録しておく「テンプレート」があります。
今回の件は、最初はCSSでボタンそのもののデザインとして作りこんでしまうことも考えましたが、なんだかコードが増えてしまい、頭が混乱してしまいました…。
その点、テンプレートの登録は簡単です。
実験してみたところ、わりと思い通りの結果になったので、テンプレートを採用することにしました。
テンプレートに登録する方法
ダッシュボード［Cocoon設定］→［テンプレート］
- ［テンプレート］の画面で［新規追加］をクリックします。
- フォーマットに、必要な項目を入力して［保存］します。
- 一覧ページに戻り、ショートコードをコピーします。
今回はFontAwesomeのコードを貼り付けるため、［ビジュアル］タブではなく［テキスト］タブに切り替えて入力しました。
トグルボックスにテンプレートを貼り付ける
- 記事の編集画面でトグルボックスを挿入し、ショートコードを貼り付けます。
- ショートコードは直接入力もできます。
- トグルボックスの色を変更する場合は、サイドバーで「ボーダー色」のカラーパレットを使って変更できます。
編集画面ではショートコードで見えています。
サイトを表示すると、アイコンフォントが表示されています。
完成サンプル
せっかくなので、コード系のアイコンを覚え書き
Name: file-code [Unicode: f1c9 ]
<i class="fas fa-file-code"></i>Name: file-code [Unicode: f1c9 ]
<i class="far fa-file-code"></i>Name: code [Unicode: f121 ]
<i class="fas fa-code"></i>Name: laptop-code [Unicode: f5fc ]
<i class="far fa-file-code"></i>最後に…
通常、テンプレートを呼び出すときは、
/（スラッシュ）に続けてテンプレートと入力し、Enterキーを押します。
すると、テンプレート選択ブロックが挿入されます。
「未選択」の部分をクリックすると、登録したテンプレートの名前がリスト表示され、選択するだけで編集画面に挿入されます。
ところが、トグルボックスの中で同じ操作をしても、Enterキーで改行され、単にテキストとして認識されただけでした。
ショートコードをコピペする手間を考えると、まだまだ改良の余地がありそうです。また、他にもっと良い方法があるかもしれないなど、色々と疑問が残るところです。
とりあえず、テンプレートの活用方法のひとつと考えて記録しておきます。
