ブロックのグループ『Mark11』は超便利!区切りに使えばあら不思議🎨

 

THE SONIC の『ブロックエディタの使用例』をご紹介します。

しおり

しおり

今回はグループの『Mark11』です。

 

Mark11の特徴
  • 画面の横幅いっぱいに広がる
  • 仕切る感じに使える
  • いろいろと応用できる

 

サンプルはこちら。

  • ラーメン
  • 炒飯
  • 餃子

 

『仕切り』に使ってみる

スマホで見たとき

上の写真のグリーン部分が『Mark11』を使っています。

スマホ画面の横幅いっぱいにグリーンの『Mark11』が広がるので、結果的に上の白い部分を区切るんです。

  

上の写真のようにグリーンの『Mark11』を使うことで、

  • 上の白いエリア
  • 下の緑のエリア

を区切っています。

  

パソコンで見たとき

パソコン画面で見ても同じように仕切ります

メインエリアの横幅いっぱいにグループ『Mark11』が広がるので、結果的に上下を仕切るわけです。

   

記事中のサンプルで紹介した記事はこちらから見れます。

参考 ホットサンドメーカーを使って食卓を楽しくにぎやかに!

連続で仕切る!

グループ『Mark11』を連続で使ってさらに仕切ることも可能です。

例えば、

  1. 緑のエリア
  2. 白のエリア
  3. 緑のエリア

という感じで仕切ってみます。

 

スマホで見たとき

スマホ画面が小さいので見にくいですが、

  1. 緑のエリア
  2. 白のエリア
  3. 緑のエリア

と区切られています。

 

パソコンで見たとき

パソコン画面は大きいのでわかりやすいです。

  1. 緑のエリア
  2. 白のエリア
  3. 緑のエリア

としっかり区切られています。

  

記事中のサンプルで紹介した記事はこちらから見れます。

参考 ホットサンドメーカーを使って食卓を楽しくにぎやかに!

グループ『Mark11』の設定方法

グループ『Mark11』の設定方法は2パターンあります。

  1. サイドバーから選ぶ
  2. グループブロックの左上の『スタイル変更』から選ぶ

①サイドバーから選ぶ

グループブロックサイドバーMark11

②ブロック左上の『スタイル変更』から選ぶ

グループブロック左上のスタイル変更Mark11

色はお好みで調整可能

グループ『Mark11』の背景色は自由に設定できます。

サイドバー色設定背景色

 

上の写真はわかりやすいように『Mark11』の背景色をオレンジにしてみました。

カラーコードで指定することもできます。

『Mark11』の中にも色々なブロックが入る

グループ『Mark11』の中にも色々なブロックが入ります。

例えば、

  • リスト
  • カラム
  • タイトルボックス

を『Mark11』の中に入れることも可能です。

 

いろいろと応用できると思います。

グループ『Mark11』はとっても便利なブロック

 

自分なりの組み合わせが完成したら『再利用ブロック』に登録しておくと便利です。

しおり

しおり

通常ブロックへ変換すれば個別に編集できます。

まとめ

Mark11の特徴
  • 画面の横幅いっぱいに広がる
  • 仕切る感じに使える
  • いろいろと応用できる

   

記事中のサンプルで紹介した記事はこちらから見れます。

参考 ホットサンドメーカーを使って食卓を楽しくにぎやかに!

 

関連記事