提供中の DigiPress テーマ専用 WordPress プラグイン「DigiPress Ex – Shortcodes」に、新たに「ライムラインショートコード」が追加されました。
このショートコードを利用することで、例えばウェブページで公開する企業や団体などの組織の沿革や、プロフィールや物事の略歴、大まかな手順や流れといった、順序をベースとしたデザイン性の高いステップコンテンツを以下のサンプルのように効果的に見せることができるようになります。
INDEX
最小限のパラメータのみの最もシンプルな表示例(3アイテムの場合)
2012年
ロンドン大会開催
メイン会場は「ロンドン・スタジアム」。
参加国数は204ヵ国。参加選手数は、男子が5892人、女子が4676人。開催種目数は302。
参加国数は204ヵ国。参加選手数は、男子が5892人、女子が4676人。開催種目数は302。
2016年
リオデジャネイロ大会開催
メイン会場は「マラカナンスタジアム」。
参加国数は206ヵ国。参加選手数は、男子が6179人、女子が5059人。開催種目数は306。
参加国数は206ヵ国。参加選手数は、男子が6179人、女子が5059人。開催種目数は306。
2020年7月24日〜
東京大会開催
メイン会場は「新国立競技場」。
開催種目数は339。
1964年開催の東京オリンピックでは、「国立霞ヶ丘陸上競技場」がメイン会場。
開催種目数は339。
1964年開催の東京オリンピックでは、「国立霞ヶ丘陸上競技場」がメイン会場。
このショートコード
[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]
右側にタイムラインを配置し、下からフェードインさせる場合の表示例
ステップ 1
タイムラインタイトル 1
親譲りの無鉄砲で小供の時から損ばかりしている。小学校に居る時分学校の二階から飛び降りて一週間ほど腰を抜かした事がある。なぜそんな無闇をしたと聞く人があるかも知れぬ。別段深い理由でもない。
ステップ 2
タイムラインタイトル 2
新築の二階から首を出していたら、同級生の一人が冗談に、いくら威張っても、そこから飛び降りる事は出来まい。弱虫やーい。と囃したからである。小使に負ぶさって帰って来た時、おやじが大きな眼をして二階ぐらいから飛び降りて腰を抜かす奴があるかと云ったから、この次は抜かさずに飛んで見せますと答えた。
ラベル
- リストアイテム 1
- リストアイテム 2
- リストアイテム 3
ステップ 3
タイムラインタイトル 3
道路の位置も幾たびか改まったもので、古道はいつのまにか深い山間に埋もれた。名高い桟も、蔦のかずらを頼みにしたような危い場処ではなくなって、徳川時代の末にはすでに渡ることのできる橋であった。新規に新規にとできた道はだんだん谷の下の方の位置へと降って来た。
このショートコード
[timeline layout='2' fadeinfx='2'] [timelineitem date='<i class="icon-book-open"></i>ステップ 1' 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://digipress.info/_wp/wp-content/uploads/2018/04/hd-banner-mb1.jpg" alt="" width="300" height="200" class="alignleft" />親譲りの無鉄砲で小供の時から損ばかりしている。小学校に居る時分学校の二階から飛び降りて一週間ほど腰を抜かした事がある。なぜそんな無闇をしたと聞く人があるかも知れぬ。別段深い理由でもない。</div> [/timelineitem] [timelineitem date='<i class="icon-book-open"></i>ステップ 2' 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' dateitalic='1' title='タイムラインタイトル 3' titleitalic='1' titlecolor='#fff' titlebgcolor='#57A7D6' caption='タイトルキャプション 3' dotcolor='#57A7D6' dotbdcolor='#abd1e8'] 道路の位置も幾たびか改まったもので、古道はいつのまにか深い山間に埋もれた。名高い桟も、蔦のかずらを頼みにしたような危い場処ではなくなって、徳川時代の末にはすでに渡ることのできる橋であった。新規に新規にとできた道はだんだん谷の下の方の位置へと降って来た。 [blogcard url='https://digipress.info/'] [/timelineitem] [/timeline]
配色、角丸、フルワイド、ドットにアイコンを指定した場合の表示例
2012年
ロンドン大会開催
メイン会場は「ロンドン・スタジアム」。
参加国数は204ヵ国。参加選手数は、男子が5892人、女子が4676人。開催種目数は302。
参加国数は204ヵ国。参加選手数は、男子が5892人、女子が4676人。開催種目数は302。
2016年
リオデジャネイロ大会開催
メイン会場は「マラカナンスタジアム」。
参加国数は206ヵ国。参加選手数は、男子が6179人、女子が5059人。開催種目数は306。
参加国数は206ヵ国。参加選手数は、男子が6179人、女子が5059人。開催種目数は306。
2020年7月24日〜
東京大会開催
メイン会場は「新国立競技場」。
開催種目数は339。
1964年開催の東京オリンピックでは、「国立霞ヶ丘陸上競技場」がメイン会場。
開催種目数は339。
1964年開催の東京オリンピックでは、「国立霞ヶ丘陸上競技場」がメイン会場。
このショートコード
[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]
ボックスシャドウを無効、配色しボーダーを表示したフラットな表示例
2012年
ロンドン大会開催
メイン会場は「ロンドン・スタジアム」。
参加国数は204ヵ国。参加選手数は、男子が5892人、女子が4676人。開催種目数は302。
参加国数は204ヵ国。参加選手数は、男子が5892人、女子が4676人。開催種目数は302。
2016年
リオデジャネイロ大会開催
メイン会場は「マラカナンスタジアム」。
参加国数は206ヵ国。参加選手数は、男子が6179人、女子が5059人。開催種目数は306。
参加国数は206ヵ国。参加選手数は、男子が6179人、女子が5059人。開催種目数は306。
2020年7月24日〜
東京大会開催
このショートコード
[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]
レスポンシブ(モバイル端末)表示例
このショートコードによるタイムラインコンテンツは、メディアクエリによってレスポンシブ表示にも対応しており、例えばスマートフォンでは以下のようにデザインが調整されます。
既存ユーザー様は、以下オンラインマニュアルにてタイムラインショートコードの詳しいパラメータの説明をご覧いただけます。
「DigiPress Ex – Shortcodes」プラグインについてはこちらをご覧ください。