Cool Timeline Proで、コンパクトレイアウトのタイムラインを作成

  • Plugin

    • 以前のBLOGで、Cool Timelineの紹介をしました。しかし、無料版では、タイムラインが1つしか作成できないとのことで、Pro版を有効にしました。今回は、Pro版でコンパクトなタイムラインを作成します。

     出典 : Cool Timeline

    今回のDEMOは、3種のデザインのコンパクトタイムラインを作成しました。

    COMPACT TIMELINE

    TIMELINE

    1つ目がライト、2つ目がダーク、3つ目がポップアップです。全て、上下のタイムラインの隙間が詰まっているので、省スペースで配置することができます。SPでは、ストーリーが、全て右サイドに表示されます。

    ストーリー作成

    ストーリー作成方法は、Pro版になっても変更ありませんが、カテゴリーを作成し、設定することで、タイムライン毎にストーリーを選ぶことができます。

    今回は、以前のBLOGと同じく、画像と文字のみのストーリーを作成します。

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

    まず、タイトルを入力します。メディアを追加をクリックし、メディアライブラリから画像を選択し、テキスト欄に挿入します。画像の下に、テキストを入力します。

    CategoriesのAdd New Itemをクリックし、カテゴリーを作成。Categoriesの作成したカテゴリーにのみチェックを入れます。

    Timeline Setting

    タイムラインの文字スタイルなどの設定を行います。尚、General Settingはデフォルトのままです。

    Style Setting

    文字、タイムラインは黒を設定しています。今回は、ブロックエディターで、色を変更するので、あくまで、デフォルト設定になります。

    項目設定値
    Story Background ColorReba(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 FamilyNoto Sans JP
    Font StyleNormal 400
    Font SizeStory Date：20px
    Story Title：22px
    Story Content：16px
    Line HeightStory Date：21px
    Story Title：26px
    Story Content：空欄
    Letter SpacingStory 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 LAYOUTCompact Layout
    SELECT DESIGNSライト：Classic Design
    ダーク：Default
    ポップアップ：Minimal Design
    SELECT SKINライト：Light
    ダーク：Dark
    ポップアップ：Light
    TIMELINE BASED ONDefault
    STORIES DESCRIPTION?Full
    STORIES PER PAGE10

    Advanced

    日付のスタイルや、並び順などを設定していきます。

    項目設定値
    STORIES ORDER?ASC
    STORIES DATE?Show
    DATE FORMATSY-m-d
    DISPLAY ICONS(BY DEFAULT IS DOT)Dot
    PAGINATION SETTINGSDefault
    SHOW CATEGORY FILTERSNo
    YEAR NAVIGATION SETTINGHide
    LINE FILLING SETTINGS?False
    DISPLAY LEAD MORE?Hide
    ANIMATIONNone

    以上で、今回の説明は終了です。Pro版はサイトに合わせて、デザインを選ぶことができるのでいいですね。また、当サイトABOUTページにも経歴のところにタイムラインを入れたので、合わせてご覧ください。

    You may also like