【アフィンガー／AFFINGER5】ステップ表示の設定方法

手順を説明するときのステップを見やすくしたいなぁ

この記事は、アフィンガー５（Affinger5）を使ってステップをキレイに表示するための方法を解説します。

この記事のポイント

アフィンガー５のステップ機能を使うと次のような、手順を説明するための表示を簡単に作ることができます。

【アフィンガー５】ステップの入力方法

step
1ステップのショートコードを入力

step
2ステップを必要なだけコピペ

• ショートコード　[st_step step_no="1"][/st_step]　をコピペ
• [st_step step_no="◯"][/st_step]　数字を修正

こんな感じに表示されます。

step
3ステップ毎にタイトルを入力

各ステップに表示したいタイトル文字を入力していきます。

【アフィンガー５】ステップデザインの変更方法

ステップ表示の色と形の設定は　カスタマイザーメニューから変更することができます。

スタイルの設定手順は

です。

step
1カスタマイザーのメニューを開く

ダッシュボードから　外観　→　カスタマイズ　をクリックします。

オプションカラー　→　ステップ／ポイント　をクリック

ステップのデザイン設定メニューが開きます

step
2メニューで色とスタイルを設定する

設定できる項目は下記の５ポイントです。

1. ステップ数・ポイントの色
2. テキスト色
3. テキストの背景色
4. ボーダー色
5. 角を丸くする

例えば

①ステップ数・ポイントの色　で吹き出しの色を変更することができます。

⑤の角を丸くするのチェックを外すと角張った吹き出しに変更できます。

【アフィンガー５】ステップデザインのまとめ

この記事ではAFFINGER5（アフィンガー５）を使って　ステップの表示方法について解説しました。

実際にこの記事でもステップを使って解説しています。

AFFINGER5（アフィンガー５）は、見やすいサイトをとても簡単に作ることができます。