ワードプレスのテーマ『Diver(ダイバー)』で、タイムライン風の手順説明を作る方法を紹介します。
これで、人気テーマ「SANGO」の標準機能『タイムライン』のようなデザインを Diver でも作れますよ。

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