このサイトでは、管理人であるままくまが、日常で起こった出来事をもとに、 皆さんに役立つ(?)であろう出来事をゆるっと発信していきます。

Cocoon*作業手順をタイムラインブロックを使って説明しよう

ブログ

Cocoonをお使いの皆さん、タイムラインというブロックはご存知ですか?

タイムラインという名前から分かるように、時系列を分かりやすく説明するために使用するブロックです。

このブロックを使って、手順も分かりやすく説明することが出来るので、タイムラインの使い方とともにご紹介します。

この記事でわかること
  • タイムラインブロックの使い方
  • タイムラインブロックの応用

タイムラインブロックの使い方

1.タイムラインブロックを選択する

「+」アイコンをクリックしてタイムラインを選択します。

選択すると以下のようなテンプレートが表示されます。

2.追加設定でアイテム数を選択する

右に表示されている追加設定内のアイテム数を変更すると、タイムライン内の見出しが増えます。

アイテム数は50まで選ぶことができます。

※追加設定が出ていない場合は、上の画像のようなタイムラインツールバー内の「…」をクリックし、「追加設定を表示」を選択すると出てきます。

3.色を設定する

色は、以下の4か所を変更できます。

  • ポイント(点の色)
  • 背景(タイムラン内全体の背景)
  • 文字(タイムライン内全ての文字)
  • ボーダー(タイムラインを囲む枠)

4.内容を入力する

各ステップの内容を入力します。タイムラインのタイトルやラベルは空欄にすれば表示されません。

ラベルには時間や数字など、見出しには各ステップのタイトルを入力します。

各ステップの内容は、タイトルを選択するとブロックが選択できます。もちろん画像なども入れることが出来ます。

タイムラインの中にタイムラインを入れることもできるよ

※タイトルの入力後に改行しても、自動的に別ブロックとならないので、内容入力の際は、タイトルをクリックした後に出てくるブロックを選択してから入力していきましょう。

手順の見栄えがどれくらい違うか

先程の『タイムラインブロックの使い方』の手順をタイムラインを使って書いて比較してみます。

(内容は先ほどよりも簡易的になっています)


  • タイムラインブロックを選択する
  • 追加設定でアイテム数を選択する
  • 色を設定する

    色は、以下の4か所を変更できます。

    • ポイント(点の色)
    • 背景(タイムライン内の背景)
    • 文字(タイムライン内の全ての文字)
    • ボーダー(タイムラインを囲む枠)
  • 内容を入力する

    各ステップの内容を入力します。

    ※タイトルの入力後に改行しても、自動的に別ブロックとならないので、内容入力の際は、タイトルをクリックした後に出てくるブロックを選択してから入力していきましょう。


画像にして並べて比較してみました。

左そのまま・右タイムライン

いかがですか?

タイムラインを使った方が、各ステップが明確で見やすく感じると思います。

上の画像はパソコンでの表示比較ですが、スマートフォンなどでの表示はタイムラインのほうがより分かりやすいと感じます。

また、タイムラインを使用していないものは、適度に太字にするなど簡単に追加装飾していますが、タイムラインはテンプレートがあるので、ただ内容を記述するだけでOKです

楽に見やすく手順を書けるなら、タイムラインを使わない手はないね!

タイムラインブロックの応用

時系列や手順の表記に使えることは、ブログをある程度書いてきた皆さんには当たり前のことかもしれません。

では、それ以外に使える方法はないのか?と思い、少し考えてみました。

類似したコンテンツの複数紹介

  • 1つのテーマに沿った複数の類似品の紹介
  • ブロガーさんの紹介などで複数人を列挙する

など、情報量の多い内容をリスト化したい場合に使いやすいと思います。

通常のリストだと、少しだけ追加情報を列挙したいと思ったときに編集が難しいですが、

タイムラインであれば、スタイルをカスタムできるので、編集が容易でより分かりやすく記載することが出来ます。

ままくま
ままくま

今後、このサイトでもブロガーさんの紹介などをしていきたいなと思っているので、使用していこうと考えているよ!

ランキングの紹介

ランキングは、アフィリエイトサイトでよく見るような目立つ書き方があります。

ただ、目立たせるほどではないけれど、ちょこっと紹介したいなという時はタイムラインを使うのもありなのではないかと思います。

  • 1位
    あいうえお

    詳細

  • 2位
    かきくけこ

    詳細

  • 3位
    さしすせそ

    詳細

例を作ってみましたが、微妙な感じもしますかね?笑

ラベルやタイトルのフォントサイズや文字色も変更できるから、装飾をもう少し頑張ればもっと良くなるかも。

まとめ

今回はタイムラインの使い方について説明しました。

タイムラインは、タイムラインとしての用途以外にも多様な使い方があるので、うまく使えばとても役立つブロックです。

ブログを始めた当初は書くことに必死で、ブロックの種類について調べる余裕はありませんでした。

なので、タイムラインの存在は最近知り、今まで使用していなかったことに後悔しています。

少し調べようと思えば便利なツールがたくさんあるので、まずは基本的なブロックなどを皆さんも色々試してみてくださいね。

それではまた。

コメント