みなさまは記事を書くとき、タイムラインは使っていますでしょうか？
タイムラインを使うと、手順を視覚的に見やすく解説できます。
- STEP1タイムラインのブロックを追加する
「+」マークを押してタイムラインのブロックを追加します。
- STEP2説明が必要な分、アイテムを増やす
右カラムにあるメニューでアイテム数が増やせます。
- STEP3タイムラインの中身を作っていく
アイテムのラベル、タイトル、中身を書いてタイムライン完成！
テーマ「cocoon」を使っている方であれば、HTML/CSSなどを触らなくても、クリックだけで簡単に実装が可能。
この記事では、cocoonでブロックエディターを使い、タイムラインを入れる方法について、詳しく解説していきます。
タイムラインのブロックを追加
ブロックエディターでブロックを追加する方法は大きく2つに分かれます。
ここは人それぞれなので、やりやすい方を試してみてください。
スラッシュ入力でブロックを追加
半角でスラッシュ『/』を入力するとブロック一覧が表示されるので、そこから追加したいブロックを選択します。
またスラッシュの後にブロック名を入れることで、追加したいブロックを指定することも可能。
「/タイムライン」「/見出し」など。
慣れればこちらの方が早く追加できます。
プラスマークからブロックを追加
ブロックを追加したい場所にカーソルを合わせると「＋」のマークが表示されます。
「＋」をクリックすると、検索窓とよく使うブロック一覧が表示されるので、そこからタイムラインが追加できます。
「すべて表示」をクリックするとすべてのブロックが表示されます。
また段落ブロックの右側にある「＋」のマークや、左メニューの上部にあるものも同じです。
使いやすい方でブロックを追加してみてください。
タイムラインのアイテム数を決める
タイムラインを追加したら、必要な手順の分だけアイテム数を増やします。
タイムラインのブロックを選択している状態で、右側のメニューからアイテム数を増やせます。
手順が3つであれば、アイテム数を3つにしましょう。
アイテムを3つにすると以下のような表示です。
- ラベルタイトル
- ラベルタイトル
- ラベルタイトル
タイムラインに記入していく
必要な分アイテム数を増やしたら、後はそれぞれの手順を解説していきます。
ラベルの入力
ラベルはタイムラインの一番左側の項目です。
人によってさまざまですが、「STEP」や「手順」などを使っている方が多いです。
またスケジュールを表記する場合は、ラベルに時刻を書く方もいます。
- STEP1タイトル
- STEP2タイトル
- STEP3タイトル
- 0:00タイトル
- 12:00タイトル
- 21:00タイトル
タイトルの入力
まずタイムラインのタイトルを入力します。
このタイムラインで何を解説しているのかがわかりやすくなります。
人によっては不要という方もいますので、省略も可能。
省略しても形は崩れません。
- ラベルタイトル
次に手順ごとのタイトルを入力していきます。
- STEP1タイトルの入れ方1
- STEP2タイトルの入れ方2
- STEP3タイトルの入れ方3
本文の入力
タイトルが決まったら、あとはタイトルに沿って解説を入れていきます。
ここは文章だけではなく、画像や動画も入れられます。
画像だけで説明している方もおり、文章は少なめの方がスッキリしていて見やすいです。
タイムラインを装飾する方法
ラベルを装飾
ラベルは通常のテキストと同じなので、マーカーを引いたり、バッジをつけたりできます。
- ラベル太字+赤マーカー
- ラベル太字+赤文字
- ラベルバッジ
色を変える方法
文字色を変える
タイムラインの文字色を変えることができます。
タイムラインを選択した状態で、右側メニューの色設定から文字色を変えられます。
ラベル、タイトルも含めて全て変更されるため、箇所によって色を変えたい場合は、それぞれ設定が必要です。
- ラベルタイトル
ポイントの色を変える
ポイントはラベルの右側にある丸いマークのことです。
こちらも右側メニュー色設定のポイント色から変更が可能。
- ポイント→タイトル
ボーダーの色を変える
タイムラインのボーダー(枠線)の色を変えることができます。
ブログのテーマカラーが決まっている方は統一した方が綺麗かもしれません。
こちらも右側メニュー色設定のボーダー色から変更が可能。
- ラベルタイトル
背景色を変える
タイムライン全体の背景色が変えられます。
こちらも右側メニュー色設定の背景色から変更が可能。
- ラベルタイトル
タイムラインの作り方まとめ
最後にこの記事でやった手順を、実際にタイムラインで作ってみます。
- STEP1ブロック追加でタイムラインを入れる
「+」マークを押してタイムラインのブロックを追加します。
- STEP2必要な分、アイテムを増やす
タイムラインを選択した状態で、右側メニューからアイテム数の増減ができます。
- STEP3タイトル・ラベル・本文を入力
作るタイムラインに合わせてタイトルなどを入力していきましょう。
- STEP4タイムラインを装飾する
お好みでラベルを変えたり、文字色、背景色の変更ができます。
自分好みにカスタマイズできたらタイムラインの完成です。
cocoonでタイムラインを使ってみよう！
cocoonのテーマを使えば、クリック操作のみで簡単にタイムラインを作成できます。
有料のテーマでも、タイムラインを作るのにphpやcssの編集が必要なテーマもあるため、無料でここまでできるcocoonは本当に素晴らしい。
手順があるものは、タイムラインを入れた方が記事も見やすくなります。
タイムラインを簡単に実装したいという方は、ぜひcocoonを使ってみてください。
またcocoonのタイムライン以外の使い方について、解説している記事もあります。
こちらも参考にしてみてください。
コメント