グリッドレイアウトでノーコードで作った料理レシピのブロックパターン

WordPress 6.6 で追加されたグループブロックのグリッドレイアウトで作った料理レシピのブロックパターンです。

  • 料理の写真をクリックすると Lightbox 効果で拡大表示します。(プラグインを使っていません😊)
  • ノーコードで作ってあります🙌
  • もちろんレスポンシブ対応🎉

3カラムのレイアウト

チャーハン

シンプルで美味しいチャーハンのレシピをご紹介します。ごはん粒と具材の旨みが一体となって口いっぱいに広がります。

ポイント

  • ご飯は冷やご飯を使うと、よりパラパラに仕上がります。
  • 炒める際、フライパンの温度を高めに保つと良いです。

お好みで、エビやピーマン、にんじんなども加えてアレンジを楽しめます!

材料(2人前)

  • ご飯 2杯分
    冷やご飯を使うとよりパラパラに仕上がります。
  • 卵 2個
  • ネギ 1本
    みじん切り
  • ハムやベーコン、チャーシュー 50g
    細かく切る
  • 醤油 小さじ1
  • 塩 適量
  • こしょう 適量
  • サラダ油 大さじ1

作り方

  • 準備
    ご飯が冷えて固まっている場合は、手やスプーンで軽くほぐしておきます。
  • 卵を炒める
    フライパンに油を熱し、溶いた卵を入れて炒め、半熟状態になったら一旦取り出します。
  • 具材を炒める
    フライパンに再び油を入れ、ネギとハムを炒めます。
  • ご飯を加える
    ご飯を加え、全体をほぐしながら炒めます。お米がパラパラになるようにしっかり炒めましょう。
  • 卵を戻す
    先ほど取り出した卵を戻し、醤油、塩、こしょうで味を調えます。
  • 仕上げ
    全体がしっかり混ざり、香ばしい香りがしたら完成です。

麻婆豆腐

美味しい麻婆豆腐のレシピをご紹介します!つるっとした豆腐の食感と優しい辛さが特徴です。

ポイント

  • 辛さは豆板醤の量で調整できます。辛いのが苦手な場合は少なめにしても美味しいです。
  • 仕上げに花椒を振りかけると、本格的な麻婆豆腐になります!

ご飯にぴったりな麻婆豆腐のレシピです!ぜひお試しください。

材料(2人前)

  • 豆腐 1丁
    約300g、木綿豆腐がおすすめ
  • 豚ひき肉 150g
  • ネギ 1本
    みじん切り
  • にんにく 1片
    みじん切り
  • しょうが 1片
    みじん切り
  • サラダ油 大さじ1

調味料

  • 豆板醤 小さじ1〜2
    お好みで辛さを調整
  • 甜麺醤 大さじ1
  • 醤油 大さじ1
  • 酒 大さじ1
  • 鶏ガラスープの素 小さじ1
  • 水 150ml
  • 片栗粉 小さじ1
    同量の水で溶いておく
  • ごま油 少々

作り方

  • 豆腐を準備する
    豆腐はキッチンペーパーで水気を軽く取り、2cm角に切っておきます。
  • ひき肉を炒める
    フライパンにサラダ油を熱し、ひき肉を炒めます。色が変わるまで中火でしっかり炒めましょう。
  • 香味野菜を加える
    ひき肉に火が通ったら、にんにく、しょうが、ネギを加え、香りが立つまで炒めます。
  • 調味料を加える
    豆板醤、甜麺醤を加え、1分ほど炒めて香ばしさを出します。次に、醤油、酒、鶏ガラスープの素、水を加えて混ぜます。
  • 豆腐を加える
    切っておいた豆腐をそっとフライパンに入れ、中火で2〜3分煮ます。豆腐を崩さないように、優しく混ぜてください。
  • とろみをつける
    水溶き片栗粉を少しずつ加え、全体がとろっとするまでかき混ぜます。
  • 仕上げ
    最後にごま油をひとまわしして、香りをプラスします。

上記の3カラムのレイアウトを画面幅1000pxくらいの端末で表示すると、右下部分に大きな空白ができてしまいます。この空白ができないように CSS で調整した第2弾をこの記事の最後で紹介しています。

2カラムのレイアウト

カラム幅の比率 1:1

チャーハン

シンプルで美味しいチャーハンのレシピをご紹介します。ごはん粒と具材の旨みが一体となって口いっぱいに広がります。

ポイント

  • ご飯は冷やご飯を使うと、よりパラパラに仕上がります。
  • 炒める際、フライパンの温度を高めに保つと良いです。

お好みで、エビやピーマン、にんじんなども加えてアレンジを楽しめます!

