広告 AFFINGER

AFFINGER5|タイムラインの使い方とカスタマイズ【簡単】

2020年5月9日

タイムライン

【20200327βアップデート】で、AFFINGER5にタイムラインを作成する機能が追加になりました。

AFFINGER大好きな僕にとって、このタイムライン機能はテンション爆上がりの待望の機能でした。

ここでは、タイムライン機能に関する以下のことについて紹介していきます。

  • 使い方
  • カスタマイズ方法
  • 使いどころ

 

こんな人のお役に立てる記事です。

小豆
小豆
AFFINGER5に「タイムライン」って機能が追加されたみたいだけど、どう使うの?
使い方もだけど、「使いどころ」や「カスタマイズ方法」についても知りたい。

タイムラインの使い方

早速ですが、まずは使い方の紹介から。

とは言っても、毎度のことですがAFFINGER5なら使い方は超簡単♪

ボタン一つで簡単にタイムライン機能を使うことができます。

タイムラインの使い方

タイムラインの使い方

タグレイアウトタイムライン


  • ここに見出しテキスト

    ここにコンテンツ


  • ここに見出しテキスト

    ここにコンテンツ


  • ここに見出しテキスト

    ここにコンテンツ


 

タイムライン機能を使うには、AFFINGERのバージョンが【20200327β以上】である必要があります。

アップデートがまだの人は、こちらの記事を参考にしてください。

AFFINGER5トップ画像
AFFINGERのアップデート方法【初めてでも簡単!図解で解説】

続きを見る

AFFINGER5に追加されたタイムラインの種類は8種類

今回AFFINGER5に追加された「タイムライン」には、大きく分類して2種類、細かく分類すると8種類ものデザインが用意されています。

大分類

  • タイムライン
  • タイムライン【カウント】

タイムライン

  • 基本
  • センター
  • 基本(ステップ)
  • センター(ステップ)
  • ブログカード

タイムライン【ステップ】

  • 基本
  • センター
  • ブログカード

 

大福
大福
それぞれのデザインを紹介していくよ!

 

タイムライン(5種類)

  • 基本

  • ここに見出しテキスト

    ここにコンテンツ


  • ここに見出しテキスト

    ここにコンテンツ


  • ここに見出しテキスト

    ここにコンテンツ


 

  • センター

点の位置がセンターになります。


  • ここに見出しテキスト

    ここにコンテンツ


  • ここに見出しテキスト

    ここにコンテンツ


  • ここに見出しテキスト

    ここにコンテンツ


 

  • 基本(ステップ)

  • step.1

    ここにコンテンツ


  • step.2

    ここにコンテンツ


  • step.3

    ここにコンテンツ


 

  • センター(ステップ)

  • step.1

    ここにコンテンツ


  • step.2

    ここにコンテンツ


  • step.3

    ここにコンテンツ


 

  • ブログカード

 

タイムライン【カウント】

  • 基本

  • ここに見出しテキスト

    ここにコンテンツ


  • ここに見出しテキスト

    ここにコンテンツ


  • ここに見出しテキスト

    ここにコンテンツ


 

  • センター

  • ここに見出しテキスト

    ここにコンテンツ


  • ここに見出しテキスト

    ここにコンテンツ


  • ここに見出しテキスト

    ここにコンテンツ


 

  • ブログカード

5つのカスタマイズ方法

タイムラインは、表示されたコードをいじることで好みのカスタマイズをすることができます。

 shortcode
[st-timeline-list text="見出しテキスト" url="リンクURL" myclass="CSSクラス" fontsize="文字サイズ(%)" fontweight="文字の太さ" color="文字の色" bgcolor="背景の色" center="リストの位置"]
ここにコンテンツ
[/st-timeline-list]

ここでは、5つのカスタマイズを紹介します。

 

タイムライン・カスタマイズ

  1. カラーを変更
  2. タイムラインごとに背景を指定
  3. 文字の大きさを調整
  4. 現在のステップを点滅
  5. タイムラインの行数を追加

 

カラーを変更

タイムラインのカラーは、カスタマイザーから簡単に変更ができます。

タイムラインカラー調節

WordPressメニュー外観カスタマイズオプションカラータイムライン

 

ちなみに初期設定のタイムラインのカラーはこんな感じ

デフォルトのタイムライン

僕は、以下のようにカラーを設定しています。


  • ここに見出しテキスト

    ここにコンテンツ


  • ここに見出しテキスト

    ここにコンテンツ


  • ここに見出しテキスト

    ここにコンテンツ


 

大福日記の設定

【ラインカラー】#8ad3fb 【カウントカラー】指定なし 【nowカラー】#f43a1d

