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ページにも経歴のところにタイムラインを入れたので、合わせてご覧ください。