Cocoon iconショートコードの使い方｜Font Awesomeアイコンを本文装飾に使う方法
Cocoon iconショートコードの全体像
- Font Awesomeアイコンを本文中に表示できる
- 補足・注意・チェック項目の目印に使える
- Cocoon設定のFont Awesomeバージョン確認が必要
文章だけでは見分けにくい「補足」「注意」「チェック」「リンク」などにアイコンを添えると、読者が情報の種類を判断しやすくなります。
| 使う場所 | 向いているアイコン | 効果 |
|---|---|---|
| 補足 | info-circle | 追加情報だと伝わりやすい |
| 注意 | exclamation-triangle | 重要な注意点を見つけやすい |
| チェック | check | 確認項目を読みやすくする |
| リンク | external-link-alt | 外部ページや公式ページを示しやすい |
実用例
Cocoon装飾のボックス内にアイコンを1つ添えると、補足・注意・チェックの違いが視覚的に伝わりやすくなります。
基本の書き方
class属性にFont Awesomeのクラス名を指定する- 実際に使う場合は
形式にする - 記事内で例を見せる場合は角括弧をエスケープする
記事本文で実際に使う場合は、次のように記述します。
| 目的 | 表示用の書き方 | 意味 |
|---|---|---|
| チェック | [icon class="fas fa-check"] |
確認済み、ポイント |
| 補足 | [icon class="fas fa-info-circle"] |
補足情報 |
| 注意 | [icon class="fas fa-exclamation-triangle"] |
注意点 |
| 外部リンク | [icon class="fas fa-external-link-alt"] |
公式ページ、外部ページ |
注意
上の表では、ショートコードが実行されないように表示用としてエスケープしています。実際に使う場合は、[を[、]を]に戻します。
Font Awesome 4と5の違い
- Font Awesome 4と5ではクラス名が違う
- Cocoon設定のサイトアイコンフォントを確認する
- 表示されない場合はバージョン違いを疑う
Font Awesome 4と5では、クラス名の書き方が異なります。使っている設定に合わせて、faまたはfasを使い分けます。
| 種類 | 書き方の例 | 確認場所 |
|---|---|---|
| Font Awesome 4 | [icon class="fa fa-check"] |
Cocoon設定のサイトアイコンフォント |
| Font Awesome 5 | [icon class="fas fa-check"] |
Cocoon設定のサイトアイコンフォント |
| 表示されない場合 | クラス名や設定を確認 | Font Awesomeのバージョン違いを疑う |
補足
新しい記事で使う前に、テスト投稿や既存記事の一部で表示確認すると安心です。アイコンが四角や空白になる場合は、クラス名かFont Awesome設定を確認します。
Cocoon装飾と組み合わせる使い方
- ボックス装飾と組み合わせると意味が伝わりやすい
- 補足・注意・ポイントの先頭に1つだけ置く
- 装飾の役割をアイコンで補助する
注意ボックス、補足ボックス、白抜きボックスの中に、意味を示すアイコンを1つだけ入れると、装飾の役割が伝わりやすくなります。
| 組み合わせ | 使い方 | 向いている内容 |
|---|---|---|
| 白抜きボックス + check | ポイントの先頭に入れる | 章の要点、確認項目 |
| information-box + info-circle | 補足文の先頭に入れる | 追加情報、前提条件 |
| alert-box + exclamation-triangle | 注意文の先頭に入れる | 設定変更、SEO影響、バックアップ |
| リンク文 + external-link-alt | 外部リンクの近くに入れる | 公式ページ、資料ページ |
実用例
「注意」「補足」「ポイント」のように、読者に判断してほしい情報だけにアイコンを使うと、本文がすっきり見えます。
記事内で使いやすいアイコン例
- 基本アイコンを少数に絞る
- チェック・補足・注意・検索・タグが使いやすい
- サイト内で使うアイコンを固定すると統一感が出る
まずは、チェック、補足、注意、リンク、検索、タグ、カテゴリなど、記事運用でよく使うアイコンから始めると扱いやすくなります。
| 用途 | Font Awesome 5の例 | 使う場面 |
|---|---|---|
| チェック | fas fa-check |
ポイント、確認済み |
| 補足 | fas fa-info-circle |
補足、豆知識 |
| 注意 | fas fa-exclamation-triangle |
注意、警告 |
| 検索 | fas fa-search |
検索、確認 |
| タグ | fas fa-tags |
タグ整理 |
| フォルダ | fas fa-folder |
カテゴリ整理 |
補足
アイコンは記事ごとに増やすより、サイト内でよく使う種類を決めておくと統一感が出ます。
使いすぎを避ける基準
- 1つのボックスに1アイコンまでを目安にする
- 重要箇所だけに使う
- 装飾が主役にならないようにする
文章の先頭すべてにアイコンを付けると、重要な情報が逆に目立たなくなります。読者に注意してほしい場所だけに使います。
| 状態 | 読みやすさ | おすすめ |
|---|---|---|
| 重要箇所だけに使う | 読みやすい | 補足、注意、チェックに限定する |
| 各行に使う | 少しうるさく見える | リスト装飾だけにする |
| 複数種類を混ぜる | 意味が分かりにくい | 用途ごとに固定する |
| 色付き装飾と併用しすぎる | 装飾が目立ちすぎる | ボックスかアイコンのどちらかを主役にする |
注意
アイコンは本文を補助するためのものです。SEO目的で無理に増やしても効果があるとは限らないため、読者の理解を助ける場所に絞ります。
Codexで記事作成するときの指定方法
- 使う場所と使わない場所を先に決める
- 補足・注意・チェックの先頭だけに使う
- コード例は実行されないようにエスケープする
たとえば、見出し直下のポイントには白抜きボックス、テーブル下の注意にはalert-box、補足にはinformation-boxを使い、必要な箇所だけアイコンを入れる形です。
| 依頼内容 | 指定例 | 効果 |
|---|---|---|
| 補足に使う | 補足ボックスの先頭だけにinfoアイコンを入れる | 情報の種類がわかりやすい |
| 注意に使う | 注意ボックスの先頭だけにwarningアイコンを入れる | 重要箇所が目立つ |
| 表示用コードを書く | ショートコード例はHTMLエスケープする | 記事内で勝手に実行されにくい |
| 使いすぎを防ぐ | 1見出しに最大1〜2個まで | 本文が見やすい |
実用例
「Cocoon装飾記事では、補足・注意・チェックの先頭だけにiconショートコードを使う」と決めると、サイト内の見た目が揃いやすくなります。
Cocoon装飾全体の使い方は、Cocoon装飾の使い方でご紹介しています。Cocoonテーマ全体の特徴は、WordPressテーマCocoonとはも参考になります。
公式情報・参考ページ
- Cocoon公式ページで仕様を確認する
- Font Awesomeのバージョン設定も確認する
- 表示されない場合はクラス名と設定を見直す
| 公式ページ | 確認できる内容 |
|---|---|
| Cocoon iconショートコード | iconショートコードの基本とFont Awesomeの指定方法 |
| Cocoon アイコンボックス・案内ボックス | ボックス系装飾の表示サンプル |
| Cocoon 白抜きボックス | 白抜きボックスの表示サンプル |
| Cocoonマニュアル | Cocoon全体の設定方法 |