タイムラインショートコードの利用方法

Cocoonには、手順や、時系列を表しやすいように、タイムラインショートコードを用意しました。

こんな感じのやつ。

以下で、その利用方法というかサンプルコードを紹介します。

ショートコード雛形の作成方法

ショートコードの骨格を作成するには、ビジュアルエディターの「ショートコード」ドロップダウンリストから、まず雛型を作成すると楽かもしれません。

タイムラインショートコード

タイムライン（timeline）ショートコードを利用して、タイムラインの外枠を作成します。

こんな感じの雛形が出力されます。

[timeline title=""][/timeline]

タイムラインアイテムショートコード

タイムラインアイテム（ti）ショートコードで、タイムラインの中身（アイテム）を作成できます。

こんな感じのコードが出力されます。

[ti label="" title=""][/ti]

titmlineとtiショートコードを組み合わせて利用

titmlineとtiショートコードを、以下のような入れ子状に組み合わせて利用することでタイムラインを表現します。

全体の雛形となるショートコードがこちら。

[timeline title=""]
[ti label="" title=""][/ti]
[ti label="" title=""][/ti]
[/timeline]

ショートコード実例

以下では、実際に利用する際の実例を紹介します。

手順を表すタイムライン例

WordPressサイトの開設手順を例に説明します。

表示例

サンプルショートコード

上記タイムラインのサンプルコードはこちら。

[timeline title="サイト開設手順"]
  [ti label="STEP1" title="レンタルサーバに登録する"]まずはサイトを始めるスペースを借りる必要があります。

  おすすめのレンタルサーバーは、サーバーAとサーバーBです。[/ti]
  [ti label="STEP2" title="独自ドメインを取得する"]サイト運営をする上で、独自ドメインを取得は、今や必須といえるでしょう。

  ドメインを取得するには…[/ti]
  [ti label="STEP3" title="WordPressのインストール"]今であれば、レンタルサーバーに簡単インストール機能がついています。レンタルサーバーのヘルプでWordPressインストール方法を探してみましょう。[/ti]
  [ti label="STEP4" title="WordPressテーマのインストール"]WordPressテーマはお好きなものを利用すると良いでしょう。ちなみに当サイトはCocoonを利用しています。[/ti]
[/timeline]

時系列をタイムラインで表す

こちらの方がタイムラインの本来の使い方かもしれません。

表示例

サンプルショートコード

上記タイムラインのサンプルコードです。

[timeline title="これまでの経歴（※フィクションです）"]
  [ti label="2016年3月" title="不祥事により会社を退職"]取引先の社長の頭をひっぱたいてしまい責任を取って退職。[/ti]
  [ti label="2016年4月" title="就職活動"]就職活動を行うも、前の会社での行いが知れ渡っており、同業者は全て門前払い。[/ti]
  [ti label="2016年8月" title="就職を諦め無職へ"]完全にやる気が無くなり無職へジョブチェンジ。毎日オンラインゲームざんまいの濃密な日々を過ごす。[/ti]
  [ti label="2017年8月" title="サイト運営を開始"]貯金を使い果たしそうになり「何とかせねば！」と〇〇というサイトを開始。[/ti]
  [ti label="2018年8月" title="サイト運営1年経過"]毎日記事を書き続けた結果、月収〇〇円に。節約すれば何とか生活できる収入に到達。[/ti]
[/timeline]

参考

このタイムラインのデザインはWebクリエイターボックスを運営されているManaさんが作成されたCodePenのものを参考にさせていただきました。

Just a moment...

codepen.io