本サイトはアフィリエイト広告を利用しています

トグルボックスにFontAwesomeを表示する【Cocoon】テンプレートの活用

トグルボックスの装飾用にFontAwesomeを表示したかったのですが、どうしてもエラーになってしまいます。

何か方法がないものかと試行錯誤して、Cocoonのテンプレートを使うことにしました。

経緯を忘れてテンプレートを消したり編集しないよう、記録として残しておこうと思います。

トグルボックスとは?

トグルボックスというのはこちら

トグルボックス、または、アコーディオンボックスとも言います。

上のボックスをクリックして頂くとわかりやすいです。開いたり、閉じたり、できます。

記事の中で場所をとりたくない場合や、レビューなどでネタバレを隠したりするのに使える便利なボックスです。

当サイトではスキンのデザインを元にプラスアルファでカスタマイズしてるので、デフォルトの表示とは異なりますが役割は同じです。

このボックスのボタン部分にアイコンフォントを表示したいと思いました。

ナニ言ってるの~?

トグルボックスにアイコンフォントを表示したい

先に完成品をお見せしたほうがわかりやすいですね…

完成品Sample

アイコンフォントとテキストを並べて表示したいだけ…

上のサンプルにありますが、「コードを見る」というテキストの前にFontAwesomeのアイコンフォントを表示したいと思って試行錯誤しました。

全てのトグルボタンに表示するのであれば、CSSの疑似要素でスタイル指定する方法もあると思いますが、「コードを見る」というテキストの時だけに限定したかったので、悩みました。

失敗の巻

トグルボックスを挿入し、[HTMLとして編集]を使ってフォントコードを貼り付けました。

結果は、見事にエラーとなりました。

ブロックのリカバリーを試行]すると、貼り付けたコードは消されてしまいます

そこで、[詳細設定]で[HTMLに変換]を選択してみました。

カスタムHTMLツールバーの[プレビュー]ではアイコンは表示されませんが、ブラウザのほうではちゃんとアイコンとして表示され、いかにも成功したように見えました。

ただ、これだとボックス内の編集までHTMLで行うことになり、かなり面倒です。

アイコンフォントをテンプレートに登録

Cocoonには、繰り返し使う文章などを定型文として登録しておく「テンプレート」があります。

テンプレートはショートコード化されるので、これをトグルボタンに貼り付ければ行けるかな?と思って実験してみることにしました。

テンプレートの登録は簡単です。詳細は テンプレート(定型文)の使い方 をご覧ください。

結果的に思い通りの表示ができたので、テンプレートを採用することにしました。

作業の流れ
  • STEP1
    テンプレートに登録する

    今回はFontAwesomeのアイコンフォントと合わせて「コードを見る」のテキストも登録してしまいます。

  • STEP2
    トグルボタンにショートコードを貼り付ける

    登録したテンプレートは、必要な場所でショートコードを呼び出すだけで簡単に表示できます。

STEP1: FontAwesomeをテンプレートに登録する

ダッシュボード[Cocoon設定]→[テンプレート

  1. [テンプレート]の画面で[新規追加]をクリックします。

  2. フォーマットに、必要な項目を入力して[保存]します。

  3. 一覧ページに戻り、ショートコードをコピーします。

今回はFontAwesomeのコードを貼り付けるため、[ビジュアル]タブではなくテキスト]タブに切り替えて入力しました

[ビジュアル]タブに戻すと、アイコンが表示されました!

STEP2: トグルボックスにショートコードを貼り付ける

  1. 記事の編集画面でトグルボックスを挿入します。
  2. ツールバーの(テンプレート)のプルダウンリストから、登録したテンプレートを選択します。

  3. トグルボックスの色を変更する場合は、サイドバーで「ボーダー色」のカラーパレットを使って変更できます。

 編集画面ではショートコードで見えています。

 サイトを表示すると、アイコンフォントが表示されています。

完成サンプル

せっかくなので、コード系のアイコンを覚え書き

 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>

Cocoon

高速かつ高い安定性を誇る高性能レンタルサーバー【エックスサーバー】は、サイト運営に便利な機能が盛りだくさん。長年のサーバー運用実績を誇る安心・安全のレンタルサーバーです。

なんと!エックスサーバーと人気テーマCocoonが提携しました。

スポンサーリンク
スポンサーリンク
ぱそびば
タイトルとURLをコピーしました