AFFINGER6では評価スターや一部のアイコンをショートコードで設定することができます。
ショートコードはツールバーから簡単に使用することができるようになっており、クラシックエディタ及びブロックエディタどちらでも使用できます。
アフィンガースタジオではブロックエディタを推奨しているので、この記事ではブロックエディタで解説しています。
AFFINGER6でブロックエディタを初めて使う方は「AFFINGER6｜ブロックエディタを使いやすいように初心者向けに設定する」で設定しておきましょう。
今回はAFFINGER6のショートコードにの使い方を解説します。
AFFINGER6ショートコードの使い方
AFFINGER6のショートコードは記事投稿画面のツールバーから使うことができます。
コードから簡単に記事に貼り付けることができるようになっています。
アイコンはもちろん、評価スターや改行、オリジナルショートコードもここから呼び出すことができます。
ツールバーは上部に固定されていないと使いにくいため、上記の画像のようになっていない場合は設定から変更することができます。
ショートコード一覧
ツールバーショートコード
| 項目 | ショートコード |
|---|---|
| [star5] | |
| [star45] | |
| [star4] | |
| [star35] | |
| [star3] | |
| [star2] | |
| [star1] | |
| スマホのみ改行 | [st-br line_height=""] |
| [st-i class="st-svg-check" add_style=""] | |
| [st-i class="st-svg-circle-w" add_style=""] | |
| [st-i class="st-svg-circle-o" add_style=""] | |
| [st-i class="st-svg-times" add_style=""] | |
| [st-i class="st-svg-triangle" add_style=""] |
バージョンにより表示できるショートコードは変わります。
その他のショートコード
| 項目 | ショートコード |
|---|---|
| 検索フォーム | [検索] |
| 下矢印 | [下矢印] |
| 三角（下矢印） | [st-under-t color="#000"] |
| PC閲覧時のみに表示 | [pc] PCのみに表示 [/pc] ※wp_is_mobileによる分岐 |
| PC閲覧時には表示しない | [nopc] PCには表示しない [/nopc] ※wp_is_mobileによる分岐 |
| 指定したカテゴリーIDのみに表示 | [catonly cat="カテゴリーID"] 指定したカテゴリーIDのみに表示 [/catonly] |
| フロントページにのみに表示 | [no-frontonly]フロントページにのみ非表示[/no-frontonly] |
| 固定ページのみに表示 | [pageonly] 固定ページのみに表示 [/pageonly] |
| コメントアウト | [st-out]非表示にしたい内容[/st-out] |
| ウィジェットで作成したアドセンスコード* | [adsense] |
アイコンをカスタマイズ
ショートコードやアイコンはカスタマイズすることができます。
add_style属性でCSSが記載してカスタマイズをしてみましょう！
| アイコン | カスタムショートコード |
|---|---|
| [st-i class="st-svg-circle-w" add_style="font-size:3em;color:#FF9800;"] | |
| [st-i class="st-svg-times" add_style="font-size:3em;color:#03A9F4;"] |
サンプルアイコンでは「フォント3em カラー変更」のカスタマイズをしています。
表やグラフに使いやすいと思うのでよく使うものはカスタマイズしてマイブロックやパターンに登録しておきましょう。
