※ 当サイトではアフィリエイト広告を利用しています

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

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

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

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

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

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

今日は

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

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

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

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

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

ゆんつ
ゆんつ

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

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

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

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

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

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

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

「タイムライン」をクリック

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

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

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

カーソルをショートコードの間に移動する

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

Shiftキーを押しながらエンターキーを2回押してショートコードの間に空行を作る

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

空行部分にカーソルを移動させる

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

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

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

タイムラインアイテムのショートコードが挿入された

このタイムラインアイテムのショートコードを、手順や時系列として作成したい項目の数だけ改行(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]

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

タイムラインのタイトル
  • ラベル1
    見出し1
    説明文1説明文1説明文1説明文1説明文1説明文1説明文1説明文1
  • ラベル2
    見出し2
    説明文2説明文2説明文2説明文2説明文2説明文2説明文2説明文2
  • ラベル3
    見出し3
    説明文3説明文3説明文3説明文3説明文3説明文3説明文3説明文3
  • ラベル4
    見出し4
    説明文4説明文4説明文4説明文4説明文4説明文4説明文4説明文4

以上が、旧エディターでのタイムライン作成方法です。

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

現在主流のGurtenbergエディターでタイムラインを作成する方法について説明します。

記事作成画面で、ブロックを追加する「+」アイコンをクリック。

記事作成画面で「+」アイコンをクリック

ブロックを選択するウィンドウが開くので、検索ボックスに「タイムライン」と入力し、現れたタイムラインをクリック。

検索ボックスに「タイムライン」と入力し、現れたタイムラインをクリック

タイムラインブロックが挿入されました。

タイムラインブロックが挿入された

タイムラインブロックが選択された状態で画面右側を見てみると、タイムラインブロックの設定項目が表示されています。

タイムラインブロックを選択すると、画面右にタイムラインブロックの設定項目が表示される

※タイムラインの設定画面が表示されていない場合は、画面右上の「設定」アイコンをクリックすると表示されます。

タイムラインの設定画面が表示されていない場合は、画面右上の「設定」アイコンをクリックすると表示される

ここで、タイムラインのスタイルを設定します。

アイテム数はタイムラインの項目の数になるので、手順などの数に合わせて項目数を設定します。

ゆんつ
ゆんつ

手順が4つなら、アイテム数に4と入力します

例えば4と入力すると、即座にタイムラインに4つの項目が作成されます。

アイテム数に設定した数字分の項目がタイムラインに作成される

色設定というのはタイムラインのポイントや背景、文字、外枠に使用される色の設定です。

例えば、

  • ポイント色 ⇒ 青
  • 背景色 ⇒ グレー
  • 文字色 ⇒ 赤
  • ボーダー色 ⇒ 黒

にすると、以下のような見た目のタイムラインになります。

ポイント色が青、ボーダー色黒、文字色赤、背景色グレーの場合のタイムライン

タイムラインのアイテム数と色の設定したら、後はタイムラインブロックに戻ってタイムラインのタイトルやラベル、見出し、説明文などを入力していくだけです。

タイムラインのアイテム数と色の設定したら、あとはタイムラインブロック内のタイムラインのタイトルや見出し、内容を記述するだけ

タイムラインブロックの入力が終わって記事を保存すると、エディターと同じ見た目のタイムラインが記事に反映されます。

以上がGurtenbergエディターでタイムラインを作成する方法です。

まとめ

というわけで、Cocoonでの旧エディターまたはGurtenbergエディターを使ったタイムラインの作成方法について説明しました。

Cocoonでのタイムラインの作成方法を簡単にまとめると

  • 旧エディター ⇒ 「タイムライン」と「タイムラインアイテム」のショートコードを利用する
  • Gurtenberg  ⇒ タイムラインブロックを利用する

という感じになります。

使用しているエディターに応じて参考にしてみてください。

それでは、またー。

コメント