WordPress Tips

Affinger タイムライン・ステップの確認

2022-10-15

Affinger タイムライン・ステップの確認

レシピや物事の流れを時系列で説明するときに役に立つデザインにタイムラインとステップがあります。

タイムラインは左に●とラインがついたシンプルなタイプ。ステップはStep1,Step2,Step3・・・のようにステップNoをつけながらわかりやすく流れを説明できます。

使う時は、クラシックブロックかショートコードで挿入します。

タイムライン(カウント)

左の丸に数字が入っているタイプ。

クラシックブロック>レイアウト>タイムライン(カウント)>基本


  • 設定アプリ

    設定アプリから「メール」を選択


  • 「アカウント」選択

    アカウントを追加


  • その他を選択

    メールアカウントを追加を選択

  • 新規アカウントの入力

    名前、メールアドレス、パスワードを入力

  • 設定完了

[st-timeline myclass="st-timeline-count" add_style=""]
[st-timeline-list text="設定アプリ" url="" myclass="" fontsize="" fontweight="bold" color="" bgcolor="" center=""]
設定アプリから「メール」を選択
[/st-timeline-list]
[st-timeline-list text="「アカウント」選択" url="" myclass="" fontsize="" fontweight="bold" color="" bgcolor="" center=""]
アカウントを追加
[/st-timeline-list]
[st-timeline-list text="その他を選択" url="" myclass="" fontsize="" fontweight="bold" color="" bgcolor="" center=""]
メールアカウントを追加を選択
[/st-timeline-list]
[st-timeline-list text="新規アカウントの入力" url="" myclass="" fontsize="" fontweight="bold" color="" bgcolor="" center=""]
名前、メールアドレス、パスワードを入力
[/st-timeline-list]
[st-timeline-list text="設定完了" url="" myclass="" fontsize="" fontweight="bold" color="" bgcolor="" center=""]
[/st-timeline-list]
[/st-timeline]

タイムライン 基本

●とラインだけのシンプルなタイプ、複数行になった場合、1行目の位置に●がきます。


  • ここに見出しテキスト

    ここにコンテンツ


  • ここに見出しテキスト

    ここにコンテンツ


  • ここに見出しテキスト

    ここにコンテンツ


[st-timeline myclass="" add_style=""]
[st-timeline-list text="ここに見出しテキスト" url="" myclass="" fontsize="" fontweight="bold" color="" bgcolor="" center=""]

ここにコンテンツ

[/st-timeline-list]
[st-timeline-list text="ここに見出しテキスト" url="" myclass="" fontsize="" fontweight="bold" color="" bgcolor="" center=""]

ここにコンテンツ

[/st-timeline-list]
[st-timeline-list text="ここに見出しテキスト" url="" myclass="" fontsize="" fontweight="bold" color="" bgcolor="" center=""]

ここにコンテンツ

[/st-timeline-list]
[/st-timeline]

タイムライン基本(センター)

●とラインだけの基本タイプ、複数行になった場合、縦中央に●がきます。


  • ここに見出しテキスト

    ここにコンテンツ


  • ここに見出しテキスト

    ここにコンテンツ


  • ここに見出しテキスト

    ここにコンテンツ


[st-timeline myclass="" add_style=""]
[st-timeline-list text="ここに見出しテキスト" url="" myclass="" fontsize="" fontweight="bold" color="" bgcolor="" center="on"]

ここにコンテンツ

[/st-timeline-list]
[st-timeline-list text="ここに見出しテキスト" url="" myclass="" fontsize="" fontweight="bold" color="" bgcolor="" center="on"]

ここにコンテンツ

[/st-timeline-list]
[st-timeline-list text="ここに見出しテキスト" url="" myclass="" fontsize="" fontweight="bold" color="" bgcolor="" center="on"]

ここにコンテンツ

[/st-timeline-list]
[/st-timeline]

タイムライン基本(ステップ)

●とラインだけの基本タイプ、1行目に「Step no」が入ります。(文字は変更可能)


  • step.1

    ここにコンテンツ


  • step.2

    ここにコンテンツ


  • step.3

    ここにコンテンツ


[st-timeline myclass="" add_style=""]
[st-timeline-list text="step.1" myclass="" fontsize="" fontweight="bold" color="#9E9E9E" bgcolor="" center=""]

ここにコンテンツ

[/st-timeline-list]
[st-timeline-list text="step.2" myclass="" fontsize="" fontweight="bold" color="#9E9E9E" bgcolor="" center=""]

ここにコンテンツ

[/st-timeline-list]
[st-timeline-list text="step.3" myclass="" fontsize="" fontweight="bold" color="#9E9E9E" bgcolor="" center=""]

ここにコンテンツ

[/st-timeline-list]
[/st-timeline]

タイムラインセンター(ステップ)


  • step.1

    ここにコンテンツ


  • step.2

    ここにコンテンツ


  • step.3

    ここにコンテンツ


[st-timeline myclass="" add_style=""]
[st-timeline-list text="step.1" myclass="" fontsize="" fontweight="bold" color="#9E9E9E" bgcolor="" center="on"]

ここにコンテンツ

[/st-timeline-list]
[st-timeline-list text="step.2" myclass="" fontsize="" fontweight="bold" color="#9E9E9E" bgcolor="" center="on"]

ここにコンテンツ

[/st-timeline-list]
[st-timeline-list text="step.3" myclass="" fontsize="" fontweight="bold" color="#9E9E9E" bgcolor="" center="on"]

ここにコンテンツ

[/st-timeline-list]
[/st-timeline]

タイムライン ブログカード

記事IDを指定してブログリンクを作成できます。

[st-timeline myclass="" add_style=""]
[st-timeline-list myclass="" bgcolor="" center="on"][st-card myclass="" id="記事ID" pc_height="" name="" bgcolor="" color="" readmore="on" thumbnail="on"][/st-timeline-list]
[st-timeline-list myclass="" bgcolor="" center="on"][st-card myclass="" id="記事ID" pc_height="" name="" bgcolor="" color="" readmore="on" thumbnail="on"][/st-timeline-list]
[st-timeline-list myclass="" bgcolor="" center="on"][st-card myclass="" id="記事ID" pc_height="" name="" bgcolor="" color="" readmore="on" thumbnail="on"][/st-timeline-list]
[/st-timeline]

ステップ

ステップごとにショートコードを挿入してく形。

テキストパーツ>ステップ

step
1
ここにタイトル

[st-step step_no="1"]ここにタイトル[/st-step]

見た目のカスタマイズはカスタマイザーで。

オプション(その他)

ステップ / ポイント(SC)

-WordPress Tips
-