以前のBLOGで、Cool Timelineの紹介をしました。しかし、無料版では、タイムラインが1つしか作成できないとのことで、Pro版を有効にしました。今回は、Pro版でコンパクトなタイムラインを作成します。

 出典 : Cool Timeline

今回のDEMOは、3種のデザインのコンパクトタイムラインを作成しました。

COMPACT TIMELINE

TIMELINE

1つ目がライト、2つ目がダーク、3つ目がポップアップです。全て、上下のタイムラインの隙間が詰まっているので、省スペースで配置することができます。SPでは、ストーリーが、全て右サイドに表示されます。

ストーリー作成

ストーリー作成方法は、Pro版になっても変更ありませんが、カテゴリーを作成し、設定することで、タイムライン毎にストーリーを選ぶことができます。

今回は、以前のBLOGと同じく、画像と文字のみのストーリーを作成します。

左サイドバーから、 Timeline Addons＞Add New Storyをクリックします。

まず、タイトルを入力します。メディアを追加をクリックし、メディアライブラリから画像を選択し、テキスト欄に挿入します。画像の下に、テキストを入力します。

CategoriesのAdd New Itemをクリックし、カテゴリーを作成。Categoriesの作成したカテゴリーにのみチェックを入れます。

Timeline Setting

タイムラインの文字スタイルなどの設定を行います。尚、General Settingはデフォルトのままです。

Style Setting

文字、タイムラインは黒を設定しています。今回は、ブロックエディターで、色を変更するので、あくまで、デフォルト設定になります。

Typography Setings

日付、タイトル、本文の文字の大きさの変更を行います。文字サイズは、基本ここでしか設定できません。

設置

Story Timeline Shortcodeブロックを、設置したい場所に挿入します。ブロックエディターで、デザインを変更して3つのコンパクトタイムラインを作成していきます。

General

まず、カテゴリーを選択します。これで、カテゴリー設定したストーリーのみ表示されます。

コンパクトレイアウトにするため、SELECT LAYOUTSをCompact Layoutに設定します。SELECT DESIGNSでデザインを変更していきます。SELECT SKINのセレクターには、Default（Typography Setingsで設定したスタイル）の他にLight、Darkがあり、文字やバックグラウンドの色を変更できます。

Advanced

日付のスタイルや、並び順などを設定していきます。

以上で、今回の説明は終了です。Pro版はサイトに合わせて、デザインを選ぶことができるのでいいですね。また、当サイトABOUTページにも経歴のところにタイムラインを入れたので、合わせてご覧ください。