AFFINGER

AFFINGER5

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

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

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

この記事のポイント

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

ステップの例

 

 

 

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

 

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

ステップ説明

  • タグ > テキストパーツ > ステップ を クリック
  • ステップ用のショートコードを表示

 

 

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

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

 

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

ステップ表示例

 

 

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

STEP4

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

 

ココがポイント

[ st-step step_no="1"] ここに表示したいタイトル文字を入力 [ /st-step]

 

STEP5

 

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

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

 

ポイント

WINGは大きく分けて次の3つでサイトをデザイン、管理します。

  • テーマ管理
  • カスタマイザー
  • ウィジェット

色やデザインの設定は、カスタマイザーで設定することが多いです

 

スタイルの設定手順は

  1. カスタマイザーからメニューを表示
  2. メニューで色とスタイルを設定

です。

 

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

カスタマイザーを開く

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

 

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

 

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

スタイルメニュー

 

 

 

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

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

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

例えば

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

STEP12

Step13

 

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

STEP14

 

 

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

まとめ

 

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

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

 

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

 

AFFINGER
【アフィンガー/AFFINGER5】トップページをカード型で表示する方法

続きを見る

AFFINGER
アフィンガー5のメリット・デメリットを解説|ブロガーの評判は?

続きを見る

 

今がチャンス

当サイトからAFFINGER5を申し込んだ方

今なら期間限定で次のプラグインが無料でついてきます。

2,500円の「クレジット削除プラグイン」

4,980円の「STINGERタグ管理プラグイン 3」

いつまで配布できるか未定ですので申し込みはお早めに!

 

稼ぎたいなら今すぐAFFINGER5を導入しよう

-AFFINGER5

© 2021 Door Blog (ドアブログ) Powered by AFFINGER5