Cool Timeline Proで、コンパクトレイアウトのタイムラインを作成
以前のBLOGで、Cool Timelineの紹介をしました。しかし、無料版では、タイムラインが1つしか作成できないとのことで、Pro版を有効にしました。今回は、Pro版でコンパクトなタイムラインを作成します。
出典 : Cool Timeline
今回のDEMOは、3種のデザインのコンパクトタイムラインを作成しました。
1つ目がライト、2つ目がダーク、3つ目がポップアップです。全て、上下のタイムラインの隙間が詰まっているので、省スペースで配置することができます。SPでは、ストーリーが、全て右サイドに表示されます。
ストーリー作成
ストーリー作成方法は、Pro版になっても変更ありませんが、カテゴリーを作成し、設定することで、タイムライン毎にストーリーを選ぶことができます。
今回は、以前のBLOGと同じく、画像と文字のみのストーリーを作成します。
左サイドバーから、 Timeline Addons＞Add New Storyをクリックします。
まず、タイトルを入力します。メディアを追加をクリックし、メディアライブラリから画像を選択し、テキスト欄に挿入します。画像の下に、テキストを入力します。
CategoriesのAdd New Itemをクリックし、カテゴリーを作成。Categoriesの作成したカテゴリーにのみチェックを入れます。
Timeline Setting
タイムラインの文字スタイルなどの設定を行います。尚、General Settingはデフォルトのままです。
Style Setting
文字、タイムラインは黒を設定しています。今回は、ブロックエディターで、色を変更するので、あくまで、デフォルト設定になります。
| 項目 | 設定値 |
|---|---|
| Story Background Color | Reba(255,255,255,0) |
| Content Font Color | #000000 |
| Story Title Color | #000000 |
| Year Background Color | #000000 |
| Year Label Color | #ffffff |
| Line Color | #000000 |
| Line Fitting Color | #000000 |
| First Color | #000000 |
| Second Color | #000000 |
Typography Setings
日付、タイトル、本文の文字の大きさの変更を行います。文字サイズは、基本ここでしか設定できません。
| 項目 | 設定値 |
|---|---|
| Font Family | Noto Sans JP |
| Font Style | Normal 400 |
| Font Size | Story Date：20px Story Title：22px Story Content：16px |
| Line Height | Story Date：21px Story Title：26px Story Content：空欄 |
| Letter Spacing | Story Date：空欄 Story Title：1px Story Content：1px |
Timeline Settingは全てのタイムラインで共通
タイムラインは、カテゴリー分けして、いくつも作成できますが、Timeline Settingは共通になります。
設置
Story Timeline Shortcodeブロックを、設置したい場所に挿入します。ブロックエディターで、デザインを変更して3つのコンパクトタイムラインを作成していきます。
General
まず、カテゴリーを選択します。これで、カテゴリー設定したストーリーのみ表示されます。
コンパクトレイアウトにするため、SELECT LAYOUTSをCompact Layoutに設定します。SELECT DESIGNSでデザインを変更していきます。SELECT SKINのセレクターには、Default（Typography Setingsで設定したスタイル）の他にLight、Darkがあり、文字やバックグラウンドの色を変更できます。
| 項目 | 設定値 |
|---|---|
| SELECT LAYOUT | Compact Layout |
| SELECT DESIGNS | ライト：Classic Design ダーク：Default ポップアップ：Minimal Design |
| SELECT SKIN | ライト：Light ダーク：Dark ポップアップ：Light |
| TIMELINE BASED ON | Default |
| STORIES DESCRIPTION? | Full |
| STORIES PER PAGE | 10 |
Advanced
日付のスタイルや、並び順などを設定していきます。
| 項目 | 設定値 |
|---|---|
| STORIES ORDER? | ASC |
| STORIES DATE? | Show |
| DATE FORMATS | Y-m-d |
| DISPLAY ICONS(BY DEFAULT IS DOT) | Dot |
| PAGINATION SETTINGS | Default |
| SHOW CATEGORY FILTERS | No |
| YEAR NAVIGATION SETTING | Hide |
| LINE FILLING SETTINGS? | False |
| DISPLAY LEAD MORE? | Hide |
| ANIMATION | None |
以上で、今回の説明は終了です。Pro版はサイトに合わせて、デザインを選ぶことができるのでいいですね。また、当サイトABOUTページにも経歴のところにタイムラインを入れたので、合わせてご覧ください。