【nowクラスの点滅】☑(点滅あり) 【背景色(※一括】指定なし

 

タイムラインごとに背景を指定

背景色はタイムラインごとに変更することができます。


  • ここに見出しテキスト

    ここにコンテンツ


  • ここに見出しテキスト

    ここにコンテンツ


  • ここに見出しテキスト

    ここにコンテンツ


 

背景色を指定するには、【bgcolor】にカラーコードを入力します。

 shortcode
[st-timeline-list text="ここに見出しテキスト" url="" myclass="" fontsize="" fontweight="bold" color="" bgcolor="ここにカラーコードを入力" center=""]
ここにコンテンツ
[/st-timeline-list]
大福
大福
カラーコードは、タグショートコード補助HTMLカラーコードから簡単に選択できるよ。

 

文字の大きさを調整

文字の大きさをタイムラインごとに設定することができます。


  • ここに見出しテキスト(文字サイズ:80)

    ここにコンテンツ


  • ここに見出しテキスト(文字サイズ:100)

    ここにコンテンツ


  • ここに見出しテキスト(文字サイズ:120)

    ここにコンテンツ


 

文字の大きさの変更は、【fontsize】で調整します。

「100」を基準にそれより大きくしたい場合は大きい数字(例:120)、小さくしたい場合は小さい数字(例:80)を入力します。

 shortcode
[st-timeline-list text="ここに見出しテキスト" url="" myclass="" fontsize="ここに数値を入力" fontweight="bold" color="" bgcolor="" center=""]
ここにコンテンツ
[/st-timeline-list]

 

現在のステップを点滅

任意のタイムラインを点滅させ「今ここ」をわかりやすく伝えることができます。


  • ここに見出しテキスト

    ここにコンテンツ


  • ここに見出しテキスト

    ここにコンテンツ


  • ここに見出しテキスト

    ここにコンテンツ


 

現在のステップを点滅させるには、【myclass】に「now」と入力します。

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

 

タイムラインの行数を追加

デフォルトのタイムラインは3つですが、行数は自由に増やすことができます。


  • ここに見出しテキスト

    ここにコンテンツ


  • ここに見出しテキスト

    ここにコンテンツ


  • ここに見出しテキスト

    ここにコンテンツ


  • ここに見出しテキスト

    ここにコンテンツ


 

👇コピペで使えます。





 shortcode
[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]
 shortcode
[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]
 shortcode
[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-list text="ここに見出しテキスト" url="" myclass="" fontsize="" fontweight="bold" color="" bgcolor="" center=""]
ここにコンテンツ
[/st-timeline-list]
[/st-timeline]

小豆
小豆
行数を追加するには、[st-timeline-list](ここにコンテンツ)[/st-timeline-list]を必要なだけ追加していけばいいんだね。

 

こんな時に便利!使いどころを3つ紹介

タイムラインの使いどころ

タイムラインの便利な使いどころを3つ紹介します。

タイムライン活用法

  1. 購入ステップの案内に
  2. 手順を伝えるステップに
  3. 順番を指定して特定の記事を読んでもらいたいときに

 

購入ステップの案内に


  • AFFINGER5公式サイトに移動

    公式サイトにて特徴や機能詳細、価格などを確認してください。


  • 購入ボタンをクリック

    内容を確認後、購入する場合は「購入ボタン」をクリックします。


  • WordPressにインストール

    ダウンロードしたAFFINGERファイルを、WordPressにインストールします。


 

手順を伝えるステップに

 

順番を指定して特定の記事を読んでもらいたいときに

 

まとめ:新機能「タイムライン」を使いこなそう

今回追加された「タイムライン機能」は、ブログやアフィリエイトサイト作りにはすごく便利な機能です。

早速自分のブログで使ってみて下さいね。

 

AFFINGER大好き!ドハマりしている僕は、この記事以外にもAFFINGERの便利な機能についての記事を書いています。

よかったら参考にしてみてください。

AFFINGER5関連の記事一覧はこちら

 

AFFINGER利用者向けオリジナル特典の販売

\ AFFINGER6にも対応済み /

オリジナル特典バナー

AFFINGERをすでに利用しているユーザー向けの「カスタマイズ&役立つテクニック」集です。

目的に合わせて、以下の2つを用意しました。

  • AFFINGER5利用者向けカスタマイズ集 9選
  • AFFINGER利用者向けカスタマイズ&役立つテクニック 14選

 

2022年1月1日より期間限定で割引販売いたします。
・利用者向けカスタマイズ集 9選:2,980円 → 2,480円
・カスタマイズ&役立つテクニック 14選 4,980円 → 3,980円

 

特典詳細ページへ移動する

Sponsored Links

  • この記事を書いた人

大福

ブロガー兼アフィリエイター歴5年目。
当ブログのアクセス数は月7万PVほど。
月に20万円ほどのブログ収入で、田舎でのんびりと暮らしています。
人懐っこい性格ですが、人見知りです。

-AFFINGER