何かの流れを説明するとき、単純に「1. 〇〇～」「2. 〇〇～」と箇条書きにしていないだろうか。Cocoonの「タイムライン」機能を使えば、簡単にキレイなフローチャートを作ることができる。
この記事では、Cocoonのタイムライン機能を使ってフローチャートを作る方法と、オススメのカスタマイズ方法を解説する。
タイムライン機能とは
タイムライン機能の例
このように、左側に「STEP 01」「STEP 02」のような流れを説明するテキスト、右側に実行することや参考画像を乗せることができる。
説明の流れが非常にわかりやすくなるので、何かの方法を説明するときに非常に有効だ。
タイムライン機能の使い方
実際に、タイムライン機能を使いながらタイムライン機能の使い方を説明する。
タイムラインを挿入する方法
- STEP 01記事を書く画面で、右側の「+」から「すべて表示」をクリックする。
- STEP 02「タイムライン」を探し、クリックする。
- STEP 03タイムラインが挿入される。
タイムラインを調節する方法
「タイムラインのタイトル」や「ラベル」は、直接クリックすることで内容を書き換えることができる。
また、「タイトル」をクリックすると、記事を書くときのようなエディタが出てくるので、自由に段落を作ったり画像を追加したりすることができる。
さらに、「タイムラインのタイトル」をクリックしたときには、画面右側のエディタで設定をいじることができるようになる。
「アイテム数」でラベルの数を変えることができる。説明に必要な数を設定しよう。
「色設定」でタイムラインのデザインを設定することができる。ここで設定できる項目は限られているが、簡単に調節できる。
タイムラインをカスタマイズする
簡単な調節は上記のエディタで可能だが、より詳細なカスタマイズをする場合はCSSを弄る必要がある。
ここでは、縦線の色を変える方法を紹介する。
タイムラインの縦線の色を変える方法
- STEP 01WordPressの管理画面から、「外観」→「カスタマイズ」を開く
- STEP 02「追加CSS」をクリックする。
- STEP 03下記画面のように入力し、右上の「公開」をクリック
※コピペは下記から
/* タイムラインの色調整 */
.timeline-item-content {
border-left: 3px solid gray ; /* 線の太さ 種類 色 */
}border-left: の後の「3px」が太さ、「solid」が線の種類、「gray」が色を表している。
好きな色に変えたい場合、「gray」の部分を変更する。
#545454のようなカラーコードで入力するか、white, blackのようなシンプルな色なら英語で入力しても認識してくれる。
その他：Cocoonのお役立ち情報
ぜひこちらも試してみてほしい。
まとめ
この記事では、Cocoonのタイムライン機能を使ってフローチャートを作る方法と、オススメのカスタマイズ方法を解説した。お役に立てたなら幸い。
CSSを調整すれば、かなり自由度高くカスタマイズできる。
他のカスタマイズがしたい場合は調べていただくか、X（Twitter）やお問い合わせフォームから連絡してほしい。