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

  • Plugin

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

     出典 : Cool Timeline

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

    HISTORY

    TIMELINE

    ヒストリー作成

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

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

    Timeline Addons＞Add New Storyをクリック

    タイトルを入力し、「メディアを追加」をクリックし画像を挿入。テキストを入力後選択し、テキスト色＞カスタム…をクリック。

    #eeeeeeに設定

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

    「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 Length100
    Display read more?No
    Year LabelHIDE

    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 FamilyNoto Sans JP
    Font StyleNormal 400
    Font SizeStory Date : 20px
    Story Title : 24px
    Story Content : 16px
    Line HeightStory Date : 21px
    Story Title : 28px
    Story Content : 空欄
    Letter SpacingStory 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 LAYOUTSimple Layout
    SKINClean
    STORIES DESCRIPTION?Full Text
    DISPLAY PARS PAGE?10

    Advanced

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

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

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

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

    You may also like