Cocoonでタイムラインを作成する方法

こんにちは、ゆんつです。

ブログで記事を書いているときに、時系列や手順などの説明をしたいことがあります。

段落や箇条書きを使用して時系列や手順を表現することもできますが、できれば一見して時系列や手順の説明であることがわかるデザインの方が読者にとってわかやすいです。

WordPressの無料テーマCocoonには「タイムライン」という機能があり、タイムラインを使えば手順や時系列などを見やすく表示してくれます。

今日は

Cocconでのタイムラインの作成方法

について書きたいと思います。

なお、Cocoonでは旧エディターとGurtenbergエディターの両方が使えるので、それぞれのエディターに分けて説明したいと思います。

旧エディターでタイムラインを作成する
Gurtenbergエディターでタイムラインを作成する
まとめ

旧エディターでタイムラインを作成する

Cocconではエディターの設定で「Gurtenbergエディターを有効にする」のチェックを外すと、旧エディターを使用することが出来ます。

ゆんつ

僕は旧エディターを使ってます

その旧エディターでのタイムラインで使用する方法について説明します。

投稿画面で「ツールバー切り換え」アイコンをクリックしてツールを全て表示させます。

「ショートコード」のセレクトボックスをクリック。

使用できるショートコードが一覧表示されるので「タイムライン」をクリック。

タイムラインのショートコードが挿入されました。

タイムラインのショートコードが入力されたら、[timeline title=""][/timeline]の間にカーソルを移動させます。

そして、Shiftキーを押しながらエンターキーを2回押して[timeline title=""][/timeline]との間に空行を作ります。

空行部分にカーソルを移動させます。

空行部分にカーソルを置いた状態で、ショートコード一覧からタイムラインアイテムをクリック。

空行にタイムラインアイテムのショートコードが挿入されました。

このタイムラインアイテムのショートコードを、手順や時系列として作成したい項目の数だけ改行（Shift+エンターキー）しながら挿入します。

ゆんつ

例えば手順が4つある場合は全部で4個挿入してください

以上でタイムラインの骨格が完成しました。

後はタイムラインに必要な内容を入力していくだけです。

入力箇所や入力する内容は以下の通り。


[timeline title="タイムラインのタイトルを入力"]
[ti label="この項目のラベルを入力" title="この項目の見出しを入力"]この項目の説明文を入力[/ti]
[/timeline]

例えば、以下のように入力すると


[timeline title="タイムラインのタイトル"]
[ti label="ラベル1" title="見出し1"]説明文1説明文1説明文1説明文1説明文1説明文1説明文1説明文1[/ti]
[ti label="ラベル2" title="見出し2"]説明文2説明文2説明文2説明文2説明文2説明文2説明文2説明文2[/ti]
[ti label="ラベル3" title="見出し3"]説明文3説明文3説明文3説明文3説明文3説明文3説明文3説明文3[/ti]
[ti label="ラベル4" title="見出し4"]説明文4説明文4説明文4説明文4説明文4説明文4説明文4説明文4[/ti]
[/timeline]

こんな感じでタイムラインが表示されます。

タイムラインのタイトル