![](https://cxg-design.jp/wp-content/uploads/2024/02/5417e816d0f224a9551119a2e788dcd7.png)
タイムライン作成プラグインCool Timelineで、ヒストリーを作成
Webサイトでは、会社の歴史や、個人の経歴などを紹介するページがあります。今回は、タイムライン作成プラグイン、Cool Timelineで、ヒストリーを作成します。
![](https://cxg-design.jp/wp-content/uploads/2024/02/39c6cc5d1e3c765e884d103f4256d05f.png)
出典 : Cool Timeline
今回のDEMOでは、古いヒストリーを上に、スクロールしていくと、新しいヒストリーが表示されるようにしています。PCでは、2カラムで、左右交互に投稿内容が表示され、SPでは、1カラムで表示されます。
ヒストリー作成
左サイドバーから、 Timeline Addons>Add New Storyをクリックします。
まず、タイトルを入力します。「メディアを追加」をクリックし、メディアライブラリから画像を選択し、テキスト欄に挿入します。画像の下に、テキストを入力します。今回のDEMOは、白抜き文字なので、編集モードを「ビジュアル」に変更してテキストを選択し、テキスト色>カスタム…をクリックして、薄いグレー(#eeeeee) に設定します。
![](https://cxg-design.jp/wp-content/uploads/2024/02/f90daedbe2d13c51521b734a517abc52.png)
Timeline Addons>Add New Storyをクリック
![](https://cxg-design.jp/wp-content/uploads/2024/02/e8d69ebafcade5837585b9dec21799c7.png)
タイトルを入力し、「メディアを追加」をクリックし画像を挿入。テキストを入力後選択し、テキスト色>カスタム…をクリック。
![](https://cxg-design.jp/wp-content/uploads/2024/02/5e7f41c56e81a725a81a253852291c26.png)
#eeeeeeに設定
「Story Date / Year」から、ヒストリーの年月日をカレンダーから選択します。「Story image size」の設定を「Full」にします。「公開」ボタンをクリックして保存します。
![](https://cxg-design.jp/wp-content/uploads/2024/02/78773a1c21a7b13e063a59c8a596be3f.png)
「Story Date / Year」から、年月日を設定。
![](https://cxg-design.jp/wp-content/uploads/2024/02/3f63aaeab0097a5f012b3478aae08520.png)
「Story image size」はFullに設定
![](https://cxg-design.jp/wp-content/uploads/2024/02/f34bf64c8bd212c62cc8eb5692f7915b.png)
「公開」をクリックし保存。
これで、1つ目のヒストリーの作成の終了です。左サイドバーTimeline Addons>Add New Storyをクリックし、残りのヒストリーも同じように、年月日を変えて作成します。
![](https://cxg-design.jp/wp-content/uploads/2024/02/58a80ef331acc7cab4bb8bd198451e35.png)
残りのヒストリーを年月日を変えて作成
Timeline Story Setting
全てのヒストリーを作成したら、Timeline Addons>Timeline Story Settingをクリックし、スタイルの設定をしていきます。「General Setting」から、今回のデザインの設定値を紹介していきます。
GENERAL SETTINGS
![](https://cxg-design.jp/wp-content/uploads/2024/02/9dbef72722cca690f00762c9d7dafb19.png)
今回は、ヒストリー全体のタイトルは設定しないので、空欄のままにしておきます。シングルページにリンクしないので、「Display read more?」はNoにチェックを入れます。西暦マークを入れないので、「Year Label」をHIDEに設定します。
項目 | 設定値 |
---|---|
Timeline Title | 空欄 |
Content Length | 100 |
Display read more? | No |
Year Label | HIDE |
STYLE SETTINGS
![](https://cxg-design.jp/wp-content/uploads/2024/02/47b6dbd85332cc25d000b442755be475.png)
タイムラインのボーダーや、タイトルなどを全て#ffffffに設定します。
項目 | 設定値 |
---|---|
Story Background Color | #ffffff |
Circle Color | #ffffff |
Line Color | #ffffff |
First Color | #ffffff |
Second Color | #ffffff |
TYPOGRAPHY SETINGS
![](https://cxg-design.jp/wp-content/uploads/2024/02/fcf84a507145bbc94f949efb81f6c982.png)
年月日、タイトル、コンテンツの文字設定を行います。「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」ブロックを挿入します。これで、タイムラインは表示されますが、右サイドバーの設定項目で、デザインを変更していきます。
![](https://cxg-design.jp/wp-content/uploads/2024/02/9317b628c423f03a92665901ad051b76.png)
設置したい場所に「Cool Timeline Shortcode」ブロックを挿入
General
![](https://cxg-design.jp/wp-content/uploads/2024/02/f4934f153a868cc00ba8c6cab04f281d.png)
ブロックを選択し、右サイドバーのブロック>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
![](https://cxg-design.jp/wp-content/uploads/2024/02/66a792b6ac645345e7cad5b888b0119c.png)
「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サイト作成のご依頼は、コンタクトフォームよりよろしくお願いします。