タイムライン作成プラグインCool Timelineで、ヒストリーを作成

Webサイトでは、会社の歴史や、個人の経歴などを紹介するページがあります。今回は、タイムライン作成プラグイン、Cool Timelineで、ヒストリーを作成します。

今回のDEMOでは、古いヒストリーを上に、スクロールしていくと、新しいヒストリーが表示されるようにしています。PCでは、2カラムで、左右交互に投稿内容が表示され、SPでは、1カラムで表示されます。

ヒストリー作成

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

まず、タイトルを入力します。「メディアを追加」をクリックし、メディアライブラリから画像を選択し、テキスト欄に挿入します。画像の下に、テキストを入力します。今回のDEMOは、白抜き文字なので、編集モードを「ビジュアル」に変更してテキストを選択し、テキスト色＞カスタム…をクリックして、薄いグレー(#eeeeee) に設定します。

「Story Date / Year」から、ヒストリーの年月日をカレンダーから選択します。「Story image size」の設定を「Full」にします。「公開」ボタンをクリックして保存します。

これで、1つ目のヒストリーの作成の終了です。左サイドバーTimeline Addons＞Add New Storyをクリックし、残りのヒストリーも同じように、年月日を変えて作成します。

Timeline Story Setting

全てのヒストリーを作成したら、Timeline Addons＞Timeline Story Settingをクリックし、スタイルの設定をしていきます。「General Setting」から、今回のデザインの設定値を紹介していきます。

GENERAL SETTINGS

今回は、ヒストリー全体のタイトルは設定しないので、空欄のままにしておきます。シングルページにリンクしないので、「Display read more?」はNoにチェックを入れます。西暦マークを入れないので、「Year Label」をHIDEに設定します。

項目	設定値
Timeline Title	空欄
Content Length	100
Display read more?	No
Year Label	HIDE

STYLE SETTINGS

タイムラインのボーダーや、タイトルなどを全て#ffffffに設定します。

項目	設定値
Story Background Color	#ffffff
Circle Color	#ffffff
Line Color	#ffffff
First Color	#ffffff
Second Color	#ffffff

TYPOGRAPHY SETINGS

年月日、タイトル、コンテンツの文字設定を行います。「Font Family」は、Noto Sans JPを選択します。「Line Height」は、「Font Size」より大きく設定します。

項目	設定値
Font Family	Noto Sans JP
Font Style	Normal 400
Font Size	Story Date : 20px Story Title : 24px Story Content : 16px
Line Height	Story Date : 21px Story Title : 28px Story Content : 空欄
Letter Spacing	Story Date : 空欄 Story Title : 1px Story Content : 1px

「Timeline Setting」での設定はこれで終了です。残りの設定は、投稿編集ページで、ブロックを設置した後、行っていきます。

設置

まず、タイムラインを設置したい場所に、ブロックエディターから「Cool Timeline Shortcode」ブロックを挿入します。これで、タイムラインは表示されますが、右サイドバーの設定項目で、デザインを変更していきます。

設置したい場所に「Cool Timeline Shortcode」ブロックを挿入

General

ブロックを選択し、右サイドバーのブロック＞Cool Timeline Shortcode＞Generalをクリックします。「SELECT LAYOUT」からSimple Layoutを選択します。「SKIN」をCleanに設定します。「STORIES DESCRIPTION?」はFull Textに変更します。

項目	設定値
SELECT LAYOUT	Simple Layout
SKIN	Clean
STORIES DESCRIPTION?	Full Text
DISPLAY PARS PAGE?	10

Advanced

「STORIES ORDER?」をASCにします。これによって、上から年代の古いヒストリーが表示されます。「DATE FORMATS」をY-m-dに設定し、年月日の順に表示されるようにします。

項目	設定値
STORIES ORDER?	ASC
DATE FORMATS	Y-m-d
DISPLAY ICONS(BY DEFAULT IS DOT)	Dot
ANIMATION	なし

以上でCool Timelineの説明は終了です。デザインは他にも設定出来ますが、今回はオススメのシンプルなデザインにしています。社歴ページは、会社概要などと同じで、固定ページになり、通常更新しないページになります。しかし、Cool Timelineで作成すれば、Timeline Addons＞Add New Storyから、新しいヒストリーを追加する事が出来ます。

Webサイト作成のご依頼は、コンタクトフォームよりよろしくお願いします。