企業や組織の沿革や、個人の略歴、操作手順などのステップコンテンツをスクロールと共に順番に表示するレスポンシブ表示にも対応するタイムラインショートコードです。

最小限のパラメータのみでの表示例(3アイテムの場合)

このショートコード

[timeline]
[timelineitem
 date='2012年'
 title='ロンドン大会開催']
メイン会場は「ロンドン・スタジアム」。
参加国数は204ヵ国。参加選手数は、男子が5892人、女子が4676人。開催種目数は302。
[/timelineitem]
[timelineitem
 date='2016年'
 title='リオデジャネイロ大会開催']
メイン会場は「マラカナンスタジアム」。
参加国数は206ヵ国。参加選手数は、男子が6179人、女子が5059人。開催種目数は306。
[/timelineitem]
[timelineitem
 date='2020年7月24日〜'
 title='東京大会開催']
メイン会場は「新国立競技場」。
開催種目数は339。
1964年開催の東京オリンピックでは、「国立霞ヶ丘陸上競技場」がメイン会場。
[/timelineitem]
[/timeline]

右側にタイムラインを配置し、下からフェードインさせる場合の表示例

このショートコード

[timeline
layout='2'
fadeinfx='2']
[timelineitem
 date='<i class="icon-book-open"></i>ステップ 1'
 datesize='16px'
 dateitalic='1'
 title='タイムラインタイトル 1'
 titleitalic='1'
 titlecolor='#fff'
 titlebgcolor='#57A7D6'
 caption='タイトルキャプション 1'
 dotcolor='#57A7D6'
 dotbdcolor='#abd1e8'
 moretxt='詳細はこちら'
 moreurl='#'
 morebgcolor='#57A7D6']
<div class="clearfix"><img src="https://skin.dpthemes.net/infinitii4/wp-content/uploads/sites/13/2018/12/hd-banner-mb1.jpg" alt="" width="300" height="200" class="alignleft" />親譲りの無鉄砲で小供の時から損ばかりしている。小学校に居る時分学校の二階から飛び降りて一週間ほど腰を抜かした事がある。なぜそんな無闇をしたと聞く人があるかも知れぬ。別段深い理由でもない。</div>
[/timelineitem]
[timelineitem
 date='<i class="icon-book-open"></i>ステップ 2'
 datesize='16px'
 dateitalic='1'
 title='タイムラインタイトル 2'
 titleitalic='1'
 titlecolor='#fff'
 titlebgcolor='#57A7D6'
 caption='タイトルキャプション 2'
 dotcolor='#57A7D6'
 dotbdcolor='#abd1e8']
<p>新築の二階から首を出していたら、同級生の一人が冗談に、いくら威張っても、そこから飛び降りる事は出来まい。弱虫やーい。と囃したからである。小使に負ぶさって帰って来た時、おやじが大きな眼をして二階ぐらいから飛び降りて腰を抜かす奴があるかと云ったから、この次は抜かさずに飛んで見せますと答えた。</p>
<p class="label">ラベル</p>
<ul>
<li>リストアイテム 1</li>
<li>リストアイテム 2</li>
<li>リストアイテム 3</li>
</ul>
[/timelineitem]
[timelineitem
 date='<i class="icon-book-open"></i>ステップ 3'
 datesize='16px'
 dateitalic='1'
 title='タイムラインタイトル 3'
 titleitalic='1'
 titlecolor='#fff'
 titlebgcolor='#57A7D6'
 caption='タイトルキャプション 3'
 dotcolor='#57A7D6'
 dotbdcolor='#abd1e8']
道路の位置も幾たびか改まったもので、古道はいつのまにか深い山間に埋もれた。名高い桟も、蔦のかずらを頼みにしたような危い場処ではなくなって、徳川時代の末にはすでに渡ることのできる橋であった。新規に新規にとできた道はだんだん谷の下の方の位置へと降って来た。
[blogcard url='https://digipress.info/']
[/timelineitem]
[/timeline]

角丸、フルワイド、ドットにアイコンを指定した場合の表示例

このショートコード

