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

SANGO タイムライン機能

WPテーマ「SANGO」のタイムライン機能
SANGOカスタマイズガイド-サルワカ さんより

Diver で作成したタイムライン風の手順説明がこちら。

カレーライスのつくりかた

  1. カレーをつくる

  2. ごはんにかける
    お皿からはみ出ないように

  3. 召しあがれ

    注:カレーは飲み物です

タイムラインの作り方

  1. Diver の 入力補助 から「リストデザイン」を選択

    リストデザインを選択
  2. 順序付きリスト(ol)のタイムライン風デザインを選択

    タイムライン風デザインを選択
  3. リストHTML に手順項目を記述
    下のように大項目だけ書いておきましょう

    項目を記述
  4. 画像や説明文を記述
    画像や説明文を挿入
  5. 完成
    お好みで 区切り線 などを入れると SANGO のタイムライン風になります。

応用編

リスト内では、バッジや囲い枠・グリッドレイアウトなどの入力補助機能やショートコードが併用できます。
上手に組み合わせると…

材料(3枚分)

ホットケーキの粉・・・150g
卵(Mサイズ)・・・1個
牛乳(または水)・・・100ml

created by Rinker
森永製菓
¥257 (2018/11/16 04:13:25時点 Amazon調べ-詳細)

つくりかた

  1. 生地をつくる
    ボールに卵と牛乳を入れてよく混ぜる
     粉を先に入れると混ぜ過ぎになってしまいます
  2. 生地を焼く
    ホットケーキを焼く
    生地を高めの位置から落とします。
    高めから落とすことで、きれいな円形に広がります。
    弱火で3分ほど焼きましょう。
  3. 泡が出たら裏返す

…のようなレシピなんかも作れますよ。

オススメの記事