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