材料(2人前)

  • ご飯 2杯分
    冷やご飯を使うとよりパラパラに仕上がります。
  • 卵 2個
  • ネギ 1本
    みじん切り
  • ハムやベーコン、チャーシュー 50g
    細かく切る
  • 醤油 小さじ1
  • 塩 適量
  • こしょう 適量
  • サラダ油 大さじ1

作り方

  • 準備
    ご飯が冷えて固まっている場合は、手やスプーンで軽くほぐしておきます。
  • 卵を炒める
    フライパンに油を熱し、溶いた卵を入れて炒め、半熟状態になったら一旦取り出します。
  • 具材を炒める
    フライパンに再び油を入れ、ネギとハムを炒めます。
  • ご飯を加える
    ご飯を加え、全体をほぐしながら炒めます。お米がパラパラになるようにしっかり炒めましょう。
  • 卵を戻す
    先ほど取り出した卵を戻し、醤油、塩、こしょうで味を調えます。
  • 仕上げ
    全体がしっかり混ざり、香ばしい香りがしたら完成です。

上記のカラム幅比率 1:1のレイアウトはどの画面幅でもきれいにレイアウトされます。

カラム幅の比率 1:2

チャーハン

シンプルで美味しいチャーハンのレシピをご紹介します。ごはん粒と具材の旨みが一体となって口いっぱいに広がります。

ポイント

  • ご飯は冷やご飯を使うと、よりパラパラに仕上がります。
  • 炒める際、フライパンの温度を高めに保つと良いです。

お好みで、エビやピーマン、にんじんなども加えてアレンジを楽しめます!

材料(2人前)

  • ご飯 2杯分
    冷やご飯を使うとよりパラパラに仕上がります。
  • 卵 2個
  • ネギ 1本
    みじん切り
  • ハムやベーコン、チャーシュー 50g
    細かく切る
  • 醤油 小さじ1
  • 塩 適量
  • こしょう 適量
  • サラダ油 大さじ1

作り方

  • 準備
    ご飯が冷えて固まっている場合は、手やスプーンで軽くほぐしておきます。
  • 卵を炒める
    フライパンに油を熱し、溶いた卵を入れて炒め、半熟状態になったら一旦取り出します。
  • 具材を炒める
    フライパンに再び油を入れ、ネギとハムを炒めます。
  • ご飯を加える
    ご飯を加え、全体をほぐしながら炒めます。お米がパラパラになるようにしっかり炒めましょう。
  • 卵を戻す
    先ほど取り出した卵を戻し、醤油、塩、こしょうで味を調えます。
  • 仕上げ
    全体がしっかり混ざり、香ばしい香りがしたら完成です。

上記のカラム幅比率 1:2のレイアウトを画面幅1000pxくらいの端末で表示すると、右上部分に大きな空白ができてしまいます。この空白ができないように CSS で調整した第2弾をこの記事の最後で紹介しています。

CSS を一切書かずにこういうレイアウトを作れるのって楽しいし、便利なのですが、CSS を理解しているとよりサクサク作業が進むように感じます。

関連記事

どの画面幅でもきれいにレイアウトされるように CSS で調整した記事がこちらです。

グリッドレイアウトで作った料理レシピのブロックパターン②(CSS で調整)

どの画面幅でもきれいにレイアウトされるように CSS を書いて調整してあります。

投稿者プロフィール

対馬 俊彦
対馬 俊彦魚沼情報サービス (新潟県南魚沼市)
【日本全国対応】WordPress のサイト制作、設定、カスタマイズ、トラブルでお悩み、お困りの方、お手伝いいたします。

Lightning / VK Blocks / VK Filter Search のサポート、カスタマイズを得意としています。

遠方からのご依頼の場合、打ち合わせ・サポートを Zoom や電子メール・電話などを併用して行わせていただきます。

オンラインレッスン形式でのホームページ制作サポートも行っています。お客様ご自身でホームページを制作・運用する上でうまくいかない部分をサポートいたします。設定やカスタマイズを手伝ってもらいたい、同時に便利な使い方や設定方法、カスタマイズのやり方も知ることができたら...という方にご好評いただいています。

デザイナー様、制作業者様のサイト制作のお手伝いも数多く行っています。難しい部分のコーディング ( PHP / CSS / jQuery ) をやってほしい、いま人手が足りない等、お仕事の依頼をお待ちしています。

ご要望をうかがった上で費用見積り(無料)を提示させていただきますので、お気軽にお問い合わせください。

メールでのお問い合わせはこちら

Lightning テーマ使用

中小企業様、個人事業主様向け

最適なホームページ

を制作いたします

制作費用クオリティを落とさずに



価格を抑えたサイトを制作します
必要十分お問い合わせフォーム、新着情報など



必要なものが最初から揃っています
サポート1年間のサポートがついて安心
初めてでもホームページを活用できます