[timeline
layout='3'
fadeinfx='3'
rounded='1']
[timelineitem
 date='<i class="icon-calendar"></i>2012年'
 dateitalic='1'
 title='ロンドン大会開催'
 titlesize='24px'
 titleitalic='1'
 titlecolor='#fff'
 titlebgcolor='#57A7D6'
 caption='タイトルキャプション 1'
 captionsize='13px'
 dotcolor='#f47a8e'
 dotbdcolor='#f5bbc5'
 doticon='icon-podium'
 moretxt='詳細はこちら'
 moreurl='#'
 morebgcolor='#57A7D6']
メイン会場は「ロンドン・スタジアム」。
参加国数は204ヵ国。参加選手数は、男子が5892人、女子が4676人。開催種目数は302。
[/timelineitem]
[timelineitem
 date='<i class="icon-calendar"></i>2016年'
 dateitalic='1'
 title='リオデジャネイロ大会開催'
 titlesize='24px'
 titleitalic='1'
 titlecolor='#fff'
 titlebgcolor='#57A7D6'
 caption='タイトルキャプション 2'
 captionsize='13px'
 dotcolor='#f47a8e'
 dotbdcolor='#f5bbc5'
 doticon='icon-bicycle']
メイン会場は「マラカナンスタジアム」。
参加国数は206ヵ国。参加選手数は、男子が6179人、女子が5059人。開催種目数は306。
[/timelineitem]
[timelineitem
 date='<i class="icon-calendar"></i>2020年7月24日〜'
 dateitalic='1'
 title='東京大会開催'
 titlesize='24px'
 titleitalic='1'
 titlecolor='#fff'
 titlebgcolor='#57A7D6'
 caption='タイトルキャプション 3'
 captionsize='13px'
 dotcolor='#f47a8e'
 dotbdcolor='#f5bbc5'
 doticon='icon-trophy']
メイン会場は「新国立競技場」。
開催種目数は339。
1964年開催の東京オリンピックでは、「国立霞ヶ丘陸上競技場」がメイン会場。
[/timelineitem]
[/timeline]

ボックスシャドウを無効、ボーダーを表示したフラットな表示例

このショートコード

[timeline
layout=1
fadeinfx=1
boxshadow=0
border=1
rounded=1]
[timelineitem
 date='2012年'
 title='ロンドン大会開催'
 titleitalic='1'
 titlecolor='#fff'
 titlebgcolor='#57A7D6'
 caption='タイトルキャプション 1'
 txtcolor='#444'
 bgcolor='rgba(87,167,214,.08)'
 dotcolor='#57A7D6'
 dotbdcolor='#fff'
 doticon='icon-podium'
 moretxt='詳細はこちら'
 moreurl='#'
 morebgcolor='#57A7D6']
メイン会場は「ロンドン・スタジアム」。
参加国数は204ヵ国。参加選手数は、男子が5892人、女子が4676人。開催種目数は302。
[/timelineitem]
[timelineitem
 date='2016年'
 title='リオデジャネイロ大会開催'
 titleitalic='1'
 titlecolor='#fff'
 titlebgcolor='#f47a8e'
 caption='タイトルキャプション 2'
 txtcolor='#444'
 bgcolor='rgba(244,122,142,.08)'
 dotcolor='#f47a8e'
 dotbdcolor='#fff'
 doticon='icon-bicycle'
 moretxt='詳細はこちら'
 moreurl='#'
 morebgcolor='#f47a8e']
メイン会場は「マラカナンスタジアム」。
参加国数は206ヵ国。参加選手数は、男子が6179人、女子が5059人。開催種目数は306。
[/timelineitem]
[timelineitem
 date='2020年7月24日〜'
 title='東京大会開催'
 titleitalic='1'
 titlecolor='#fff'
 titlebgcolor='#F26E52'
 caption='タイトルキャプション 3'
 txtcolor='#444'
 bgcolor='rgba(242,110,82,.08)'
 dotcolor='#F26E52'
 dotbdcolor='#fff'
 doticon='icon-trophy'
 moretxt='詳細はこちら'
 moreurl='#'
 morebgcolor='#F26E52']
メイン会場は「新国立競技場」。
開催種目数は339。
1964年開催の東京オリンピックでは、「国立霞ヶ丘陸上競技場」がメイン会場。
[/timelineitem]
[/timeline]