ワードプレスのテーマ『Diver（ダイバー）』で、タイムライン風の手順説明を作る方法を紹介します。
これで、人気テーマ「SANGO」の標準機能『タイムライン』のようなデザインを Diver でも作れますよ。
WPテーマ「SANGO」のタイムライン機能
SANGOカスタマイズガイド-サルワカ さんより
Diver で作成したタイムライン風の手順説明がこちら。
fa-pencil
カレーライスのつくりかた
- カレーをつくる
![]()
- ごはんにかける
お皿からはみ出ないように
![]()
- 召しあがれ
![]()
注：カレーは飲み物です
タイムラインの作り方
- Diver の fa-pencil入力補助 から「リストデザイン」を選択
![リストデザインを選択]()
- 順序付きリスト（ol）のタイムライン風デザインを選択
![タイムライン風デザインを選択]()
- リストHTML に手順項目を記述
下のように大項目だけ書いておきましょう![項目を記述]()
- 画像や説明文を記述
![画像や説明文を挿入]()
- 完成
お好みで 区切り線 などを入れると SANGO のタイムライン風になります。
応用編
リスト内では、バッジや囲い枠・グリッドレイアウトなどの入力補助機能やショートコードが併用できます。
上手に組み合わせると…
材料（３枚分）
ホットケーキの粉・・・150g
卵（Ｍサイズ）・・・１個
牛乳（または水）・・・100ml
つくりかた
- 生地をつくる
ボールに卵と牛乳を入れてよく混ぜる粉を先に入れると混ぜ過ぎになってしまいます - 生地を焼く
![ホットケーキを焼く]()
生地を高めの位置から落とします。
高めから落とすことで、きれいな円形に広がります。
弱火で３分ほど焼きましょう。 - 泡が出たら裏返す
…のようなレシピなんかも作れますよ。
